explaingit

chvin/react-tetris

8,711JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

Fully playable browser Tetris built with React, Redux, and Immutable.js, a learning reference showing how immutable state management works in a real-time game.

Mindmap

mindmap
  root((react-tetris))
    What it does
      Playable Tetris
      Learning reference
      Browser game
    Tech
      React
      Redux
      Immutable.js
      Web Audio API
    Features
      Keyboard controls
      Touch controls
      Local storage save
    Game settings
      Configurable speed
      Configurable fill
      Row clear scoring
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Study how React and Redux manage real-time game state, animation loops, and keyboard input in a working Tetris clone.

USE CASE 2

Use as a reference for applying Immutable.js in a Redux store to track game board state without in-place mutation.

USE CASE 3

Play a Tetris game in the browser with touch controls on mobile and progress saved across page refreshes via local storage.

Tech stack

JavaScriptReactReduxImmutable.jsWeb Audio API

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

This is a fully playable Tetris game built with React, Redux, and a library called Immutable.js. It runs in the browser and is presented as a learning project showing how these three tools can work together to build a classic game. The README is written in Chinese, so this summary draws on the available description, topics, and the technical details the README provides. Immutable.js is used to hold all of the game state, which includes the board grid and the current falling piece. The idea is that game data is never changed in place. Instead, every update produces a brand-new copy of the data, which makes it much easier to track what changed between each frame and to check whether components need to re-render. This approach is paired with Redux, a tool for keeping all application state in one central place and making it flow predictably. The game supports both keyboard controls on desktop and touch controls on mobile, so it adjusts to whichever device you are playing on. Game progress is saved to the browser's local storage, so a page refresh or crash does not lose your current board. Sound effects are produced through the Web Audio API, which allows more precise timing than a standard HTML audio tag would allow. Before the game starts, you can set an initial board fill level (up to ten levels) and a drop speed (up to six levels). Scoring follows a pattern where clearing more rows at once earns bonus points: one row gives 100 points, two gives 300, three gives 700, and four gives 1500. Drop speed increases automatically as you clear more rows over the course of the game. To run it locally, install with npm install and start with npm start. The game opens at http://127.0.0.1:8080/ in your browser.

Copy-paste prompts

Prompt 1
Walk me through how react-tetris uses Immutable.js to represent the game board grid and why that prevents mutation bugs in Redux reducers.
Prompt 2
Show me the Redux action and reducer in react-tetris that handles a completed row clear and updates the score.
Prompt 3
How does react-tetris handle keyboard and touch input simultaneously, and how would I change the default key bindings?
Prompt 4
How does the game use the Web Audio API for sound effects, and how would I swap in a different sound file?
Open on GitHub → Explain another repo

← chvin on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.