Pixel Platformer Game: 3 Levels, Enemies & Checkpoints

A platformer is the classic proving ground for 2D game programming because a small game has to get several hard things right at once: gravity and collision against a tile map, enemies that can be stomped, a camera that follows the player through a level wider than the screen, and the many small touches that make a jump feel good. This snippet is a complete three-level pixel platformer on a single HTML5 <canvas>, with no libraries and no image files: the sprites are drawn from strings of characters, the sound is synthesised with the Web Audio API, and the levels are plain data. It plays with the arrow keys or A / D and Space, and with an on-screen ◀ ▶ D-pad and JUMP button on a phone.

Levels as data, tiles as a grid

Each level is an object listing ground stretches, one-way planks, brick blocks, spike runs, coins, walkers, bats, springs, checkpoints and the goal flag, all in tile coordinates. buildLevel() turns that into a two-dimensional grid of tile types, and everything else (collision, drawing, enemy edge detection) asks the grid with one function, tileAt(column, row). Adding a fourth level means adding one more object to the LEVELS array. The three included levels (Green Hills, Sunset Ridge and Midnight Run) change the colour theme, the sky, the parallax mountains and the difficulty, and the third adds a moon and stars.

Collision that resolves one axis at a time

The player moves horizontally first and is pushed out of any solid tile it overlaps, then moves vertically and is resolved the same way. Resolving one axis at a time is what stops a character from snagging on the seams between tiles. Planks are one-way: they only catch the player when falling and when the bottom edge was above the plank on the previous step, so you can jump up through a plank and land on it from above. Spikes use a hitbox smaller than their tile so near misses feel fair.

Game feel: coyote time, jump buffering and variable jump height

Three small rules separate a platformer that feels fair from one that feels stiff. *Coyote time* lets you still jump for a few frames after running off a ledge. *Jump buffering* remembers a jump press made a few frames before landing, so you never lose a jump by pressing slightly early. *Variable jump height* cuts the upward speed when you release the button, so a tap is a hop and holding the button is a full jump. Landing and jumping also squash and stretch the sprite, and dust, coin sparkles and a short screen shake give each action weight.

Enemies you can stomp

Mushroom walkers patrol the ground and turn around at walls and at the edge of a platform by checking the tile ahead and below them. Bats fly a sine-wave path. Both are defeated by landing on them from above, which bounces you up, and both cost a life if you touch them from the side, followed by a short blinking invulnerability so one mistake is not a chain of deaths. Springs launch you high, and checkpoint flags set where you restart after a fall or a spike.

A fixed timestep, a smooth camera and a synthesised soundtrack

The simulation advances in fixed 1/60-second steps drained from an accumulator, so jump height and run speed are identical on a 60Hz or a 144Hz display and fast falls cannot tunnel through thin planks. The camera eases toward the player with a little look-ahead and is clamped to the level. Sound effects (jump, coin, stomp, hurt, spring, checkpoint and a short win jingle) are generated with oscillators, with a mute button, and your best score is kept in localStorage.