How to Create Pure CSS Games

on YouTube ↗29m

" summary

Builds a playable “Coronavirus Invaders” pure‑CSS game that actually works: 100 animated virus sprites driven by label+input (radio/checkbox) logic, Pug for HTML repetition and SASS for randomized positions/scales, a CSS counter that increments the score, a 99‑second CSS countdown using pseudo‑element animations, and a form reset button to restart. Live CodePen demos compile SASS to CSS and show the game running pure CSS score and countdown, no JavaScript used.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 2:00Corona Virus Invaders
3. 7:30Flags
4. 11:20Closing the Pop-Up
5. 17:46Create a Css Counter
6. 18:53Create a Pure Css Countdown
7. 21:38Random Values
8. 21:58How Can I Create Random Stuff in Css
9. 25:07Back to Main Menu Button

" related talks

• 30mHow to Create Pure CSS GamesElad Shechter · code.talks 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
• 34mLet’s Build a CSS GameUna Kravets · CSS Conf EU 2017
• 27mCSS as a Game Engine: Building Playful, Stateful Web Experiences Without JSAaron Krauss · Commit Your Code 2026
• 28mCSS Games and Drawings in the Real World: Useful or Just Fun?Giulia Cardieri · CSSConf Budapest 2019
• 17mHow I Learn To CSSChen Hui Jing · CSSConf.Asia 2016