The Dirty Flag Pattern, Explained with Snake

See all that green? Every green cell is a part of the screen the browser just repainted. The snake moves about 6 times a second, but the board below gets repainted 60 times a second. Now switch to Dirty flag. The board goes calm. Only the cells the snake actually touched flash, and about 90% of the frames paint nothing at all. Same game. Same picture. A fraction of the work. The trick is one of the simplest patterns in game development: the dirty flag. Where I found it I’m building a Factorio-style game in the browser. While working on it, I read the Dirty Flag chapter from Robert Nystrom’s Game Programming Patterns. The book is free online and really good. The chapter explains the pattern with a pirate ship and a scene graph full of matrix math. In this post I want to explain it in the simplest way I can: with the Snake game above. The problem: two loops, two speeds A Snake game in the browser has two loops: The game loop moves the snake. A comfortable speed is one step every 150 ms,…