Collect every gold star, then enter E. Blue flag = checkpoint; red spikes and falls cost a life. Move: arrows or A/D. Jump: Space, W or Up. Escape pauses. Touch controls also support held Enter/Space; release and press again to jump again.
CANVAS GAME ACADEMY / FROM PIXELS TO PLAY
Draw a world.
Make it playable.
Learn Canvas rendering, animation, collision and game design in one hands-on academy. Build on the Skybound platformer, experiment with visual systems, and export a complete game you can modify.
✦✦✦••SKYBOUND / A GAME YOU CAN BUILD
0 / 50 lessons0 / 8 code challenges0 / 8 milestones
YOUR IDEA, IN MOTION
The workbench
PAINT YOUR NEXT ADVENTURE
Level designer
Click a tile, or Tab into the grid, move with arrow keys and paint with Enter. Start and exit move when placed again. Edits reset the run. The editor checks structure, not whether every jump is possible. On a small screen, scroll the grid sideways.
Inspect the level data
PREDICT → PLAY → COMPARE
Find your game’s signature jump.
Your current settings shape this predicted arc. Change the controls, look at the numbers, then test a real landing. Physics becomes a design tool when you can explain what changed.
Continuous-motion estimate: height = jump² / (2 × gravity); same-height airtime = 2 × jump / gravity. Ignores ceilings, collisions, the falling-speed cap and discrete update error. It is a planning aid, not a guarantee that a gap can be crossed.
FROM FIRST TILE TO FINISHED GAME
Your eight-stop build journey
Each milestone gives you an action, an explanation and an observable result. Milestones are self-reported practice; lesson and code checks are scored separately.
Your mission
READ THE RULE. REPAIR THE LOGIC.
Code that makes things happen.
Choose the missing JavaScript expression and run it against several inputs. These focused code puzzles teach the engine’s ideas; they do not modify the live engine. Download the source to make unrestricted code changes.
Explore the complete platformer engine
This is the same engine used by the workbench and exported game.
UNDERSTAND THE WHY, NOT JUST THE BUTTONS
50 lessons: from Canvas pixels to a finished game
New to Canvas? Start with lessons 31–40 in the Drawing lab, then 41–44 in Animation and 45–48 in Collision. Lessons 1–30 develop the playable platformer and game-design process; 49–50 connect architecture and release. Each lesson includes practice, a knowledge check and saved notes.
Make it concrete
A GOOD GAME GETS BETTER THROUGH TESTING
Observe. Improve. Ship.
Playtest notebook
Latest completed run: route & failures
Path samples cover up to the first two minutes of simulated play. Pink crosses mark deaths. This shows where events happened, not why.
PIXELS WITH A PLAN
Your Canvas rendering bench
Edit a JSON scene recipe and inspect the real Canvas JavaScript it generates. This is a constrained scene editor, not an arbitrary JavaScript executor. Coordinates are logical pixels in a 768 × 384 scene.
Click the canvas to inspect logical coordinates.
Recipe reference
Top-level: background color, translate [x,y], rotation in degrees, alpha from 0 to 1, and shapes (maximum 40). Shapes support rect (x,y,w,h), circle (x,y,r), and text (x,y,text,size); each has a color. Numbers are bounded to keep the scene manageable. The transform applies to the whole scene.
Use valid JSON with double quotes. A failed recipe leaves the last valid drawing visible. Your recipe is saved separately from the game backup; export it as HTML to keep a portable copy.
From data to Canvas calls
Four experiments
- Move the circle in front of the rectangle by reordering shapes.
- Translate the origin to [384,192] and rotate 30 degrees.
- Lower alpha to 0.5 and compare overlapping colors.
- Use smaller coordinates around the origin to build a reusable character.
The exported drawing includes the source and does not require the academy.
SEE WHAT THE ENGINE SEES
Collision is a question about geometry.
Strict AABB overlap: touching edges are not overlapping. The minimum translation is a geometric suggestion, not a complete velocity-aware platform response.
The tunneling experiment
A 20px body moves across a thin wall at x=300. Endpoint checks can miss a collision along the path.
overlap = a.x < b.x + b.w
&& a.x + a.w > b.x
&& a.y < b.y + b.h
&& a.y + a.h > b.y;More samples reduce risk but do not guarantee continuous collision detection for every size or speed. A swept test checks the traveled interval.
TIME, NOT JUST FRAMES
Give your pixels a sense of time.
The six-frame sheet is drawn locally, then sampled with drawImage. Replace it with an image asset using the same source-rectangle logic.
Same speed, different display rates
Compare a fixed 3px-per-frame update with a 180px-per-second update. This is an arithmetic experiment, not a measured refresh-rate benchmark. Fixed-step simulation and rendering frequency are separate decisions.
Practice
Predict the distance at 30 and 120 FPS. Change the dropdown to check. Then open the platformer source and find its accumulator loop.