Kółko i krzyżyk / Tic Tac Toe

lutego 21, 2019

Ze sztuczną inteligencją nigdy nie wygrasz. / You will never win with artificial intelligence.

table tr:first-child td {
 border-top: 0;
}
table tr:last-child td {
 border-bottom: 0;
}
table tr td:first-child {
 border-left: 0;
}
table tr td:last-child {
 border-right: 0;
}
.endgame {
  display: none;
  width: 200px;
  top: 120px;
  background: rgba(205,133,63, 0.8);
  position: absolute;
  left: 50%;
  margin-left: -100px;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-size: 2em;
}
 </style>
 <table>
<tr>
   <td class="cell" id="0"></td>
   <td class="cell" id="1"></td>
   <td class="cell" id="2"></td>
  </tr>
<tr>
   <td class="cell" id="3"></td>
   <td class="cell" id="4"></td>
   <td class="cell" id="5"></td>
  </tr>
<tr>
   <td class="cell" id="6"></td>
   <td class="cell" id="7"></td>
   <td class="cell" id="8"></td>
  </tr>
</table>
<div class="endgame">
  <div class="text">
</div>
<button onClick="startGame()">RESTART</button>
 </div>
<script>
var origBoard;
const huPlayer = 'O';
const aiPlayer = 'X';
const winCombos = [
 [0, 1, 2],
 [3, 4, 5],
 [6, 7, 8],
 [0, 3, 6],
 [1, 4, 7],
 [2, 5, 8],
 [0, 4, 8],
 [6, 4, 2]
]
const cells = document.querySelectorAll('.cell');
startGame();
function startGame() {
 document.querySelector(".endgame").style.display = "none";
 origBoard = Array.from(Array(9).keys());
 for (var i = 0; i < cells.length; i++) {
  cells[i].innerText = '';
  cells[i].style.removeProperty('background');
  cells[i].addEventListener('click', turnClick, false);
 }
}
function turnClick(square) {
 if (typeof origBoard[square.target.id] == 'number') {
  turn(square.target.id, huPlayer)
  if (!checkWin(origBoard, huPlayer) && !checkTie()) turn(bestSpot(), aiPlayer);
 }
}
function turn(squareId, player) {
 origBoard[squareId] = player;
 document.getElementById(squareId).innerText = player;
 let gameWon = checkWin(origBoard, player)
 if (gameWon) gameOver(gameWon)
}
function checkWin(board, player) {
 let plays = board.reduce((a, e, i) =>
  (e === player) ? a.concat(i) : a, []);
 let gameWon = null;
 for (let [index, win] of winCombos.entries()) {
  if (win.every(elem => plays.indexOf(elem) > -1)) {
   gameWon = {index: index, player: player};
   break;
  }
 }
 return gameWon;
}
function gameOver(gameWon) {
 for (let index of winCombos[gameWon.index]) {
  document.getElementById(index).style.background =
   gameWon.player == huPlayer ? "rgba(0,255,0,0.5)" : "rgba(255,0,0,0.5)";
 }
 for (var i = 0; i < cells.length; i++) {
  cells[i].removeEventListener('click', turnClick, false);
 }
 declareWinner(gameWon.player == huPlayer ? "Wygrałeś / You win!" : "Przegrałeś / You lose");
}
function declareWinner(who) {
 document.querySelector(".endgame").style.display = "block";
 document.querySelector(".endgame .text").innerText = who;
}
function emptySquares() {
 return origBoard.filter(s => typeof s == 'number');
}
function bestSpot() {
 return minimax(origBoard, aiPlayer).index;
}
function checkTie() {
 if (emptySquares().length == 0) {
  for (var i = 0; i < cells.length; i++) {
   cells[i].style.backgroundColor = "rgba(0,255,0,0.5)";
   cells[i].removeEventListener('click', turnClick, false);
  }
  declareWinner("Remis / Tie Game!")
  return true;
 }
 return false;
}
function minimax(newBoard, player) {
 var availSpots = emptySquares();
 if (checkWin(newBoard, huPlayer)) {
  return {score: -10};
 } else if (checkWin(newBoard, aiPlayer)) {
  return {score: 10};
 } else if (availSpots.length === 0) {
  return {score: 0};
 }
 var moves = [];
 for (var i = 0; i < availSpots.length; i++) {
  var move = {};
  move.index = newBoard[availSpots[i]];
  newBoard[availSpots[i]] = player;
  if (player == aiPlayer) {
   var result = minimax(newBoard, huPlayer);
   move.score = result.score;
  } else {
   var result = minimax(newBoard, aiPlayer);
   move.score = result.score;
  }
  newBoard[availSpots[i]] = move.index;
  moves.push(move);
 }
 var bestMove;
 if(player === aiPlayer) {
  var bestScore = -10000;
  for(var i = 0; i < moves.length; i++) {
   if (moves[i].score > bestScore) {
    bestScore = moves[i].score;
    bestMove = i;
   }
  }
 } else {
  var bestScore = 10000;
  for(var i = 0; i < moves.length; i++) {
   if (moves[i].score < bestScore) {
    bestScore = moves[i].score;
    bestMove = i;
   }
  }
 }
 return moves[bestMove];
}
    </script>

Komentarze

Tomasz P.28 lutego 2019 10:10
Tego się nie da wygrać, podobnie jak narzygać przez słomkę
OdpowiedzUsuń
Odpowiedzi
Anonimowy8 marca 2019 11:38
Dobrze krótko xd
OdpowiedzUsuń
Odpowiedzi

Dodaj komentarz

MEM 365

Szukaj na tym blogu

Kółko i krzyżyk / Tic Tac Toe

Komentarze

Prześlij komentarz