Игра в крестики-нолики | 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/[email protected]/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* CSS стили для игры */
    </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">
        <!-- Клетки игрового поля -->
      </div>
      <div id="scoreboard" class="flex justify-between items-center mb-4">
        <!-- Очки игроков -->
      </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"
      >
        Сбросить игру
      </button>
    </div>

    <script>
      // JavaScript код для игровой логики
    </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>
  // Код игровой логики
</script>

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

Инициализируйте переменные игры

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

// Игровая логика
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(`Игрок ${currentPlayer} победил!`);
    gameEnded = true;
  } else if (board.every((cell) => cell !== "")) {
    alert("Ничья!");
    gameEnded = true;
  } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    updateTurnIndicator();
  }
}

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

Проверьте победу

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

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 = `Текущий ход: Игрок ${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");
  });
}

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

Добавьте слушатели событий

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

// Слушатели событий
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 добавьте код для первоначального отображения. Этот код настраивает начальное состояние игры, обновляет индикатор хода и отображает игровое поле.

// Первоначальное отображение
updateTurnIndicator();
renderBoard();

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

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

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

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

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

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

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

Резюме

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

Создайте веб-приложение для игры в крестики-нолики

Введение

👀 Предпросмотр

🎯 Задачи

🏆 Достижения

Создайте HTML-файл

Добавьте CSS стили

Добавьте код JavaScript для игровой логики

Инициализируйте переменные игры

Обработайте нажатие на клетку

Проверьте победу

Сбросьте игру

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

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

Подсветьте выигравшие клетки

Отобразите игровое поле

Добавьте слушатели событий

Первоначальное отображение

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

Резюме