Пишем свою игру на React: Крестики-нолики

Создание игры на React — это не только увлекательный процесс, но и отличный способ глубже разобраться в работе с состоянием, обработчиками событий и рендерингом компонентов. В этой статье я расскажу, как создать простую игру «Крестики-нолики» с нуля, используя функциональные компоненты и React Hooks.

Идея игры

Мы создадим классическую игру «Крестики-нолики», где два игрока по очереди ставят крестики и нолики на игровом поле 3×3. Цель — составить ряд из трех одинаковых символов по горизонтали, вертикали или диагонали.

Настройка проекта

Создадим новый React-проект с помощью Create React App:

npx create-react-app react-tic-tac-toe
cd react-tic-tac-toe
npm start

Создание структуры приложения

Мы создадим следующие файлы:

/src
  /components
    Board.js
    Square.js
  App.js
  index.js

Создание компонентов

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

import React from 'react';

const Square = ({ value, onClick }) => {
  return <button className="square" onClick={onClick}>{value}</button>;
};

export default Square;

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

import React, { useState } from 'react';
import Square from './Square';

const Board = () => {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);

  const handleClick = (index) => {
    if (squares[index] || calculateWinner(squares)) return;
    const newSquares = squares.slice();
    newSquares[index] = isXNext ? 'X' : 'O';
    setSquares(newSquares);
    setIsXNext(!isXNext);
  };

  const handleRestart = () => {
    setSquares(Array(9).fill(null));
    setIsXNext(true);
  };

  const winner = calculateWinner(squares);

  return (
    <div>
      <h2>{winner ? `Победитель: ${winner}` : `Следующий ход: ${isXNext ? 'X' : 'O'}`}</h2>
      <div className="board-row">
        <Square value={squares[0]} onClick={() => handleClick(0)} />
        <Square value={squares[1]} onClick={() => handleClick(1)} />
        <Square value={squares[2]} onClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onClick={() => handleClick(3)} />
        <Square value={squares[4]} onClick={() => handleClick(4)} />
        <Square value={squares[5]} onClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onClick={() => handleClick(6)} />
        <Square value={squares[7]} onClick={() => handleClick(7)} />
        <Square value={squares[8]} onClick={() => handleClick(8)} />
      </div>
      <button onClick={handleRestart}>Перезапустить игру</button>
    </div>
  );
};

export default Board;

Основной компонент App

Теперь свяжем всё вместе в App.js.

import React from 'react';
import Board from './components/Board';

const App = () => {
  return (
    <div>
      <h1>Крестики-нолики на React</h1>
      <Board />
    </div>
  );
};

export default App;

Функция для проверки победителя

Добавим функцию calculateWinner, чтобы определять победителя.

const calculateWinner = (squares) => {
  const lines = [
    [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 [a, b, c] of lines) {
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
};

Улучшения и рефакторинг

— Добавим стилизацию.
— Улучшим интерфейс и добавим анимации.
— Реализуем локальное хранилище для сохранения состояния игры
— Добавим возможность играть против простого ИИ.

Заключение

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

Дополнительно можно улучшить проект, добавив систему учёта очков, расширив игровое поле или реализовав многопользовательский режим. Ещё одной интересной задачей может быть написание простого искусственного интеллекта, который станет вашим соперником.

Работа над таким проектом не только прокачает ваши навыки, но и научит лучше понимать архитектуру React-приложений. А главное — это весело и вдохновляет на создание новых интерактивных веб-приложений! Попробуйте свои силы, делитесь идеями и улучшениями, а если у вас есть интересные решения — пишите, будет интересно обсудить!