Tic tac toe I'm o your x's game

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

No:27893

←

Prev Next

→

Tic tac toe I'm o your x
Developer User12706｜Date and time 23/12/10 0:49:37
Build time 22.712 sec｜Game capacity 2.612KB｜

Script

Sure! Here's a simple implementation of Tic Tac Toe as a single HTML file using JavaScript:

This implementation uses a canvas element to draw the game board, and allows players to make moves by clicking on the cells. The X and O symbols are represented by Unicode pictograms. The game logic is handled through the HTML canvas click event.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of Tic Tac Toe as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="300"></canvas>
  
  <script>
    // Tic Tac Toe Game

// Pictograms (X and O)
    const xPic = "❌";
    const oPic = "⭕";

// Represents the game board
    const board = [
      ["", "", ""],
      ["", "", ""],
      ["", "", ""]
    ];

// Current player
    let currentPlayer = "X";

// Canvas
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Draw the game board
    function drawBoard() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw lines
      ctx.lineWidth = 2;
      ctx.strokeStyle = "black";
      ctx.beginPath();
      ctx.moveTo(100, 0);
      ctx.lineTo(100, 300);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(200, 0);
      ctx.lineTo(200, 300);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(0, 100);
      ctx.lineTo(300, 100);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(0, 200);
      ctx.lineTo(300, 200);
      ctx.stroke();

// Draw X and O symbols
      ctx.font = "48px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 3; col++) {
          const cellX = col * 100 + 50;
          const cellY = row * 100 + 50;
          if (board[row][col] === "X") {
            ctx.fillText(xPic, cellX, cellY);
          } else if (board[row][col] === "O") {
            ctx.fillText(oPic, cellX, cellY);
          }
        }
      }
    }

// Handle click event on canvas
    canvas.addEventListener("click", function(event) {
      const rect = canvas.getBoundingClientRect();
      const mousePosX = event.clientX - rect.left;
      const mousePosY = event.clientY - rect.top;

const col = Math.floor(mousePosX / 100);
      const row = Math.floor(mousePosY / 100);

// Make a move if the clicked cell is empty
      if (board[row][col] === "") {
        board[row][col] = currentPlayer;
        currentPlayer = (currentPlayer === "X") ? "O" : "X";
      }

drawBoard();
    });

// Start the game
    drawBoard();
  </script>
</body>
</html>
```