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

No:20449

←

Prev Next

→

Tic tac toe game
Developer User9050｜Date and time 23/10/9 20:27:09
Build time 24.881 sec｜Game capacity 3.58KB｜

Script

Sure! Here's an example of a Tic Tac Toe game implemented in a single HTML file using JavaScript:

Tic Tac Toe

To run this game, you can simply save the above code into an HTML file (e.g., `tic-tac-toe.html`) and open it in a web browser. The game will be displayed as a Tic Tac Toe board, and you can click on the cells to make your moves. The game will detect wins, draws, and reset the game when needed. Note that the pictograms are not included in this example, as the focus was on the game's functionality. However, you can easily modify the HTML code and CSS styling to include pictograms or use appropriate symbols instead of "X" and "O" for player moves.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's an example of a Tic Tac Toe game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe</title>
    <style>
      td {
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 50px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Tic Tac Toe</h1>
    <table id="gameBoard">
      <tr>
        <td onclick="makeMove(0, 0)"></td>
        <td onclick="makeMove(0, 1)"></td>
        <td onclick="makeMove(0, 2)"></td>
      </tr>
      <tr>
        <td onclick="makeMove(1, 0)"></td>
        <td onclick="makeMove(1, 1)"></td>
        <td onclick="makeMove(1, 2)"></td>
      </tr>
      <tr>
        <td onclick="makeMove(2, 0)"></td>
        <td onclick="makeMove(2, 1)"></td>
        <td onclick="makeMove(2, 2)"></td>
      </tr>
    </table>

// Function to make a move
      function makeMove(row, col) {
        if (gameBoard[row][col] === "") {
          gameBoard[row][col] = currentPlayer;
          document.getElementById("gameBoard").rows[row].cells[col].innerHTML = currentPlayer;

if (checkWin(currentPlayer)) {
            alert("Player " + currentPlayer + " wins!");
            resetGame();
          } else if (checkDraw()) {
            alert("It's a draw!");
            resetGame();
          } else {
            currentPlayer = (currentPlayer === "X") ? "O" : "X";
          }
        }
      }

// Function to check for a win
      function checkWin(player) {
        for (var i = 0; i < 3; i++) {
          if (
            (gameBoard[i][0] === player && gameBoard[i][1] === player && gameBoard[i][2] === player) ||
            (gameBoard[0][i] === player && gameBoard[1][i] === player && gameBoard[2][i] === player)
          ) {
            return true;
          }
        }

if (
          (gameBoard[0][0] === player && gameBoard[1][1] === player && gameBoard[2][2] === player) ||
          (gameBoard[2][0] === player && gameBoard[1][1] === player && gameBoard[0][2] === player)
        ) {
          return true;
        }

return false;
      }

// Function to check for a draw
      function checkDraw() {
        for (var i = 0; i < 3; i++) {
          for (var j = 0; j < 3; j++) {
            if (gameBoard[i][j] === "") {
              return false;
            }
          }
        }
        return true;
      }

// Function to reset the game
      function resetGame() {
        currentPlayer = "X";
        gameBoard = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""]
        ];
        var cells = document.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
          cells[i].innerHTML = "";
        }
      }
    </script>
  </body>
</html>
```

Note that the pictograms are not included in this example, as the focus was on the game's functionality. However, you can easily modify the HTML code and CSS styling to include pictograms or use appropriate symbols instead of "X" and "O" for player moves.