Let’s Build a CSS Game
summary
Live coding builds a working 3×3 high-five game rendered entirely in CSS and HTML using Sass maps and functions, box-shadow as a pixel renderer, CSS counters for score, CSS Grid for layout and keyframe animations for movement; nine character slots animate at randomized durations, an 8‑second timer reveals a game‑over overlay, and Gulp runs Sass and BrowserSync so the demo updates live — it compiles and plays in the browser as shown.
AI-written summary · about
chapters (24)
- 0:00Introduction
- 0:30Announcement
- 2:10Meet the Cast
- 3:17Pixel Art
- 4:55Box Shadow
- 7:05Shadow List
- 11:35Character SCSS
- 12:32Game Area
- 14:18Click Area
- 16:30Counter increment
- 17:40Decrement
- 18:39Character Wrapper
- 20:14Grid
- 21:17Area
- 22:05Margins
- 23:06Animations
- 24:16For loop
- 24:55Selector
- 25:43Stopper
- 26:21Stopper Animation
- 27:29Game Length
- 27:57Score
- 29:24Notifications
- 29:58Stop Animation
related talks
34mHow to Create Pure CSS Games
27mCSS as a Game Engine: Building Playful, Stateful Web Experiences Without JS
30mHow to Create Pure CSS Games
30mHow to create pure CSS games
29mHow to Create Pure CSS Games
28mCSS Games and Drawings in the Real World: Useful or Just Fun?
17mHow I Learn To CSS
33mHow to Create Pure CSS Games