How to Create Pure CSS Games

on YouTube ↗30m

" summary

A complete playable game is implemented using only HTML and CSS (with Sass and Pug to generate code): about 100 virus sprites move via CSS animations, remove themselves when their wrapped input radios are checked using label toggles and the :checked + sibling selector, score uses a CSS counter that increments on checked radios, countdown is two synchronized animations, animations are generated with Sass loops and Sass random() for variation, game reset uses a form reset button, and game over is timed by animation delay (99s).

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 3:09CSS game inspiration
3. 5:15Preprocessors for efficiency
4. 6:59Game frames in CSS
5. 8:44Checkbox actions
6. 10:51Dynamic frame display
7. 13:20Viruses disappearing with CSS
8. 15:47CSS score tracking
9. 19:00CSS countdown timer
10. 22:11Random values in CSS
11. 25:01Resetting game with CSS
12. 27:08Game over curtain
13. 28:12Fun projects matter

" related talks

• 29mHow to Create Pure CSS GamesElad Shechter · ConfrontJS 2022
• 30mHow to create pure CSS gamesElad Shechter · CSSCamp 2021
• 34mHow to Create Pure CSS GamesElad Shechter · DevDays Europe 2022
• 33mHow to Create Pure CSS GamesElad Shechter · AngularUP Experience 2020
• 27mCSS as a Game Engine: Building Playful, Stateful Web Experiences Without JSAaron Krauss · Commit Your Code 2026
• 34mLet’s Build a CSS GameUna Kravets · CSS Conf EU 2017
• 28mCSS Games and Drawings in the Real World: Useful or Just Fun?Giulia Cardieri · CSSConf Budapest 2019
• 04mFunctionality in CSSGregor Adams · dotCSS 2014