HTML5 Canvas school

Build browser games with JavaScript, using real Supagames code.

This section is a practical workshop, not a glossary. Each lesson takes a working mechanic from Supagames, explains why it exists, then shows how to adapt it for your own game. You will see small arcade loops, mobile controls, collision checks, scoring, enemy behavior and bigger action-game patterns.

Start with Flying Bird Play the example

Why this guide is useful

Many browser game tutorials stop after drawing a rectangle. That is fine for the first five minutes, but real games need more: a loop that does not fight the browser, inputs that do not break forms, collision checks that are readable, pacing that a human can react to, and clear feedback when the player wins, loses or upgrades.

Supagames contains hundreds of small games and several longer handcrafted projects, so this guide uses the same patterns we use in production pages. The examples are intentionally small enough to understand, but not fake. Every technique below appears in playable games on the site.

For beginners

You can follow the lessons with plain HTML, CSS and JavaScript. No build tools are required for the early chapters.

For improving existing games

The debugging notes explain common mistakes we kept fixing: instant game overs, keyboard scroll, mobile buttons over the play area and enemies that only look alive.

For future big games

The later chapters show how to move from one-screen arcade mechanics into objectives, themed enemies, progression and longer sessions.

Lessons

01

Canvas Game Loop

Set up a canvas, separate update from render, compare fixed intervals with requestAnimationFrame and avoid browser scroll bugs.

 02

Flying Bird Breakdown

Gravity, flap input, pipe spawning, scoring, localStorage best score and simple rectangle-circle collision.

 03

Keyboard, Mouse and Touch

Build inputs that work on desktop and phone, while keeping comment forms and textareas usable.

 04

Collision Detection

Use bounding boxes, grid blocking, obstacle gaps and readable hitbox helpers instead of hidden magic numbers.

 05

Enemy AI and Objectives

Turn a static arena into a themed game with enemy roles, projectiles, objectives, bosses and progression.

 06

Procedural Levels

Use randomness without making unfair maps, add seedable generation and scale hazards gradually.

 07

Difficulty and Pacing

Balance timers, orders, enemy pressure and upgrades so humans can actually finish the game.

 08

Save and Load

Use localStorage safely for progress, best scores, settings, versioned saves and reset buttons.

 09

Performance Debugging

Measure frame time, cap expensive objects and prevent canvas games from melting the browser.

 10

Publishing Checklist

Prepare a game page with useful text, controls, canonical URLs, sitemap entries and QA checks.

 11

Audio Feedback

Add Web Audio sound effects, unlock audio on player input and save respectful mute settings.

 12

Dialogue and Quests

Build dialogue queues, quest objectives, story flags and callbacks that move a game forward.

 13

Platformer Feel

Tune acceleration, friction, coyote time, jump buffering, double jumps and platform collisions.

 14

Racing Physics

Make cars steer, accelerate, skid, boost and collide with readable arcade-style handling.

 15

Automated Testing

Use static checks, syntax checks and smoke tests to catch broken games before players do.

 16

Tile Maps

Build grid worlds, collision data, path tiles and tiny editor tools for faster level design.

 17

Pathfinding AI

Move enemies through grids with fixed paths, BFS, A-star ideas and readable debug overlays.

 18

Boss Fights

Design phases, telegraphed attacks, arena pressure and rewards that feel fair.

 19

Particles and Juice

Add particle bursts, floating text, trails and screen shake without hurting performance.

 20

HUD and Menus

Create readable health bars, upgrade panels, pause menus and objective UI for canvas games.

 21

Procedural Dungeons

Generate rooms, corridors, exits and encounters while validating that maps stay playable.

 22

Economy and Upgrades

Balance rewards, costs, upgrade effects and save data so purchases create real choices.

 23

Mobile-First Layout

Plan touch controls, joystick input, responsive canvas sizing and safe UI zones from the start.

 24

Phaser 2D Basics

Use scenes, sprites, input, generated textures and DOM HUDs when canvas games grow larger.

 25

Three.js 3D Basics

Create simple 3D browser games with scene, camera, renderer, meshes, lights and collision checks.

 26

Turn-Based Combat

Design actions, cooldowns, statuses, enemy intent, rewards and readable combat logs.

 27

Card Mechanics

Build decks, hands, discard piles, shuffling, card costs and effects that stay testable.

 28

Dialogue Trees

Add branching conversations with conditions, quest flags, rewards and validation checks.

 29

Stealth Mechanics

Use patrols, vision cones, suspicion meters, noise, hiding spots and alarm states.

 30

Crafting Systems

Model ingredients, recipes, inventory slots, discovery, item effects and save data.

 31

AdSense-Friendly Pages

Improve game page value with original content, stable ad zones, SEO structure and QA gates.

Recommended path

  1. Read the game loop lesson and make a blank canvas scene that updates every frame.
  2. Build a tiny one-button game like Flying Bird. Do not add menus until the core loop feels good.
  3. Add desktop and mobile input together, not as an afterthought.
  4. Write collision helpers early. They make later debugging much easier.
  5. When one mechanic works, add objectives and enemy roles so the game has a reason to continue.
  6. Use controlled randomness to create variety without making impossible levels.
  7. Tune difficulty with readable numbers: time, spawn interval, damage, rewards and recovery windows.
  8. Save only meaningful progress, then test loading old save versions before publishing.
  9. Run performance checks on the slowest scene, not only the empty first room.
  10. Publish with useful descriptions, clear controls, canonical URLs and a sitemap entry.
  11. Add audio only after the core interaction works, then keep volume and mute settings respectful.
  12. For longer games, store quests and dialogue as explicit state so progress never gets mysterious.
  13. When movement is the game, tune feel with coyote time, buffering, friction and readable feedback.
  14. Before pushing, run automated checks for page quality, script syntax and common gameplay regressions.
  15. Use tile maps once a game needs multiple rooms, paths, collision zones or reusable level data.
  16. Add pathfinding only where designed routes are not enough; debug paths visually while tuning AI.
  17. Turn major encounters into boss fights with clear phases, telegraphs and rewards.
  18. Polish important actions with particles, floating text and short screen shake, then cap effect counts.
  19. Design HUD, menus and mobile controls as part of the game, not as decorations after the fact.
  20. Move to Phaser when scenes, sprites, groups and input plumbing cost more than the framework adds.
  21. Use Three.js only when depth, camera movement and 3D readability truly improve the idea.
  22. For RPG or strategy games, make combat, cards, crafting and dialogue data-driven so they can be balanced.
  23. Before asking ads to support a page, make the page useful even if ads are blocked.

Good small games are usually not complicated. They are clear. The player understands the goal, the controls respond immediately, and every failure teaches something visible.