Handmade Web Games

(todo: the basic outline should answer "Why build games?" -> "Why build web games?" -> "Why build handmade web games?")

... (todo, intro & transitions)

You'll be expected to know some TypeScript or have basic programming experience.

Table of Contents (todo)

In brief, here's what is to come:

Chapter 1 introduces the tooling we'd recommend. tl;dr: TS + Vite with Bun as the runtime. If you already have a tooling setup that you prefer, feel free to skip this chapter. Chapter 1 is a follow-along guide aimed at anyone new to web development.

Chapter 2 is about drawing to an HTML Canvas element. It's a kitchen sink overview of all of the most common 2D APIs used in web games and animations. The goal is for you to see a broad variety of the APIs available rather than following along step-by-step.

Chapter 3 introduces game loops. Before you can start animating what's on the canvas, a primer on how to ensure playback is smooth and consistent across devices is needed. And although I think this background information is important theory for any game developer to understand, you can also just copy/paste the final game loop at the end of the chapter.

Chapter x builds on the game loops of the prior chapter and does a deep dive on animation. (Todo: might merge this with ch3.)

Chapter x: game state (Todo: state file with HMR, decide if this belongs with inputs chapter--if not, what example state to use?)

Chapter x: basic math and physics for 2d games (collisions, gravity, projectiles, orbits)

Chapter x: cameras and viewports (game area, world space -> screen space, screen shake)

Chapter x: inputs - mouse and keyboard

Chapter x: controllers and haptics

Chapter 9: audio

Chapter x: pixel art & sprites

Chapter x: techniques for game feel & juice

Chapter x: PWAs (make your game installable) / aka Offline mode

Chapter x: devtools

Chapter x: WebAssembly

Chapter x: WebGL & shaders

Chapter x: WebGPU

Chapter x: threads & background workers