WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2021 • Jun 30, 2021

Playing Games with CSS

Elad Shechter

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Building an arcade game using only CSS and HTML

Escaping the need for JavaScript by leveraging advanced styling rules and markup properties to drive application logic.

#2 about 2 min

Structuring game elements with Pug and Sass

Simplifying redundant markup by managing component states through preprocessor loops and variables.

#3 about 4 min

Drawing complex game graphics using CSS shapes

Constructing character designs entirely from fundamental position declarations, border constraints, and pseudo-elements.

#4 about 3 min

Generating dynamic CSS animations inside Sass loops

Staggering complex movement sequences natively by assigning mathematically offset variables and negative animation delays.

#5 about 2 min

Structuring interface layouts with separated HTML sections

Isolating logical visual frames with semantic section tags and default display hiding.

#6 about 3 min

Simulating boolean logic with hidden HTML checkbox inputs

Storing core game conditions locally by registering checked element states bound to isolated label triggers.

#7 about 3 min

Triggering view transitions with the CSS checked pseudo class

Enacting interface reveals sequentially across siblings using conditional checked CSS selector evaluations.

#8 about 5 min

Tracking game interactions and points with CSS counters

Registering destroyed targets and tallying visual values internally via CSS counter increments and content resets.

#9 about 3 min

Building a numerical game timer using animated string text

Stepping string content changes through sequenced keyframes to fake a descending countdown clock.

#10 about 4 min

Setting randomized spawn locations with Sass compilation variables

Supplying distinct layout coordinates programmatically via preprocessor math compilation functions to mimic random dispersion.

#11 about 3 min

Resetting game state via HTML forms and delayed keyframes

Wiping interactive memory banks globally using form reset types alongside trailing graphic delays to end sessions.

#12 about 3 min

Leveling up frontend skills through experimental passion projects

Broadening software adaptability and structural thinking by tackling abstract programming problems with core technologies.

#13 about 4 min

Structuring input architectures for permanent active states

Selecting input models logically based on required behavioral outcomes like permanently removing elements from the DOM.

#14 about 2 min

Optimizing framerate performance with translational CSS properties

Smoothing graphics output across mobile devices by minimizing positional repaints in favor of matrix translations.

#15 about 6 min

Differentiating preprocessor compilation limits from runtime browser APIs

Analyzing the processing limits of static stylesheet randomization compared to dynamic browser calculation engines.

Matching moments

3:49 min

Learning modern programming techniques through hackable web games

4:44 min

Exploring complex frontend experiments and retro game decompilation

Chris Heilmann +2 · LIVE

4:09 min

Leveraging CSS for complex system logic and state machines

Chris Heilmann +3 · LIVE

2:28 min

Generating joy through experimental browser games

Nolan Royalty · Coffee With Developers

10:08 min

Rendering a functional game engine using experimental CSS transformations

Chris Heilmann +2 · LIVE

2:36 min

Early programming experiences and discovering the web

David Heinemeier Hansson David Heinemeier Hansson +1 · Coffee With Developers

More from World Congress 2021

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
almost 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Data Science on Software Data thumbnail
48:10
about 5 years ago

Data Science on Software Data

Markus Harrer

The journey from developer to devops - what i've learnt along the way thumbnail
42:44
about 5 years ago

The journey from developer to devops - what i've learnt along the way

Liam Hurrel, Alireza Chegini

How Data is Shaping our Games thumbnail
43:30
about 5 years ago

How Data is Shaping our Games

Johanna Pirker

Cross platform Augmented Reality development with React Native thumbnail
40:50
about 5 years ago

Cross platform Augmented Reality development with React Native

Vladimir Novick

How to Build a Monetization Strategy Based on User's in-app Behavior thumbnail
38:59
about 5 years ago

How to Build a Monetization Strategy Based on User's in-app Behavior

Natalie Sieradzki

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Honey, look! I vibe-coded an OS!

Ian Smith

CTO, LYOS

Ian Smith
Open session

World Congress 2026 North America

Know Your Enemies: Live Exploit of a PHP Engine Security Breach

Alexandre Daubois

CTO of Les-Tilleuls.coop / Symfony Core Team / PHP & FrankenPHP Core Maintainer

Alexandre Daubois
Open session

World Congress 2026 North America

rm -rf: Horror Stories From Unsandboxed AI Agents (and How Docker Fixes This)

Rishab Kumar

Staff Developer Evangelist @ Twilio

Rishab Kumar
Open session

World Congress 2026 North America

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
1:01:17
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Niels Leenheer

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
59:11
LIVE • 5 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Justin Halsall, Christian Schaefer

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

Creating games to make the web fun again thumbnail
41:03
Coffee With Developers • over 1 year ago

Creating games to make the web fun again

Nolan Royalty

WeAreDevelopers LIVE - Yes, CSS Can Do That! thumbnail
1:04:00
LIVE • 5 months ago

WeAreDevelopers LIVE - Yes, CSS Can Do That!

Chris Heilmann, Daniel Cranney, Zoran Jambor

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw thumbnail
1:13:35
LIVE • over 1 year ago

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann, Daniel Cranney, Rowdy Rabouw

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.