react-tetris

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.