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 Chris Heilmann +2 · LIVE

4:09 min

Leveraging CSS for complex system logic and state machines

Chris Heilmann 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 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
about 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

Related videos

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

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Niels Leenheer

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

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Justin Halsall, Christian Schaefer

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 5 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 • almost 2 years ago

Creating games to make the web fun again

Nolan Royalty

WeAreDevelopers LIVE - The Shape of SVG to Come! thumbnail
59:56
LIVE • 3 months ago

WeAreDevelopers LIVE - The Shape of SVG to Come!

Chris Heilmann, Daniel Cranney, Lionel Péramo

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

WeAreDevelopers LIVE - Yes, CSS Can Do That!

Chris Heilmann, Daniel Cranney, Zoran Jambor

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.