Make a tic tac toe that a ai is playing with the player's game

Click here for free DL of the app version that can save data.

No:43010

←

Prev Next

→

Make a tic tac toe that a ai is playing with the p..ALL
Developer User19052｜Date and time 24/2/13 23:41:26
Build time 17.944 sec｜Game capacity 4.341KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Tic Tac Toe Game</title>
   <style>
      .cell {
         border: 2px solid black;
         width: 50px;
         height: 50px;
         text-align: center;
         font-size: 2rem;
         cursor: pointer;
      }
   </style>
</head>
<body>

// Game variables
   var playerSymbol = "X"; // Player's symbol
   var aiSymbol = "O"; // AI's symbol
   var currentPlayer = playerSymbol; // Current player's turn
   var gameActive = true; // Flag to indicate if the game is still active
   var board = ["", "", "", "", "", "", "", "", ""]; // Game board representation

// Create the game board
   function createBoard() {
      var boardElement = document.createElement("div");
      boardElement.style.display = "grid";
      boardElement.style.gridTemplateColumns = "repeat(3, 1fr)";
      boardElement.style.gridGap = "10px";
      boardElement.style.margin = "50px auto";

for (var i = 0; i < 9; i++) {
         var cell = document.createElement("div");
         cell.className = "cell";
         cell.dataset.index = i;
         cell.addEventListener("click", handleClick);
         boardElement.appendChild(cell);
         cells.push(cell);
      }

messageBox = document.createElement("div");
      messageBox.style.textAlign = "center";
      messageBox.style.fontSize = "2rem";
      messageBox.style.marginTop = "20px";

document.body.appendChild(boardElement);
      document.body.appendChild(messageBox);
   }

// Handle cell click event
   function handleClick(event) {
      var cellIndex = event.target.dataset.index;

// If the cell is valid and the game is still active
      if (isValidMove(cellIndex) && gameActive) {
         // Update the game board
         board[cellIndex] = currentPlayer;
         event.target.textContent = currentPlayer;

// Check for a winner or tie
         if (isWinner(currentPlayer)) {
            showResult("Player " + currentPlayer + " wins!");
            gameActive = false;
         } else if (isTie()) {
            showResult("It's a tie!");
            gameActive = false;
         } else {
            // Switch player's turn
            currentPlayer = (currentPlayer === playerSymbol) ? aiSymbol : playerSymbol;

// AI's turn
            if (currentPlayer === aiSymbol && gameActive) {
               aiMove();
            }
         }
      }
   }

// Perform AI's move
   function aiMove() {
      var randomIndex;

// Choose a random empty cell
      do {
         randomIndex = Math.floor(Math.random() * 9);
      } while (!isValidMove(randomIndex));

// Update the game board
      board[randomIndex] = aiSymbol;
      cells[randomIndex].textContent = aiSymbol;

// Check for a winner or tie
      if (isWinner(aiSymbol)) {
         showResult("AI wins!");
         gameActive = false;
      } else if (isTie()) {
         showResult("It's a tie!");
         gameActive = false;
      } else {
         // Switch player's turn
         currentPlayer = playerSymbol;
      }
   }

// Check if the move is valid
   function isValidMove(cellIndex) {
      return (board[cellIndex] === "");
   }

// Check for a winner
   function isWinner(symbol) {
      var winningCombinations = [
         [0, 1, 2], [3, 4, 5], [6, 7, 8], // Row combinations
         [0, 3, 6], [1, 4, 7], [2, 5, 8], // Column combinations
         [0, 4, 8], [2, 4, 6] // Diagonal combinations
      ];

for (var i = 0; i < winningCombinations.length; i++) {
         var [a, b, c] = winningCombinations[i];
         if (board[a] === symbol && board[b] === symbol && board[c] === symbol) {
            return true;
         }
      }

return false;
   }

// Check if it's a tie
   function isTie() {
      return (board.indexOf("") === -1);
   }

// Display game result
   function showResult(result) {
      messageBox.textContent = result;
   }

// Start the game
   createBoard();

</script>
</body>
</html>