React-Tetris: React 프레임워크로 만든 클래식 테트리스 게임 88

React-Tetris 는 React 프레임워크로 개발된 클래식 테트리스 게임입니다. 컴포넌트 기반 설계를 사용하며 키보드로 조작할 수 있고 다양한 화면에 맞게 대응할 수 있어, React 애플리케이션에 임베드하여 사용할 수도 있고 독립적인 컴포넌트로 사용할 수도 있습니다.

React-Tetris 특징

• 풍부한 기술 스택: React-Tetris는 React + Redux + Immutable을 사용합니다. React의 컴포넌트 기반 설계를 활용하여 게임을 여러 재사용 가능한 컴포넌트(HeldPiece, Gameboard, PieceQueue 등)로 나눕니다. Redux는 게임 상태를 관리하여 상태의 일관성을 보장합니다.

• 완벽한 기능: 점수 계산, 라인 제거, 게임 상태 관리, 화면 적응, 데이터 저장, 키보드 조작을 지원합니다.

• 손쉬운 통합: 개발자는 간단한 API 호출과 설정만으로 이 React-Tetris 테트리스 게임을 어떤 React 애플리케이션에든 빠르게 추가할 수 있습니다.

React-Tetris 활용 시나리오

프로그래밍

교육: React 컴포넌트와 상태 관리에 대한 학생들의 이해를 돕기 위한 프로그래밍 교육 실습 프로젝트로 활용할 수 있습니다.

• 엔터테인먼트 애플리케이션: 웹사이트나 모바일 애플리케이션에 캐주얼 게임 모듈을 추가하여 사용자 참여도를 높일 수 있습니다.

• 상업적 전시: 제품 전시에서 react-tetris를 임베드하여 사용자의 관심을 끄는 대화형 전시 방식으로 활용할 수 있습니다.

React-Tetris 프로젝트 장점

• 명확한 코드 구조: React-Tetris는 각 게임 요소를 독립적인 React 컴포넌트로 만들어 코드 구조가 명확하여 이해와 유지보수가 용이합니다.

• 강력한 확장성: React의 컴포넌트화와 Redux의 상태 관리에 기반하여 기능 확장 및 커스터마이징이 편리합니다.

• 크로스 플랫폼 지원: React Native 프레임워크를 기반으로 제작된 버전은 크로스 플랫폼으로 실행할 수도 있습니다.

React-Tetris 키보드 조작 방법

조작	키보드 키	기능 설명
왼쪽으로 이동	왼쪽 화살표 키	현재 블록을 왼쪽으로 한 칸 이동
오른쪽으로 이동	오른쪽 화살표 키	현재 블록을 오른쪽으로 한 칸 이동
블록 회전 (시계 방향)	위쪽 화살표 키 또는 X 키	현재 블록을 시계 방향으로 90도 회전
블록 회전 (반시계 방향)	Z 키	현재 블록을 반시계 방향으로 90도 회전
낙하 속도 증가	아래쪽 화살표 키	현재 블록의 낙하 속도를 빠르게 함
즉시 낙하	스페이스바	현재 블록을 즉시 맨 아래로 떨어뜨림
일시 정지 / 계속하기	P 키	게임을 일시 정지하거나 계속 진행
블록 보관	C 키 또는 Shift 키	현재 블록을 보관 영역에 저장하여 이후에 사용

React-Tetris 사용 방법

설치: npm을 통해 react-tetris 설치

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