React-Tetris: классическая игра Тетрис на фреймворке React 92

React-Tetris — это классическая игра «Тетрис», разработанная на фреймворке React. Она использует компонентный подход к проектированию, поддерживает управление с клавиатуры и адаптируется под различные экраны. Игру можно как встраивать в React-приложения, так и использовать в качестве самостоятельного компонента.

Особенности React-Tetris

• Богатый технологический стек: React-Tetris использует React + Redux + Immutable. Благодаря компонентному подходу React игра разделена на несколько переиспользуемых компонентов, таких как HeldPiece, Gameboard, PieceQueue и других. Redux применяется для управления состоянием игры, обеспечивая его согласованность.

• Богатый функционал: подсчёт очков, количество убранных линий, управление состоянием игры, адаптация под экран, сохранение данных, а также управление с клавиатуры.

• Простая интеграция: разработчики могут быстро добавить эту игру «Тетрис» на React в любое React-приложение с помощью простых вызовов API и настроек.

Сценарии использования React-Tetris

• Образовательные приложения: может служить практическим проектом для обучения программированию, помогая студентам понять компоненты React и управление состоянием.

• Развлекательные приложения: добавление модуля казуальной игры на сайт или в мобильное приложение для повышения вовлечённости пользователей.

• Коммерческие презентации: встраивание react-tetris в демонстрацию продукта в качестве интерактивного элемента для привлечения внимания пользователей.

Преимущества проекта React-Tetris

• Чёткая структура кода: каждый игровой элемент React-Tetris оформлен в виде отдельного React-компонента, код структурирован, легко понимается и поддерживается.

• Высокая расширяемость: благодаря компонентному подходу React и управлению состоянием Redux легко расширять функциональность и настраивать игру.

• Кроссплатформенная поддержка: версия на базе фреймворка React Native также может работать на разных платформах.

Управление React-Tetris с клавиатуры

Как использовать React-Tetris?

Установка: установите react-tetris через npm

npm install --save react-tetris

Пример использования: импорт и использование в React-приложении

import React from 'react';
import Tetris from 'react-tetris';
const App = () => (
  <div>
    <h1>Тетрис</h1>
    <Tetris
      keyboardControls={{
        down: 'MOVE_DOWN',
        left: 'MOVE_LEFT',
        right: 'MOVE_RIGHT',
        space: 'HARD_DROP',
        z: 'FLIP_COUNTERCLOCKWISE',
        x: 'FLIP_CLOCKWISE',
        up: 'FLIP_CLOCKWISE',
        p: 'TOGGLE_PAUSE',
        c: 'HOLD',
        shift: 'HOLD'
      }}
    >
      {({
        HeldPiece,
        Gameboard,
        PieceQueue,
        points,
        linesCleared,
        state,
        controller
      }) => (
        <div>
          <HeldPiece />
          <div>
            <p>Очки: {points}</p>
            <p>Убрано линий: {linesCleared}</p>
          </div>
          <Gameboard />
          <PieceQueue />
          {state === 'LOST' && (
            <div>
              <h2>Игра окончена</h2>
              <button onClick={controller.restart}>Новая игра</button>
            </div>
          )}
        </div>
      )}
    </Tetris>
  </div>
);

🌍Адрес на Github:https://github.com/chvin/react-tetris