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

No:37180

←

Prev Next

→

tic tac toe
Developer User17015｜Date and time 24/1/20 17:33:24
Build time 11.889 sec｜Game capacity 2.787KB｜

Script

Крестики-нолики

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      margin-top: 30px;
    }
    .grid div {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 60px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
      cursor: pointer;
    }
    #reset {
      width: 200px;
      height: 50px;
      font-size: 24px;
      margin-top: 20px;
      background-color: lightblue;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Крестики-нолики</h1>
  <div class="grid">
    <div id="cell-0"></div>
    <div id="cell-1"></div>
    <div id="cell-2"></div>
    <div id="cell-3"></div>
    <div id="cell-4"></div>
    <div id="cell-5"></div>
    <div id="cell-6"></div>
    <div id="cell-7"></div>
    <div id="cell-8"></div>
  </div>
  <button id="reset">Начать заново</button>

let currentPlayer = 'X';
    let gameWon = false;
    let moves = 0;

const winningPatterns = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]];

cells.forEach(cell => {
      cell.addEventListener('click', makeMove);
    });

resetButton.addEventListener('click', resetGame);

function makeMove(e) {
      if (e.target.innerHTML === '' && !gameWon) {
        e.target.innerHTML = currentPlayer;
        moves++;

if (checkWin()) {
          gameWon = true;
          alert('Игра окончена! Победил игрок ' + currentPlayer + '!');
        } else if (moves === 9) {
          alert('Игра окончена! Ничья!');
          resetGame();
        } else {
          currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        }
      }
    }

function resetGame() {
      cells.forEach(cell => {
        cell.innerHTML = '';
        cell.style.backgroundColor = 'lightblue';
      });
      currentPlayer = 'X';
      gameWon = false;
      moves = 0;
    }
  </script>
</body>
</html>