CANVAS GAME DEVELOPMENT
Game Engineering &
Creative Coding Universe
Repair a weak jump, inspect a collision one frame at a time, and build a game someone else can play.
Focus the canvas to use arrow keys or WASD. Space jumps. Hold an on-screen control during play, or toggle it before stepping a paused frame.
Game rules
In the opening mission, jump at the first wall. Pause and inspect vertical velocity. Try changing jumpSpeed from 85 to 360, apply the rules, and test the same jump again.
Use numbers or JavaScript expressions. The game uses the evaluated rules object.
Frame inspector
Tilemap designer
Choose a tile and click a cell. Arrow keys move through the grid. Enter or Space paints the focused cell.
Map source
Pixel sprite studio
Edit the player’s 5 × 6 sprite. Pick a paint color, select a frame, and click a pixel or use the keyboard.
Learning library
Want to write the mechanics yourself? Build a JavaScript Canvas platformer step by step with editable examples and a playable preview.
Portfolio & export
Saved revisions
Weekly design challenge
Practice game engineering
Use a running Canvas game to study timing, collisions, animation and player feedback.
Browse interactive guides · JavaScript learning path