BlockFall: A Minimalist Tetris Clone
Overview
This project is a minimalist twist on the classic Tetris game. I used an AI assistant (Claude) to generate the necessary code for a simple, browser-based game where every falling “piece” is a single block instead of the usual four-block tetromino.
The primary purposes of this app are:
- To create a playable browser game using vanilla HTML, CSS, and JavaScript.
- To explore minimalist game design by simplifying the core mechanic of a well-known classic.
- To practice deploying a modern web application through Vercel.
Live Product Demo
Technical Details
Framework/Stack: Vanilla HTML, CSS, and JavaScript.
Deployment: Vercel (from a GitHub repository).
Tools Used: - Claude: Used for AI-assisted code generation and debugging. - Visual Studio Code: Primary code editor. - Git & GitHub: For version control.
Product Requirements Document (PRD)
This is the PRD provided to the AI assistant to generate the game’s code.
1. Core Concept
A game like Tetris, but simplified. Instead of complex, multi-part shapes (tetrominoes), every piece that falls from the top of the screen is a single square block.
2. Gameplay Mechanics
- A single block appears at the top-center of the game board and falls downwards.
- The user can move the falling block left or right using the arrow keys.
- The user can press the down arrow key to make the block fall faster.
- When a block lands on the bottom of the board or on top of another block, it stops, and a new block begins to fall from the top.
- When a horizontal row is completely filled with blocks, that row is cleared, and all blocks above it move down one row.
- The game ends when the stack of blocks reaches the top of the board.
3. User Interface
- The game will be played on a simple grid (e.g., 10 blocks wide by 20 blocks high).
- The user’s score should be displayed on the screen. The score increases every time a line is cleared.
- A “Start Game” button is needed to begin play.