ok so before we start, quick heads up: this is not the kind of post you read and close. open a code editor and a browser right next to it. every section has working code, run it as you go. if you just read through without touching the keyboard, by tomorrow you’ll remember nothing. i genuinely promise. ...
Last time we ended with a static Pac-Man frame. Looked fine. Did nothing. Every time you refreshed the page it was the same, frozen moment. ...
Snake moved in discrete steps on a grid. Clean, predictable, easy to reason about. What we’re building now is different. Flappy Bird is continuous – the bird is constantly falling, velocity accumulates, and the pipes come at you from the right with no fixed grid to think in. ...
So far we’ve been drawing everything from scratch using shapes, paths and arcs. That works fine for simple games. But Pac-Man has a detailed maze, animated ghosts and sprite-based characters. Drawing all that by hand every frame is going to get tedious fast. ...
We’ve built four games. We know the loop, the physics, pixel data, tile maps. This final part doesn’t build a game – it goes sideways into something more visually interesting. We’re going to fake 3D on a 2D canvas using just math, and then we’re going to turn live webcam video into ASCII art in real time. ...