whatisgithub

What is react-tetris?

chvin/react-tetris — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

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

What do people build with it?

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.

What is it built with?

JavaScriptReactReduxImmutable.jsWeb Audio API

How does it compare?

chvin/react-tetrisfacebookarchive/react-360tuupola/lazyload
Stars8,7118,7118,729
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasymoderateeasy
Complexity2/53/51/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

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?

Frequently asked questions

What is react-tetris?

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.

What language is react-tetris written in?

Mainly JavaScript. The stack also includes JavaScript, React, Redux.

How hard is react-tetris to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is react-tetris for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.