Игра «Крестики-нолики» | HTML, CSS, JavaScript

Введение

В этом проекте вы научитесь создавать игру «Крестики-нолики» с использованием HTML, CSS и JavaScript. «Крестики-нолики» — это игра для двух игроков, которые по очереди ставят X или O в сетке 3x3. Цель игры — выстроить три своих знака в ряд по горизонтали, вертикали или диагонали. Вы пошагово создадите необходимые файлы HTML, CSS и JavaScript и реализуете логику игры.

👀 Предварительный просмотр

Предварительный просмотр игры «Крестики-нолики»

🎯 Задачи

В этом проекте вы узнаете:

Как создать базовую структуру игры «Крестики-нолики» с помощью HTML.
Как добавить CSS-стили для оформления игровых элементов.
Как реализовать игровую логику с помощью JavaScript.
Как обрабатывать действия пользователя, проверять условия победы или ничьей и обновлять счет.
Как отрисовывать игровое поле и обновлять индикатор текущего хода.
Как позволить игрокам сбрасывать игру и начинать новый раунд.

🏆 Достижения

После завершения этого проекта вы сможете:

Создавать структуру HTML-файла для веб-приложения.
Стилизовать элементы с помощью CSS-классов.
Реализовывать игровую логику на JavaScript.
Обрабатывать взаимодействие с пользователем и соответствующим образом обновлять интерфейс.
Отрисовывать игровое поле и обновлять индикатор хода.
Создавать обработчики событий и управлять ими в JavaScript.

Создание HTML-файла

Создайте новый файл с именем index.html и добавьте в него следующий код.

cd ~/project
touch index.html

Этот код задает базовую структуру игры «Крестики-нолики».

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* CSS styles for the game */
    </style>
  </head>

  <body>
    <div id="app">
      <h1 class="text-3xl font-bold mb-4 text-gray-900">Tic-Tac-Toe</h1>
      <div id="board" class="grid grid-cols-3 gap-4 mb-4">
        <!-- Game board cells -->
      </div>
      <div id="scoreboard" class="flex justify-between items-center mb-4">
        <!-- Player scores -->
      </div>
      <div
        id="turn-indicator"
        class="text-2xl font-bold mb-4 text-gray-900"
      ></div>
      <button
        id="reset-button"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Reset Game
      </button>
    </div>

    <script>
      // JavaScript code for the game logic
    </script>
  </body>
</html>

Добавление CSS-стилей

Внутри тега <style> в секции <head> вашего HTML-файла добавьте CSS-стили, необходимые для игры. Эти стили определяют внешний вид игровых элементов, таких как игровое поле, ячейки, счет и кнопки.

<style>
  .board-cell {
    width: 100px;
    height: 100px;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #222;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  #app {
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    font-size: 32px;
    color: #333;
  }

  .text-gray-900 {
    color: #333 !important;
  }

  .text-2xl {
    font-size: 24px;
  }

  .bg-blue-500 {
    background-color: #4267b2;
  }

  .bg-blue-500:hover {
    background-color: #3b5ca0;
  }

  .bg-blue-700 {
    background-color: #385898;
  }

  .text-white {
    color: #fff !important;
  }

  .rounded {
    border-radius: 4px;
  }

  .highlight {
    background-color: #ffed4a;
  }
</style>

Вы также можете создать файл style.css в проекте и подключить его к HTML-файлу с помощью тега <link>.

<link rel="stylesheet" href="style.css" />

Выберите тот способ, который вам больше нравится.

Добавление JavaScript-кода игровой логики

Внутри тега <script> в конце HTML-файла добавьте JavaScript-код, который отвечает за логику игры. Этот код отслеживает состояние игры, обрабатывает действия пользователя, проверяет условия победы или ничьей, обновляет счет и отрисовывает игровое поле.

<script>
  // Game logic code
</script>

Инициализация игровых переменных

Объявите необходимые переменные в начале JavaScript-кода. Эти переменные будут хранить состояние игры, счет игроков и другую важную информацию.

// Game logic
const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;
let playerXScore = 0;
let playerOScore = 0;
let winningCells = [];

Обработка клика по ячейке

Создайте функцию handleCellClick, которая будет вызываться при клике на ячейку игрового поля. Эта функция будет управлять основной логикой игры: обновлением поля, проверкой победы, обновлением счета и сменой текущего игрока.

