๐ŸŽฎ My First Browser Game โ€ข Episode 3 of 6 โ€ข See All Episodes
๐ŸŽฎ Episode 3 โ€ข Improver โ€ข Canvas Physics

Smash the Wall!
Browser Breakout

The canvas classic: mouse-driven paddle, spin physics, a glowing brick wall, lives and levels, plus canvas gradients and particle effects that make the browser version the prettiest one yet.

๐ŸŽฎ Ages 10+ ๐ŸŽฎ ~1.5 Hours ๐ŸŽฎ JavaScript โœ“ Free
๐ŸŽฎ Mouse control ? Bounce physics ๐ŸŽฎ Brick objects ? Particles ๐ŸŽฎ Canvas gradients ๐ŸŽฎ Lives & levels
โญ
0 XP
Level 1
๐Ÿ”ฅ0
Your Progress 0 / 6 steps
๐ŸŒ
How to run: Open the HTML file in your browser - double-click it or drag it into Chrome. In this build-along you write the code, then watch it come alive in the canvas on the right.
๐ŸฆŠ
Lumo says: every step adds one feature to the same game. Type a little, click Apply to Canvas, and test it straight away. There is no wrong answer you canโ€™t undo.

Build Breakout Step by Step

Each step adds a feature. Write the code, watch it come alive in the canvas.

Step 1 / 6
Move your mouse over the canvas to control the paddle