Game Development

Build real games with JavaScript and the HTML canvas, starting from two games you can play right now.

This is hands on game development, not theory. Every idea here, the game loop, drawing on the canvas, handling input, detecting collisions, managing state, and networking for multiplayer, is shown in working code and demonstrated by a game you can play in your browser. Start by playing a demo, then read how it is built, piece by piece, and finally see what changes when a game goes networked. Everything uses plain browser APIs with no engine and no build step.

Playable demos

• Breakout (Solo) A complete single player Canvas game you can play, with the game loop, input, collision, and state all explained.
• Multiplayer Pong A two player, shared screen Canvas game, plus a clear look at how networked multiplayer would differ.
• 2048 (Powers of Two) A colorful powers-of-two puzzle built with the DOM and CSS, a different technique from the canvas arcade games.
• Combat Kart Racing (1 to 4P) A top-down combat racer for up to four local players, with weapons from mystery boxes, a lap circuit, and checkpoints.
• Signal Memory (1 to 2P) A colorful memory game with sound: watch the signal pattern, then repeat it. Play solo or duel a friend on one device.
• Snake: Data Packet (1 to 2P) The classic Snake reimagined as a growing data stream. Eat bytes, avoid crashing. Solo with a speed ramp, or a two stream duel.
• Bug Squash (1 to 2P) A fast reaction game: squash the red bugs, spare the green good code, beat the 30 second clock. Solo score attack or split screen duel.
• Packet Defense (Strategy) A tower defense: place Scanner and Firewall defenses to stop malicious packets reaching your server across eight waves.
• Stack Tower (Arcade) A timing stacker: drop falling blocks at the right moment to build the tallest tower. Play solo or race a second player in split-screen duel.
• Maze Runner (Puzzle) Navigate a freshly generated maze each game using DFS, collect data-node pickups, and beat your own best time.
• Memory Match (Puzzle) Flip cards to find matching pairs of code symbols. Clear all eight pairs solo or outscore a friend in a two player duel.
• Logic Flow (Puzzle) Toggle binary inputs through a chain of AND, OR, XOR, NAND and NOR gates to hit the target output. Endless levels.
• Light Cycles (Arcade) A Tron style duel: your cycle leaves a solid wall behind it. Force your rival to crash first. Play vs the computer or a friend.
• Four in a Row (Strategy) Drop discs and connect four in a line to win. Face a minimax computer opponent or a second player on one device.
• Asteroid Dodge (Arcade) Survive a field of falling asteroids that grows faster every few seconds. Touch, drag, or keyboard controls.

Build a game, step by step

• Game Loop Fundamentals The update and render cycle, requestAnimationFrame, and delta time for consistent speed.
• Canvas 2D Rendering The drawing context, shapes, images, text, and the clear and redraw pattern.
• Sprite Animation Spritesheets, drawing a single frame, and timing animation with delta time.
• Handling Game Input The input state pattern for smooth keyboard, mouse, and touch controls.
• Collision Detection Rectangle and circle overlap tests, responding to a hit, and keeping checks fast.
• Game State Management Menus, play, and game over as states, with a simple state machine.

Going multiplayer

• Multiplayer Game Netcode Authoritative servers, client prediction, and reconciliation for networked play.

Explore related learning