function handleCellClick(index) {
  if (gameEnded || board[index] !== "") return;
  board[index] = currentPlayer;
  renderBoard();

  if (checkWin()) {
    updateScore();
    highlightWinningCells();
    alert(`Player ${currentPlayer} wins!`);
    gameEnded = true;
  } else if (board.every((cell) => cell !== "")) {
    alert("It's a tie!");
    gameEnded = true;
  } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    updateTurnIndicator();
  }
}

Проверка победы

Создайте функцию checkWin, которая проверяет наличие выигрышной комбинации на игровом поле. Эта функция сравнивает значения в массиве board с выигрышными комбинациями, чтобы определить, победил ли кто-то из игроков.

function checkWin() {
  const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  for (let i = 0; i < winningCombinations.length; i++) {
    const [a, b, c] = winningCombinations[i];
    if (board[a] !== "" && board[a] === board[b] && board[a] === board[c]) {
      winningCells = [a, b, c];
      return true;
    }
  }
  return false;
}

Сброс игры

Создайте функцию resetGame, которая возвращает состояние игры к исходным значениям. Эта функция вызывается при нажатии кнопки сброса: она очищает поле, сбрасывает текущего игрока, очищает массив выигрышных ячеек, обновляет индикатор хода и перерисовывает поле.

function resetGame() {
  board.fill("");
  currentPlayer = "X";
  gameEnded = false;
  winningCells = [];
  updateTurnIndicator();
  renderBoard();
}

Обновление счета игроков

Создайте функцию updateScore, которая обновляет счет игроков. Эта функция вызывается, когда игрок побеждает. Она увеличивает счет соответствующего игрока и обновляет отображение счета на странице.

function updateScore() {
  if (currentPlayer === "X") {
    playerXScore++;
    document.getElementById("player-x-score").textContent = playerXScore;
  } else {
    playerOScore++;
    document.getElementById("player-o-score").textContent = playerOScore;
  }
}

Обновление индикатора хода

Создайте функцию updateTurnIndicator, которая обновляет индикатор хода на странице, показывая, чей сейчас ход.

function updateTurnIndicator() {
  const turnIndicator = document.getElementById("turn-indicator");
  turnIndicator.textContent = `Current Turn: Player ${currentPlayer}`;
}

Подсветка выигрышных ячеек

Создайте функцию highlightWinningCells, которая добавляет класс подсветки к ячейкам, составившим выигрышную комбинацию. Эта функция вызывается при победе игрока.

function highlightWinningCells() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    if (winningCells.includes(index)) {
      cell.classList.add("highlight");
    }
  });
}

Отрисовка игрового поля

Создайте функцию renderBoard, которая обновляет игровое поле на странице в соответствии с текущим состоянием массива board. Эта функция вызывается после каждого хода игрока для обновления визуального представления.

function renderBoard() {
  const cells = document.querySelectorAll(".board-cell");
  cells.forEach((cell, index) => {
    cell.textContent = board[index];
    cell.classList.remove("highlight");
  });
}

Добавление обработчиков событий

Добавьте обработчики событий для ячеек игрового поля и кнопки сброса. Эти обработчики вызывают соответствующие функции при возникновении событий.

// Event listeners
const cells = document.querySelectorAll(".board-cell");
cells.forEach((cell, index) => {
  cell.addEventListener("click", () => handleCellClick(index));
});

const resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", resetGame);

Начальная отрисовка

В конце JavaScript-кода добавьте код для начальной отрисовки. Этот код задает начальное состояние игры, обновляет индикатор хода и отрисовывает игровое поле.

// Initial render
updateTurnIndicator();
renderBoard();

Запуск проекта

Теперь вы можете запустить проект и сыграть в «Крестики-нолики»!

Нажмите кнопку Go Live в правом нижнем углу WebIDE, чтобы запустить проект.

Кнопка Go Live в WebIDE

Это откроет проект на вкладке Web 8080.

Интерфейс вкладки Web 8080

Кликайте по ячейкам, чтобы делать ходы, и нажимайте кнопку сброса, чтобы начать новую игру.

Резюме

Поздравляем! Вы успешно создали игру «Крестики-нолики» с использованием HTML, CSS и JavaScript. В ходе проекта вы научились создавать HTML-файл, добавлять CSS-стили, реализовывать игровую логику и обрабатывать действия пользователя. Игра позволяет двум игрокам ходить по очереди, проверяет условия победы или ничьей, обновляет счет и подсвечивает выигрышные ячейки. Теперь вы можете запустить проект и насладиться игрой в «Крестики-нолики»!

Создание веб-приложения «Крестики-нолики»