Email or username:

Password:

Forgot your password?
Adam Kuhn

A semi-playable Doom demo I built for #FrontEndConf using CSS scroll timeline, a handful of checkboxes and has() selectors + a nice assist from image-rendering: pixelated.

Oh and no JS, as god intended.

codepen.io/cobra_winfrey/full/

29 comments
JKB

@cobra_winfrey It's a bit sad that it only works in Chrome and disguised Chromes, though

Adam Kuhn

@jkb fully agree, but that's where we're at for scroll-timeline support at the moment- hopefully we see broader adoption soon!

Robb

@cobra_winfrey "Any application that can be written in CSS and HTML, will eventually be written in CSS and HTML"

Adam Kuhn

@Robb turns out the "C" in CSS stands for "can run Doom"

CM Harrington

@cobra_winfrey @Meyerweb ok, it’s early, and I was blown away by the feat of doing this, but I *just* got the pun. Bravo!!

melissa

@cobra_winfrey fun to see you demo this at FEDC. I was watching Game Changer S6 this weekend and there was a game that maneuvered so similarly. I’m convinced that if you didn’t build it then someone else forked your codepen 😂

Adam Kuhn

@melissat thanks so much for being there- I’ll have to check that out, maybe a fun challenge to recreate

Chris Coleman

@cobra_winfrey I'm going to get started porting this to Tailwind. See you in 20 or 30 years.

Seriously though, this is amazing work.

Hunterrules

@cobra_winfrey doom can run on anything peroid. Jokes aside this is insanity. Good job man

meduz'

@cobra_winfrey A colleague throwed the idea of writing a TAS (tool-assisted speedrun) in JS for it, so I did it:

`document.querySelectorAll('input').forEach(checkbox => checkbox.checked = true)`

meduz'

@cobra_winfrey

Fastest we could come up is this one, thou:

`level.querySelector('span:nth-of-type(6) input').checked = true`

(now back to work xD)

Go Up