Pixel Platformer Game — Free HTML CSS JS Snippet

A side-scrolling platformer is the classic proving ground for 2D game physics because it forces you to solve, in a small space, the three problems every action game shares: applying gravity every frame, resolving collisions so the character stands on solid ground instead of falling through it, and moving a camera that follows the player through a level larger than the screen. This snippet implements all three on a single HTML5 <canvas>, and controls the character with an on-screen ◀ ▶ D-pad and a JUMP button so it plays with a thumb on a phone as naturally as with the arrow keys.

A stable fixed-timestep loop

Platformer physics is sensitive to frame timing: a variable step can let a fast-moving character tunnel straight through a thin platform. To avoid that, the loop accumulates elapsed time and runs the physics update() in fixed 1/60-second steps, draining the accumulator with a while loop before each paint. Rendering still happens once per frame, but the simulation always advances in the same discrete increments, so jump height, run speed and collision behaviour are identical whether the display refreshes at 60Hz or 120Hz.

Gravity and one-way platform collision

Every step, gravity is added to the character's vertical velocity, the velocity is added to position, and then each platform is tested. The key detail is that platforms are *one-way from the top*: a landing only registers when the player is moving downward (vy >= 0) and their previous-frame bottom edge was at or above the platform surface. That single guard lets the character jump up *through* a floating platform and land on it coming down — the expected feel of a platformer — instead of being blocked from below. Horizontal movement uses acceleration toward a target speed with friction when no direction is held, so the character eases to a stop rather than snapping.

Jump as a discrete action, run as a held state

Run and jump are deliberately different input types. Left and right are *held states* — the D-pad buttons and arrow keys toggle keys.left/keys.right, read every step. Jump is a *discrete action* fired once on press: the JUMP button uses pointerdown (not a held flag) and only launches the character when onGround is true, which prevents mid-air double jumps and matches how a jump button should behave. Both control schemes call the same requestJump() function.

A camera that follows through a wide level

The level is far wider than the canvas. The camera's x-offset tracks the player's centre and is clamped to the level bounds so it never scrolls past the start or end, and the whole world is drawn through a single ctx.translate(-cam, 0). Parallax hills scroll at a fraction of the camera speed for depth. Coins, spikes and a goal flag complete the level: collecting coins updates a counter, touching a spike or falling off the world ends the run, and reaching the flag finishes the level and records the completion time to localStorage as a personal best.