> Markdown version of [/videos/210-playing-games-with-css?t=1888](https://www.wearedevelopers.com/videos/210-playing-games-with-css?t=1888). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Playing Games with CSS

During lockdown, one developer built a pure CSS arcade game without any JavaScript. Discover how to leverage checkbox hacks and CSS counters to master complex skills through play.

- **Speakers:** Elad Shechter
- **Event:** World Congress 2021
- **Published:** June 30, 2021
- **Duration:** 44:29
- **URL:** https://www.wearedevelopers.com/videos/210-playing-games-with-css

## Summary

When the 2020 pandemic locked down the world, the speaker turned isolation into an opportunity for creativity by building a pure CSS and HTML game—"Coronavirus Invaders"—without a single line of JavaScript. By treating the project as a playful experiment, the session demonstrates how to push the boundaries of standard web technologies to handle state, logic, and rendering autonomously. The overarching takeaway emphasizes that prioritizing personal passion projects and learning through play is one of the most effective ways for web developers to master complex programming concepts and accelerate career growth.

The technical architecture relies on chaining CSS and HTML pre-processors, specifically Sass and Pug, to dynamically generate markup and stylings through loops, saving developers from manually copying redundant code. The visual elements of the game are drawn entirely via CSS properties like `border-radius`, pseudo-elements (`::before` and `::after`), and sequential `transform` operations. Instead of JavaScript event listeners, state management relies on the classic "checkbox hack." By connecting visual `<label>` elements to hidden `<input type="checkbox">` and `<input type="radio">` tags, the `:checked` pseudo-class and sibling selectors work together to toggle navigation panes, register "hit" states, and trigger UI popups.

Several ingenious CSS tricks are used to drive the core game logic. Using negative CSS animation delays tricks the browser into beginning character movements at different points in their timeline, providing a sense of natural, continuous motion immediately upon page load. Real-time scoring relies entirely on CSS Counters (`counter-reset` and `counter-increment`), outputting the tallied values to the screen using the `content` property. Furthermore, the illusion of randomized enemy spawning locations is achieved by leveraging the Sass `random()` function at compile-time to output varied spatial constraints. Throwing all interactive elements inside a master `<form>` tag even allows a simple `<input type="reset">` button to clear all cached states and restart the game seamlessly.

**Keywords:** pure css games, css state management, checkbox hack pattern, sass pre-processor, pug html pre-processor, css without javascript, css counters scoring, negative animation delay, css pseudo-elements, sass compile-time randomness, html form input reset, frontend web development, interactive css logic, css string animations, creative coding projects

## Chapters

1. **Building an arcade game using only CSS and HTML** (01:12) — Escaping the need for JavaScript by leveraging advanced styling rules and markup properties to drive application logic.
1. **Structuring game elements with Pug and Sass** (03:57) — Simplifying redundant markup by managing component states through preprocessor loops and variables.
1. **Drawing complex game graphics using CSS shapes** (05:46) — Constructing character designs entirely from fundamental position declarations, border constraints, and pseudo-elements.
1. **Generating dynamic CSS animations inside Sass loops** (09:00) — Staggering complex movement sequences natively by assigning mathematically offset variables and negative animation delays.
1. **Structuring interface layouts with separated HTML sections** (11:52) — Isolating logical visual frames with semantic section tags and default display hiding.
1. **Simulating boolean logic with hidden HTML checkbox inputs** (13:52) — Storing core game conditions locally by registering checked element states bound to isolated label triggers.
1. **Triggering view transitions with the CSS checked pseudo class** (16:37) — Enacting interface reveals sequentially across siblings using conditional checked CSS selector evaluations.
1. **Tracking game interactions and points with CSS counters** (19:16) — Registering destroyed targets and tallying visual values internally via CSS counter increments and content resets.
1. **Building a numerical game timer using animated string text** (24:05) — Stepping string content changes through sequenced keyframes to fake a descending countdown clock.
1. **Setting randomized spawn locations with Sass compilation variables** (26:16) — Supplying distinct layout coordinates programmatically via preprocessor math compilation functions to mimic random dispersion.
1. **Resetting game state via HTML forms and delayed keyframes** (29:26) — Wiping interactive memory banks globally using form reset types alongside trailing graphic delays to end sessions.
1. **Leveling up frontend skills through experimental passion projects** (31:28) — Broadening software adaptability and structural thinking by tackling abstract programming problems with core technologies.
1. **Structuring input architectures for permanent active states** (33:41) — Selecting input models logically based on required behavioral outcomes like permanently removing elements from the DOM.
1. **Optimizing framerate performance with translational CSS properties** (37:34) — Smoothing graphics output across mobile devices by minimizing positional repaints in favor of matrix translations.
1. **Differentiating preprocessor compilation limits from runtime browser APIs** (39:24) — Analyzing the processing limits of static stylesheet randomization compared to dynamic browser calculation engines.

## Related Moments

- [Learning modern programming techniques through hackable web games](https://www.wearedevelopers.com/videos/1309-wearedevelopers-live-the-weekly-developer-show-with-chris-heilmann-and-daniel-cranney) (from "WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney")
- [Exploring complex frontend experiments and retro game decompilation](https://www.wearedevelopers.com/videos/1742-wearedevelopers-live-inclusion-accessibility-automation) (from "WeAreDevelopers LIVE – Inclusion, Accessibility & Automation")
- [Leveraging CSS for complex system logic and state machines](https://www.wearedevelopers.com/videos/1838-wearedevelopers-live-css-is-doomed) (from "WeAreDevelopers LIVE - CSS is DOOMed")
- [Generating joy through experimental browser games](https://www.wearedevelopers.com/videos/1237-creating-games-to-make-the-web-fun-again) (from "Creating games to make the web fun again")
- [Rendering a functional game engine using experimental CSS transformations](https://www.wearedevelopers.com/videos/1851-wearedevelopers-live-css-is-doomed) (from "WeAreDevelopers LIVE - CSS is DOOMed")
- [Early programming experiences and discovering the web](https://www.wearedevelopers.com/videos/875-coffee-with-developers-david-heinemeier-hansson) (from "Coffee with Developers: David Heinemeier Hansson")

## Related Articles

- [Building a "shoutout" component in plain HTML/CSS/JavaScript](https://www.wearedevelopers.com/magazine/556-building-a-shoutout-component-in-plain-html-css-javascript)
- [Dev Digest 104 - Fight for your right to 3rd party](https://www.wearedevelopers.com/magazine/390-dev-digest-104-fight-for-your-right-to-3rd-party)
- [Dev Digest 130 - The Diablo is in the details](https://www.wearedevelopers.com/magazine/470-dev-digest-130-the-diablo-is-in-the-details)
- [Dev Digest 124 - None like it hot](https://www.wearedevelopers.com/magazine/460-dev-digest-124-none-like-it-hot)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**