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

No:16321

136

←

Prev Next

→

Tic tac toe
Developer User7232｜Date and time 23/9/17 8:08:52
Build time 35.306 sec｜Game capacity 4.539KB｜

Script

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

Tic Tac Toe

Your turn: X

Save this code into a `.html` file and open it in a web browser to play the Tic Tac Toe game. The game features a grid of cells represented by pictograms of crosses (X), circles (O), and empty cells. Simply click on an empty cell to make a move, and the game will determine if a player has won or if it's a draw. The status of the game is displayed at the top. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    body {
      text-align: center;
    }
    
    .grid {
      display: inline-block;
      border-collapse: collapse;
      border: 2px solid black;
      margin: 10px;
    }
    
    .grid td {
      width: 80px;
      height: 80px;
      font-size: 48px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Tic Tac Toe</h1>
  <table class="grid">
    <tr>
      <td onClick="play(0, 0)"><img src="cross.png" id="cell_0_0" alt=""></td>
      <td onClick="play(0, 1)"><img src="empty.png" id="cell_0_1" alt=""></td>
      <td onClick="play(0, 2)"><img src="empty.png" id="cell_0_2" alt=""></td>
    </tr>
    <tr>
      <td onClick="play(1, 0)"><img src="empty.png" id="cell_1_0" alt=""></td>
      <td onClick="play(1, 1)"><img src="circle.png" id="cell_1_1" alt=""></td>
      <td onClick="play(1, 2)"><img src="empty.png" id="cell_1_2" alt=""></td>
    </tr>
    <tr>
      <td onClick="play(2, 0)"><img src="empty.png" id="cell_2_0" alt=""></td>
      <td onClick="play(2, 1)"><img src="cross.png" id="cell_2_1" alt=""></td>
      <td onClick="play(2, 2)"><img src="empty.png" id="cell_2_2" alt=""></td>
    </tr>
  </table>
  <div id="status">Your turn: X</div>
  
  <script>
    let currentPlayer = "X";
    let gameGrid = [
        ["empty", "empty", "empty"],
        ["empty", "empty", "empty"],
        ["empty", "empty", "empty"]
    ];
    
    function play(row, column) {
        const cell = document.getElementById(`cell_${row}_${column}`);
        
        // Check if the cell is empty
        if (gameGrid[row][column] === "empty") {
            gameGrid[row][column] = currentPlayer;
            
            // Update the cell image based on the current player
            cell.src = currentPlayer === "X" ? "cross.png" : "circle.png";
            
            // Check if the current player wins
            if (checkWin(currentPlayer)) {
                document.getElementById("status").innerHTML = `Player ${currentPlayer} wins!`;
                disableGrid();
                return;
            }
            
            // Check if it's a draw
            if (checkDraw()) {
                document.getElementById("status").innerHTML = "It's a draw!";
                disableGrid();
                return;
            }
            
            // Switch to the next player
            currentPlayer = currentPlayer === "X" ? "O" : "X";
            document.getElementById("status").innerHTML = `Your turn: ${currentPlayer}`;
        }
    }
    
    function checkWin(player) {
        return (
            // Horizontal
            (gameGrid[0][0] === player && gameGrid[0][1] === player && gameGrid[0][2] === player) || 
            (gameGrid[1][0] === player && gameGrid[1][1] === player && gameGrid[1][2] === player) ||
            (gameGrid[2][0] === player && gameGrid[2][1] === player && gameGrid[2][2] === player) ||
      
            // Vertical
            (gameGrid[0][0] === player && gameGrid[1][0] === player && gameGrid[2][0] === player) ||
            (gameGrid[0][1] === player && gameGrid[1][1] === player && gameGrid[2][1] === player) ||
            (gameGrid[0][2] === player && gameGrid[1][2] === player && gameGrid[2][2] === player) ||
      
            // Diagonal
            (gameGrid[0][0] === player && gameGrid[1][1] === player && gameGrid[2][2] === player) ||
            (gameGrid[0][2] === player && gameGrid[1][1] === player && gameGrid[2][0] === player)
        );
    }
    
    function checkDraw() {
        for (let row = 0; row < 3; row++) {
            for (let col = 0; col < 3; col++) {
                if (gameGrid[row][col] === "empty") {
                    return false;
                }
            }
        }
        return true;
    }
    
    function disableGrid() {
        const cells = document.querySelectorAll(".grid td");
        for (let i = 0; i < cells.length; i++) {
            cells[i].onclick = null;
        }
    }
  </script>
</body>
</html>
```