Neon Snake
Eat the food, grow the trail, and avoid the walls. A grid-based Snake game.
Mechanic: Grid movement, collision detection, and a growing trail.
First edit: Change MOVE_INTERVAL_MS or GRID to adjust speed or board size.
Free HTML5 Canvas game source templates
These templates draw a logical 400 by 400 game board with the browser’s Canvas API. The canvas scales to the available display width while the rules keep their own coordinates. Buttons and status messages remain ordinary HTML outside the drawing surface.
Canvas is useful when many objects need to be redrawn together. It also means the visual objects are not automatically separate accessible controls. Each starter includes text instructions and status updates, but none supplies a full nonvisual version of the simulation. For a button-based board, use the puzzle templates instead.
Sky Hop adds a one-button flight game: tap the board, press Space, or use the up arrow to apply an upward impulse. Gravity and scrolling gates turn that simple input into a rhythm challenge. The source exposes the gap size, gravity, and hop impulse as separate settings.
Cosmic Breakout
Clear 28 bricks with a paddle and ball. Move the paddle to control each bounce.
Mechanic: Velocity, paddle control, and rectangle collisions.
First edit: Change the brick rows, paddle width, or bounce velocity to tune the challenge.
Orbit Dodge
Steer around falling asteroids. The longer you survive, the faster they fall.
Mechanic: Frame timing, spawning, and bounding-box collisions.
First edit: Tune obstacle speed and spawn interval separately; they affect reaction time and board density differently.
Sky Hop
Hop through the gaps, keep your rhythm, and see how many gates you can pass.
Mechanic: Gravity, impulse input, scrolling gates, and circle-box collision.
First edit: Change GAP, GRAVITY, and HOP one at a time. Keep the gap comfortably larger than the bird diameter, then test repeated hops and ceiling contact.
Keep simulation and display coordinates separate
Snake turns grid positions into pixel positions when drawing. Breakout and Orbit Dodge store positions directly in the logical board space. Pointer input is converted from the displayed canvas width back into those coordinates. If you change the board dimensions, update the input mapping and boundaries together rather than stretching only the visible image.
Questions
Are Canvas and HTML5 separate download formats?
No. Canvas is a browser drawing element inside the supplied HTML file. JavaScript updates and draws the game.
Where should I start with the animation loop?
Read the shared loop function, then the game-specific update and draw functions. Snake adds a grid-step accumulator; the other two move objects using elapsed seconds.
Continue with a related collection or guide, or browse all templates.