Tic TAC toe with Nine squares making a square's game | AI game creator

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

No:50956

183

Tic TAC toe with Nine squares making a square
Developer User21444｜Date and time 24/3/10 10:59:57
Build time 6.096 sec｜Game capacity 1.794KB｜

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Tres en Raya</title>
</head>
<body>
  <canvas id="canvas" width="300" height="300"></canvas>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    const size = 100;
    const board = [
      ['', '', ''],
      ['', '', ''],
      ['', '', '']
    ];
    
    let player = 'X';
    
    canvas.addEventListener('click', (event) => {
      const rect = canvas.getBoundingClientRect();
      const x = Math.floor((event.clientX - rect.left) / size);
      const y = Math.floor((event.clientY - rect.top) / size);
      
      if (board[y][x] === '') {
        board[y][x] = player;
        
        if (player === 'X') {
          player = 'O';
        } else {
          player = 'X';
        }
        
        drawBoard();
      }
    });
    
    function drawBoard() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      for (let y = 0; y < 3; y++) {
        for (let x = 0; x < 3; x++) {
          ctx.strokeRect(x * size, y * size, size, size);
          
          if (board[y][x] !== '') {
            if (board[y][x] === 'X') {
              drawX(x, y);
            } else {
              drawO(x, y);
            }
          }
        }
      }
    }
    
    function drawX(x, y) {
      ctx.beginPath();
      ctx.moveTo(x * size + 10, y * size + 10);
      ctx.lineTo((x + 1) * size - 10, (y + 1) * size - 10);
      ctx.moveTo((x + 1) * size - 10, y * size + 10);
      ctx.lineTo(x * size + 10, (y + 1) * size - 10);
      ctx.stroke();
    }
    
    function drawO(x, y) {
      ctx.beginPath();
      ctx.arc(x * size + size / 2, y * size + size / 2, size / 2 - 10, 0, 2 * Math.PI);
      ctx.stroke();
    }
    
    drawBoard();
  </script>
</body>
</html>