chvin/react-tetris
React Tetris
This is a browser-based Tetris game built with React, using Redux and Immutable.js to manage all game state in a single immutable store. The application renders the game board, next-block preview, and score display as React components, with state transitions that are predictable and support time-travel debugging through the Redux DevTools Extension.
The game distinguishes itself through several integrated capabilities. It automatically adapts between keyboard and touch controls based on the user's input device, with configurable repeat rates for responsive gameplay. A persistence layer serialises the full Redux state tree to localStorage, restoring progress on page reload for session continuity. The game also pauses its loop when the browser tab loses focus and resumes on regaining visibility, and plays precise audio cues using the Web Audio API from a single MP3 file.
Additional capabilities include a next-block preview, score and level tracking, and the ability to toggle sound and pause at any time. The interface language can be switched by reading a URL query parameter, with translations defined in a bundled JSON file.
Features
- Puzzle Games - Plays the classic block-stacking puzzle in a web browser with keyboard and touch controls, scoring, and increasing difficulty levels.
- Game Implementations - A classic block-stacking puzzle game implemented as a single-page React application with keyboard and touch support.
- Immutable Data Structures - Uses Immutable.js persistent data structures to prevent accidental mutation and simplify state comparison.
- Game State Persistence - Saves and restores the full game state across browser sessions using localStorage to prevent progress loss.
- LocalStorage Persistence - Serialises the full Redux state tree to localStorage, restoring progress on page reload for session continuity.
- Game Keyboard Controls - Uses keyboard keys to rotate, move, drop, and reset blocks during gameplay.
- Falling Block Puzzles - Controls a falling block puzzle game where players rotate and position shapes to complete horizontal lines.
- Role-Play Gameplay Mechanics - Renders the classic block-stacking puzzle with keyboard and touch controls, scoring, and increasing speed levels.
- Save Game Initialization - Saves the full game state to localStorage so progress is restored after a page refresh, crash, or phone call.
- Score Tracking Systems - Tracks and displays current score, cleared lines, and level progression during gameplay.
- Predictable State Containers - Manages all game state in a single immutable Redux store for predictable state transitions and time-travel debugging.
- Game State Stores - Manages all game state in a single immutable Redux store with Immutable.js for predictable transitions.
- Cross-Device Input Handlers - Switches between keyboard and touch controls automatically based on the user's input device for seamless gameplay.
- Keyboard and Touch Adapters - Automatically switches between keyboard and touch controls based on device detection with configurable repeat rates.
- Component-Based Rendering - Renders the game board, next-block preview, and score as React components driven by Redux state.
- Device-Aware Input Switching - Automatically switches between keyboard and touch controls based on the user's input device.
- Game Audio and Pause Toggles - Provides in-game buttons to mute audio and pause or resume the game at any time.
- Browser Local Storage Saves - Saves and restores full game state to localStorage so progress persists across page reloads.
- Web Game Audio Engines - Plays precise audio cues using the Web Audio API from a single MP3 file during gameplay.
- Web Audio API Sound Engines - Plays precise, high-frequency audio cues using the Web Audio API for real-time game feedback.
- Sound Effects Playback - Uses the Web Audio API to play precise, rapid audio cues from a single MP3 file during gameplay.
- Redux Store Inspection - Exposes the entire game state to the Redux DevTools Extension for debugging and inspection.
- Game Block Previews - Shows the upcoming block in a dedicated area so the player can plan placements ahead of time.
- Automatic Device Detection - Switches between keyboard input on desktop and touch input on mobile automatically.
