Intermediate
-
Jumping
This tutorial switches from top-down to side-scrolling view. The hero moves left and right with arrow keys and jumps with spacebar. The jump mechanic is built on two properties: an initial upward velocity and a per-frame gravity that pulls the hero back down.
Loading editor…Jump Physics: Making It Feel Right
In this coordinate system, moving up means decreasing Y. Pressing spacebar sets
velocityYto a negative value like-15pixels per frame. Each frame after that, gravity incrementsvelocityYback toward positive (downward): -
Clouds
Cloud platforms are one-way surfaces: the player can jump through them from below, pass through them from the sides, but lands on top when falling. This tutorial adds that behaviour to the jumping system from the previous tutorial.
Loading editor…How Cloud Platforms Work
A solid tile blocks movement from every direction. A cloud tile applies collision only when the player is falling downward: the player can jump through from below, pass through from the sides, but lands on top when descending.
-
Ladders
Ladders let the player climb vertically through the level using the up and down arrow keys. While climbing, gravity is disabled and the player snaps to the ladder’s centre column. This tutorial adds that system on top of the jumping mechanics from the previous tutorials.
Loading editor…Ladder Types
There are four common ladder variants, and the choice affects level design possibilities:
-
Moving Tiles
Moving platforms appear in most platformers — the swinging platforms in Donkey Kong Country, the cloud lifts in Mario, the crumbling bridges in Crash Bandicoot. They transform a flat level into a dynamic obstacle that rewards timing. Here’s how to build them.
Loading editor…Before we start coding, let’s agree on the rules. Moving platforms in this tutorial work like cloud tiles - the hero can only land on them from above. Here’s what we need to handle:
-
Enemy on Platform
A basic wall-bouncing enemy will walk off platform edges and fall. A platform-aware enemy checks for ground ahead before stepping forward and turns back if there is none. This tutorial adds that edge-detection logic to enemy movement.
Loading editor…Random Direction Changes
A
turnChancepercentage applied each frame creates variation between enemy types without adding new AI logic: -
Shoot Him
Projectiles are a common interaction mechanic — the player fires in the direction they last moved, and bullets that reach an enemy remove it from the level. This tutorial adds a bullet system to the side-scrolling platformer from previous tutorials.
Loading editor…Bullet Data Structure
A bullet is a plain object with a position, a velocity, a size, and a sprite. The size matters because collision is AABB (axis-aligned bounding box), not circular distance — two rectangles overlap when neither axis is separated:
-
Keys to Move
Keyboard input in the browser works via two events:
keydownfires when a key is pressed,keyupfires when it’s released. Store the current state of each key in an object, then read that state each frame in the game loop.Loading editor…Character setup
The hero object from the previous tutorial, with direction and movement state added:
-
Bringing it Together
-
Hit the Wall
Collision detection prevents the hero from entering solid tiles. Before applying a movement, check whether the destination tile is walkable — if it isn’t, cancel the move.
Loading editor…The hero turns light red when a move is blocked and white when it moves freely.
-
Going Further
-
Getting Items
Collectibles are a staple of tile-based games — coins in Mario, rupees in Zelda, rings in Sonic. The pickup system needs to do three things: track what items exist and where, detect when the player steps on one, and remove it permanently so it doesn’t reappear.
Loading editor…Items are different in what they do - coins add a little to your score, gems are worth ten times more. That’s the same trick games use to reward you for exploring off the beaten path. In this tutorial all items just give points, but the same pattern works for health potions, ammo pickups, power-ups, or anything else you want to create!
-
Open the Door
A single room is a demo. A connected world — rooms that lead to other rooms — is a game. This tutorial adds a multi-room system: each room is a map stored in an object, and door tiles trigger transitions between them.
Loading editor…Walk into the yellow door tiles to move between rooms.
-
Locked Doors
A door you can walk through is a transition. A door you have to earn is a puzzle. Locked doors are one of the oldest tricks in game design — find the key, open the way forward. Let’s combine what you know about items and doors to build one.
Loading editor…The gold circle is the key. The red door on the right won’t let you through until you’ve picked it up — then it turns green and you can pass. Try walking into it without the key first.
-
Bringing it Together
Each tutorial in this series introduced one mechanic in isolation. Here they run together: gravity, cloud platforms, moving tiles, enemies with edge detection, projectiles, and a scrolling camera. The goal is not a polished game — it’s a working skeleton that demonstrates how the systems compose without fighting each other.
Loading editor…Controls: arrow keys to move, Space or Up to jump, Shift to shoot.
-
Pushing Tiles
Loading editor…Walk into an orange block and it slides one tile in the direction you were moving — but only if the tile behind it is empty. Walk it into a wall and it stops. Walk it into a corner and it’s stuck there permanently.
-
Going Further
The combined game from the previous tutorial is functional but raw. This page covers the extensions that separate a working prototype from a game that feels good to play. Each section is self-contained — add the ones that fit your design.
Variable Jump Height
Fixed-height jumping feels mechanical. In most platformers, releasing the jump button early cuts the jump short. This gives players fine control over arc height and makes jumping feel responsive rather than automatic.
-
Stupid Enemy
A wall-bouncing enemy is the simplest moving threat: each frame, advance by
moveX/moveY; if the next position hits a solid tile, reverse direction. That’s the entire AI.Loading editor…Why simple enemies work
Pac-Man’s ghosts use simple chase and scatter rules. Mario’s Goombas walk in straight lines. Space Invaders move in formation. None of these are complex behaviours, but all of them create spatial and timing challenges for the player.
-
A Living World
Every piece from this series in one place. A tile world with movement, collision, a patrolling enemy, a key to find, a pushable block, and a locked door to earn your way through.
Loading editor…Everything from the series is here:
-
Going further
Four rooms. One key. Everything from this series working together as a designed sequence.
Loading editor…Four rooms, each asking something different of you: