AI game creator

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

No:26585

←

Prev Next

→

Make tic tac toe
Developer User13198｜Date and time 23/12/1 21:39:18
Build time 78.242 sec｜Game capacity 3.363KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<HTML>
<head>
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      width: 300px;
      height: 300px;
    }
    
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      cursor: pointer;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="board"></div>
  
  <script>
    'use strict';
    document.addEventListener("DOMContentLoaded", function() {
      const board = document.querySelector('.board');
      let cells = [];
      let currentPlayer = 'X';
      let gameOver = false;
      
      // Initialize the board
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.dataset.row = i;
          cell.dataset.col = j;
          cell.addEventListener('click', handleClick);
          board.appendChild(cell);
          cells.push(cell);
        }
      }
      
      function handleClick(event) {
        if (gameOver) return;
        
        const clickedCell = event.target;
        const row = clickedCell.dataset.row;
        const col = clickedCell.dataset.col;
        
        if (clickedCell.textContent !== '') return;
        
        markCell(clickedCell, currentPlayer);
        
        if (checkWin(row, col, currentPlayer)) {
          gameOver = true;
          alert(currentPlayer + ' победил!');
          restartGame();
          return;
        }
        
        if (checkDraw()) {
          gameOver = true;
          alert('Ничья!');
          restartGame();
          return;
        }
        
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      }
      
      function markCell(cell, marker) {
        cell.textContent = marker;
      }
      
      function checkWin(row, col, currentPlayer) {
        // Check row
        let count = 0;
        for (let i = 0; i < 3; i++) {
          if (cells[row * 3 + i].textContent === currentPlayer) {
            count++;
          }
        }
        if (count === 3) return true;
        
        // Check column
        count = 0;
        for (let i = 0; i < 3; i++) {
          if (cells[col + i * 3].textContent === currentPlayer) {
            count++;
          }
        }
        if (count === 3) return true;
        
        // Check diagonal
        if (row === col || (parseInt(row) + parseInt(col)) === 2) {
          count = 0;
          for (let i = 0; i < 3; i++) {
            if (cells[i * 3 + i].textContent === currentPlayer) {
              count++;
            }
          }
          if (count === 3) return true;
          
          count = 0;
          for (let i = 0; i < 3; i++) {
            if (cells[i * 3 + (2 - i)].textContent === currentPlayer) {
              count++;
            }
          }
          if (count === 3) return true;
        }
        
        return false;
      }
      
      function checkDraw() {
        return Array.from(cells).every((cell) => cell.textContent !== '');
      }
      
      function restartGame() {
        Array.from(cells).forEach((cell) => {
          cell.textContent = '';
        });
        currentPlayer = 'X';
        gameOver = false;
      }
    });
  </script>
</body>
</html>