A block-breaker game and how to present what you built
A block-breaker game is a few simple pieces. The ball has a position x and a speed dx, the number of pixels it moves in each step. On every step the game does x = x + dx. When the ball reaches the wall (x is 100 or more, or 0 or less), the speed is reversed with dx = -dx, so the ball bounces. The paddle is moved by the keys, left or right by a fixed number of pixels. The blocks are stored in an array: 1 means the block is still there, 0 means it was hit. When the ball hits block i, the game sets blocks[i] = 0 and adds 10 to the score. Everything repeats in the game loop: move the ball, check walls, paddle and blocks, draw the screen. The game is developed in small steps, one piece at a time, tested after each step. When you present your work, say what it is for, who will use it, what you made, what the AI helper did and what you checked yourself. Remember that long game code is easy to get wrong. Read the parts, run them, and keep only what you understand.
1let x = 80; 2let dx = 5; 3function step() { 4 x = x + dx; 5 if (x >= 100 || x <= 0) { 6 dx = -dx; 7 } 8}
| Step | x | dx |
|---|---|---|
| 1 | 85 | 5 |
| 2 | 90 | 5 |
| 3 | 95 | 5 |
| 4 | 100 | -5 |
| 5 | 95 | -5 |
| 6 | 90 | -5 |
| 7 | 85 | -5 |
1let blocks = [1, 1, 1, 1, 1]; 2let score = 0; 3function hit(i) { 4 if (blocks[i] === 1) { 5 blocks[i] = 0; 6 score = score + 10; 7 } 8}
| A | B | C | D | E | F | |
|---|---|---|---|---|---|---|
| 1 | A | B | C | D | E | |
| 2 | Row 1 | 1 | 1 | 0 | 1 | 1 |
| 3 | Row 2 | 1 | 0 | 1 | 1 | 0 |
On paper, trace the ball for the start x = 20, dx = -5, with a wall at 0. Write x and dx for the first six steps. Then write a five-sentence presentation of an invented project: its purpose, its user, what you made, what the helper did, and what you checked.