Sure, here's an example of a simple game: Tic-Tac-Toe. Tic-Tac-Toe is a classic two-player game played on a 3x3 grid. The objective is to be the first player to get three of their symbols (usually X or O) in a row, either horizontally, vertically, or diagonally. Players take turns placing their symbol on the grid until one of them achieves this goal or the grid is completely filled, resulting in a draw. It's a straightforward and easy-to-learn game often enjoyed by people of all ages.'s game

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

No:15796

←

Prev Next

→

Sure, here's an example of a simple game: Tic-Tac-..ALL
Developer User6357｜Date and time 23/9/11 23:52:29
Build time 37.78 sec｜Game capacity 3.232KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
  <head>
    <title>Tic Tac Toe</title>
    <style>
      .grid {
        display: flex;
        flex-wrap: wrap;
        max-width: 300px;
        margin: 0 auto;
      }

.cell {
        width: 33.33%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="cell" onclick="makeMove(0, 0)"></div>
      <div class="cell" onclick="makeMove(0, 1)"></div>
      <div class="cell" onclick="makeMove(0, 2)"></div>
      <div class="cell" onclick="makeMove(1, 0)"></div>
      <div class="cell" onclick="makeMove(1, 1)"></div>
      <div class="cell" onclick="makeMove(1, 2)"></div>
      <div class="cell" onclick="makeMove(2, 0)"></div>
      <div class="cell" onclick="makeMove(2, 1)"></div>
      <div class="cell" onclick="makeMove(2, 2)"></div>
    </div>

let currentPlayer = "X"; // Player X starts the game

function makeMove(row, col) {
        if (!grid[row][col]) { // If the selected cell is empty
          grid[row][col] = currentPlayer; // Set the cell with the current player's symbol

document.getElementsByClassName("cell")[row * 3 + col].innerHTML = currentPlayer; // Update the UI grid with the symbol

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

function checkWin() {
        // Check horizontal lines
        for (let i = 0; i < 3; i++) {
          if (grid[i][0] && grid[i][0] === grid[i][1] && grid[i][1] === grid[i][2]) {
            return true;
          }
        }

// Check vertical lines
        for (let j = 0; j < 3; j++) {
          if (grid[0][j] && grid[0][j] === grid[1][j] && grid[1][j] === grid[2][j]) {
            return true;
          }
        }

// Check diagonal lines
        if (grid[0][0] && grid[0][0] === grid[1][1] && grid[1][1] === grid[2][2]) {
          return true;
        }
        if (grid[0][2] && grid[0][2] === grid[1][1] && grid[1][1] === grid[2][0]) {
          return true;
        }

return false;
      }

return true;
      }

function resetGame() {
        grid = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""]
        ];
        currentPlayer = "X";

// Clear the UI grid
        let cells = document.getElementsByClassName("cell");
        for (let i = 0; i < cells.length; i++) {
          cells[i].innerHTML = "";
        }
      }
    </script>
  </body>
</html>