Playing Games with CSS

Can you build a complete game with scoring and timers using only CSS? Learn how hidden inputs and pseudo-classes can replace complex JavaScript logic.

#1about 4 minutes

Building a pure CSS game during the pandemic

The story behind creating the 'Coronavirus Invaders' game using only CSS and HTML to turn free time into a creative project.

#2about 3 minutes

Structuring and styling the virus creature

Learn how to structure the virus creature's HTML using Pug for repetition and style its components with basic CSS shapes and pseudo-elements.

#3about 5 minutes

Automating positioning and animation with Sass

Use a Sass `for` loop to programmatically position elements around a circle with `transform` and create staggered animations with negative `animation-delay`.

#4about 7 minutes

Managing game states with checkboxes and labels

Implement game navigation and popups without JavaScript by using hidden checkboxes as state flags, labels as buttons, and the `:checked` pseudo-class.

#5about 5 minutes

Implementing a score system with CSS counters

Create a functional scoring system by using radio inputs to register clicks on viruses and CSS counters to increment and display the score.

#6about 2 minutes

Creating a countdown timer by animating content

Build a countdown timer in pure CSS by animating the `content` property of pseudo-elements with a keyframe animation that cycles through numbers as strings.

#7about 3 minutes

Generating random values using the Sass random() function

Use the Sass `random()` function within a loop to generate varied keyframe animations at compile time, creating the effect of random movement for game elements.

#8about 2 minutes

Resetting the game and timing the game over screen

Learn how to reset the game state by wrapping it in a form and using an `input type='reset'`, and trigger a game over screen using `animation-delay`.

#9about 2 minutes

The importance of learning through personal projects

The key takeaway is that creating fun personal projects is the most effective way to learn new technologies and become a better developer.

#10about 6 minutes

Q&A on radio vs checkbox and performance

The speaker answers audience questions about the choice between radio and checkbox inputs for state, and how browser performance is managed with many animations.

#11about 5 minutes