Dodge the Blocks Game: Neon Stages, Lasers and Dash

Dodge the Blocks is a one-axis survival game: hazards fall from the top and you steer a hover-car left and right at the bottom to avoid them for as long as you can. This snippet turns that simple idea into a full game on one HTML5 <canvas>, with no libraries and no image files. It has a synthwave look (a striped sun, mountains and a scrolling perspective grid), new hazard types introduced stage by stage, a dash move, near-miss combos, collectible stars and three power-ups. It plays with the arrow keys or A and D, on-screen buttons, or by dragging on the game.

Stages that teach one hazard at a time

Every 20 seconds a new stage begins, announced with a banner, a 1.6-second breather with no spawns, and a bonus. Stage 1 is plain falling blocks; stage 2 adds zig-zag blocks that swing side to side as they fall; stage 3 adds walls that span the whole width except for one gap; stage 4 adds lasers that flash a dashed warning line for almost a second before firing a full-height beam; stage 5 and beyond mixes everything. Fall speed and spawn rate rise continuously, and the gaps in walls slowly narrow, so the difficulty keeps climbing between stage changes too.

Movement that feels responsive

With keys or buttons the car accelerates and glides to a stop instead of moving a fixed step per frame, and it tilts with its speed. Dragging on the canvas pulls the car toward your finger like a spring. The dash fires the car sideways at high speed for 0.18 seconds, during which it cannot be hit, which makes it the tool for squeezing through a closing wall gap or escaping a laser warning; it then needs 1.6 seconds to recharge, shown by a meter.

Near misses, stars and power-ups

While a hazard passes the car's row, the game tracks the smallest horizontal gap between them. If it was under 9 pixels when the hazard leaves, you get a "CLOSE!" bonus, and consecutive near misses within two seconds build a combo up to x5 that also multiplies stars. Stars are worth 50 points. Power-ups are a shield (absorbs one hit and destroys the hazard), slow motion (the world runs at half speed for five seconds but your car does not) and shrink (a smaller car for six seconds). The score is ten points per second survived plus all bonuses, and the best score is saved in localStorage.

Neon rendering

Hazards are drawn as dark slabs with a bright outline, a soft outer glow and a highlight strip, in a random colour from a neon palette. The backdrop is painted once into an off-screen canvas; the grid floor scrolls faster as the game speeds up, speed streaks fall through the scene, and particles use additive blending so engine sparks, dash trails and the crash explosion glow. Sound effects come from the Web Audio API, with a mute button, and the game pauses on P, a button or a tab switch.