CSS as a Game Engine: Building Playful, Stateful Web Experiences Without JS
summary
Argues that HTML+CSS alone can act as a game engine by treating UI controls as state, using radio buttons as FSM and checkboxes for inventory, CSS counters for scoring and keyframe animations with negative delays to stagger mole appearances. Live build of a nine‑hole whack‑a‑mole uses 9 inputs, grid layout, :has selectors and CSS random() (works in Safari during demo; Chrome support pending). Demo runs but DOM bloat, accessibility and lack of true randomness remain real costs.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:17CSS beyond styling
- 3:03Browser as game engine
- 4:07Finite state machines
- 8:21Game states with inputs
- 10:08CSS selectors for logic
- 11:32Can CSS do Doom?
- 13:26Benefits of CSS games
- 13:48Live coding Whack-a-Mole
- 24:15Randomness limits in CSS
- 25:40Cross-browser randomness
