🎮 My First Browser Game • Episode 5 of 6 • See All Episodes
🎮 Episode 5 • Improver • Gravity & Collision

Build a Platformer!
JavaScript Platformer

A Mario-style platformer you build one step at a time: gravity, arrow-key movement, platforms, collectible coins, patrolling enemies, health and a scrolling camera. See the finished game first, then build yours.

🎮 Ages 11+ 🎮 ~1.5 Hours 🎮 JavaScript ✓ Free
🎮 Gravity 🎮 Jumping 🎮 Platform collision 🎮 Coins 🎮 Enemies 🎮 Camera
How this workshop works: every step is labelled with what you do. Configure means change a value, Modify code means complete the missing lines, and Write code means write the logic yourself. This workshop starts with Modify code and finishes with Write code, so you build up to writing JavaScript on your own.
⭐
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 platformer. Type a little, click Apply to Canvas, and test it straight away. There is no wrong answer you can't undo.

Build a Platformer Step by Step

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

Step 1 / 6
Use arrow keys to move and Up or Space to jump
📦
Prefer the written guide? The starter template is still here if you want it: Download the starter files.