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

No:36387

Spongebob's tic tac toe game
Developer User16798｜Date and time 24/1/17 16:23:08
Build time 19.368 sec｜Game capacity 3.558KB｜

Script

Spongebob's Tic Tac Toe Game

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Spongebob's Tic Tac Toe Game</title>
</head>
<body>
  <h1>Spongebob's Tic Tac Toe Game</h1>
  <canvas id="gameCanvas" width="300" height="300"></canvas>

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

// Drawing grid lines
      ctx.strokeStyle = "black";
      ctx.lineWidth = 3;
      for (var i = 1; i < 3; i++) {
        ctx.beginPath();
        ctx.moveTo(i * cellWidth, 0);
        ctx.lineTo(i * cellWidth, canvas.height);
        ctx.stroke();

ctx.beginPath();
        ctx.moveTo(0, i * cellHeight);
        ctx.lineTo(canvas.width, i * cellHeight);
        ctx.stroke();
      }

// Drawing game symbols
      var padding = 10;
      ctx.font = "100px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
          if (gameBoard[row][col] == 1) {
            ctx.fillText("🍍", col * cellWidth + cellWidth / 2, row * cellHeight + cellHeight / 2);
          } else if (gameBoard[row][col] == -1) {
            ctx.fillText("🍔", col * cellWidth + cellWidth / 2, row * cellHeight + cellHeight / 2);
          }
        }
      }
    }

// Function to handle player moves
    function handleMove(event) {
      if (!gameOver) {
        var mouseX = event.pageX - canvas.offsetLeft;
        var mouseY = event.pageY - canvas.offsetTop;

var selectedRow = Math.floor(mouseY / cellHeight);
        var selectedCol = Math.floor(mouseX / cellWidth);

if (gameBoard[selectedRow][selectedCol] == 0) {
          gameBoard[selectedRow][selectedCol] = currentPlayer;
          currentPlayer = -currentPlayer;

drawGameBoard();
          checkGameOver();
        }
      }
    }

function checkGameOver() {
      var winningCombinations = [
        [[0, 0], [0, 1], [0, 2]], // Rows
        [[1, 0], [1, 1], [1, 2]],
        [[2, 0], [2, 1], [2, 2]],
        [[0, 0], [1, 0], [2, 0]], // Columns
        [[0, 1], [1, 1], [2, 1]],
        [[0, 2], [1, 2], [2, 2]],
        [[0, 0], [1, 1], [2, 2]], // Diagonals
        [[0, 2], [1, 1], [2, 0]]
      ];

for (var i = 0; i < winningCombinations.length; i++) {
        var combination = winningCombinations[i];
        var sum = 0;

for (var j = 0; j < combination.length; j++) {
          var cell = combination[j];
          sum += gameBoard[cell[0]][cell[1]];
        }

if (sum == 3 || sum == -3) {
          gameOver = true;
          alert("Player " + (sum == 3 ? "1" : "2") + " wins!");
          break;
        }
      }

if (!gameOver) {
        var draw = true;
        for (var row = 0; row < 3; row++) {
          for (var col = 0; col < 3; col++) {
            if (gameBoard[row][col] == 0) {
              draw = false;
              break;
            }
          }
        }

if (draw) {
          gameOver = true;
          alert("It's a draw!");
        }
      }
    }

// Add the event listener to handle player moves
    canvas.addEventListener("click", handleMove);

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