How NOT to build a video game
summary
Athena Crisis is a 2D turn‑based pixel‑art strategy game embedded in an MDX presentation, built with JavaScript, React, TypeScript, pnpm, Relay, emotion, Prisma and GraphQL, using persistent data structures to snapshot hundreds of game states and a top‑level CSS variable tick for synced sprite animation. Features include an in‑editor map maker, server‑enforced fog of war, terminal screenshot tests and an FPS meter; load time is under 100ms, typical render hits 60 FPS, AI goes from ~2000ms to ~37ms (~20–30× faster) after optimization.
AI-written summary · about
chapters (12)
- 0:00Building a retro strategy game
- 1:29Embedding games and tools
- 3:22Interactive map editor
- 4:43Testing with screenshots
- 6:29Frontend game development
- 9:20CSS styling and animations
- 11:53Fog of war implementation
- 14:34Mobile user experience
- 16:03Performance pitfalls
- 19:09Safari rendering limitations
- 21:10Optimizing UI filters
- 24:19Benchmarking and conclusion
related talks
28mHow Not to Build a Video Game
44mGames Development with Typescript and Canvas
26mdeveloping videogames in JavaScript
18mThink You Can Build a Game with AI? Think Again!
50mBuild Your Own Game Engine in the Browser
25mJavascript as Play A Primer on Getting Started with Video Games
26mThe Danger Crew: Lessons learned from building an RPG in React
04mBuilding a puzzle game in React/Redux