Игра «Крестики-нолики» | 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, чтобы запустить проект.

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

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

✨ Проверить решение и практиковаться

Резюме

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

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

Введение

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

🎯 Задачи

🏆 Достижения

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

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

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

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

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

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

Сброс игры

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

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

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

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

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

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

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

Резюме