I built a falling-block game to understand HTML5 canvas through a compact set of rules: grid, collision, scoring, input, and time.
← MOVE LEFT→ MOVE RIGHT↓ DROPS ROTATE CWA ROTATE CCW
[ 01 / THE EXERCISE ]
A useful constraint.
The game fits inside a 10 × 20 grid. Each of the seven pieces is a small two-dimensional array. The board stores the pieces that have landed, while the active piece moves through the same coordinate system.
Every frame draws the board, tests the next move for a collision, and either advances the piece or locks it in place. Completed rows are removed, the score increases, and later levels shorten the interval between drops.
INPUT→MOVE→COLLISION→LOCK→CLEAR→DRAW
It was a small project with a useful lesson: a few explicit rules can produce movement, difficulty, and play without a large framework.