React-Tetris: ein klassisches Tetris-Spiel, entwickelt mit dem React-Framework 89

React-Tetris ist ein klassisches Tetris-Spiel, das mit dem React-Framework entwickelt wurde. Es verwendet ein komponentenbasiertes Design, lässt sich über die Tastatur steuern, passt sich an verschiedene Bildschirme an und kann sowohl in React-Anwendungen eingebettet als auch als eigenständige Komponente verwendet werden.

Funktionen von React-Tetris

• Umfangreicher Tech-Stack: React-Tetris verwendet React + Redux + Immutable. Mit dem komponentenbasierten Ansatz von React wird das Spiel in mehrere wiederverwendbare Komponenten aufgeteilt, wie z. B. HeldPiece, Gameboard, PieceQueue usw. Redux wird zur Verwaltung des Spielzustands verwendet und gewährleistet so die Konsistenz der Zustände.

• Umfassende Funktionen: Es kann Punkte zählen, Reihen löschen, den Spielzustand verwalten, sich an Bildschirme anpassen, Daten speichern und lässt sich auch über die Tastatur steuern.

• Einfache Integration: Entwickler können dieses React-Tetris-Spiel durch einfache API-Aufrufe und Konfigurationen schnell in jede beliebige React-Anwendung integrieren.

Anwendungsszenarien für React-Tetris

• Bildungsanwendungen: Es kann als Praxisprojekt für den Programmierunterricht dienen und Schülern helfen, React-Komponenten und State-Management zu verstehen.

• Unterhaltungsanwendungen: Fügt Websites oder mobilen Apps ein Casual-Game-Modul hinzu, um die Nutzerbindung zu erhöhen.

• Kommerzielle Präsentation: Eingebettetes react-tetris in Produktpräsentationen als interaktive Präsentationsform, um die Aufmerksamkeit der Nutzer zu gewinnen.

Projektvorteile von React-Tetris

• Klare Code-Struktur: Jedes Spielelement in React-Tetris ist als eigenständige React-Komponente umgesetzt, die Code-Struktur ist übersichtlich und leicht zu verstehen und zu warten.

• Hohe Erweiterbarkeit: Durch die Komponentenweise Struktur von React und das State-Management von Redux lassen sich Funktionen einfach erweitern und anpassen.

• Plattformübergreifende Unterstützung: Die Version, die auf dem React-Native-Framework basiert, kann außerdem plattformübergreifend ausgeführt werden.

Wie bedient man React-Tetris mit der Tastatur?

Wie verwendet man React-Tetris?

Installation: Installation von react-tetris über npm

npm install --save react-tetris

Anwendungsbeispiel: Einbinden und Verwenden in einer React-Anwendung

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-Adresse:https://github.com/chvin/react-tetris