AI game creator

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

No:24744

←

Prev Next

→

Xo game
Developer User11837｜Date and time 23/11/11 22:21:12
Build time 149.958 sec｜Game capacity 4.652KB｜

Script

Sure! Here's an example of a simple XO game implemented as a single HTML file using JavaScript:

This implementation represents the game as an HTML canvas element where the player can click to make a move. The X and O symbols are drawn on the canvas, and the game logic is handled by JavaScript. Players take turns making moves, and the game checks for a winner after each move. If a player wins, an alert is shown, and the game can be reset by clicking anywhere on the canvas. Please note that this is a simplified implementation and doesn't include additional features like a menu, score tracking, or AI opponent. It's a basic XO game to give you an idea of the structure and functionality.

←

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 XO game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>XO Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="300"></canvas>
  <script>
    // Get the canvas element and its context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Calculate the cell size and padding
    const cellSize = canvas.width / 3;
    const padding = 10;

// Store the game state as a 2D array
    let gameState = [[null, null, null], [null, null, null], [null, null, null]];

// Variable to keep track of the current player (X or O)
    let currentPlayer = "X";

// Function to handle the player's move
    function handleMove(x, y) {
      // Calculate the row and column based on the clicked coordinates
      const row = Math.floor(y / cellSize);
      const col = Math.floor(x / cellSize);

// Check if the clicked cell is empty
      if (gameState[row][col] === null) {
        // Update the game state with the current player's symbol
        gameState[row][col] = currentPlayer;
        drawBoard();
        
        // Check if the current player has won the game
        if (checkWin()) {
          alert(currentPlayer + " wins!");
          resetGame();
        } else {
          // Switch to the other player
          currentPlayer = currentPlayer === "X" ? "O" : "X";
        }
      }
    }

// Function to draw the game board
    function drawBoard() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the grid lines
      ctx.strokeStyle = "#000";
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(cellSize, 0);
      ctx.lineTo(cellSize, canvas.height);
      ctx.moveTo(cellSize * 2, 0);
      ctx.lineTo(cellSize * 2, canvas.height);
      ctx.moveTo(0, cellSize);
      ctx.lineTo(canvas.width, cellSize);
      ctx.moveTo(0, cellSize * 2);
      ctx.lineTo(canvas.width, cellSize * 2);
      ctx.stroke();

// Draw the X and O symbols
      ctx.font = "bold 48px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 3; col++) {
          if (gameState[row][col] === "X") {
            ctx.fillText("X", col * cellSize + cellSize / 2, row * cellSize + cellSize / 2);
          } else if (gameState[row][col] === "O") {
            ctx.fillText("O", col * cellSize + cellSize / 2, row * cellSize + cellSize / 2);
          }
        }
      }
    }

// Function to check if a player has won
    function checkWin() {
      // Check rows
      for (let row = 0; row < 3; row++) {
        if (gameState[row][0] !== null && gameState[row][0] === gameState[row][1] && gameState[row][0] === gameState[row][2]) {
          return true;
        }
      }

// Check columns
      for (let col = 0; col < 3; col++) {
        if (gameState[0][col] !== null && gameState[0][col] === gameState[1][col] && gameState[0][col] === gameState[2][col]) {
          return true;
        }
      }

// Check diagonals
      if (gameState[0][0] !== null && gameState[0][0] === gameState[1][1] && gameState[0][0] === gameState[2][2]) {
        return true;
      }
      if (gameState[0][2] !== null && gameState[0][2] === gameState[1][1] && gameState[0][2] === gameState[2][0]) {
        return true;
      }

return false;
    }

// Function to reset the game
    function resetGame() {
      gameState = [[null, null, null], [null, null, null], [null, null, null]];
      currentPlayer = "X";
      drawBoard();
    }

// Add event listener for the canvas click event
    canvas.addEventListener("click", function (event) {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      handleMove(x, y);
    });

// Start the game by drawing the initial board
    drawBoard();
  </script>
</body>
</html>
```

Please note that this is a simplified implementation and doesn't include additional features like a menu, score tracking, or AI opponent. It's a basic XO game to give you an idea of the structure and functionality.