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.

https://codepen.io/cobra_winfrey/full/oNOMRav

Doom Scroll - Front End Conf 2024 Demo

Pure CSS scrollable Doom....

@cobra_winfrey The only thing JS devs fear… is you.
@cobra_winfrey "Any application that can be written in CSS and HTML, will eventually be written in CSS and HTML"
@Robb turns out the "C" in CSS stands for "can run Doom"
@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 😂
@melissat thanks so much for being there- I’ll have to check that out, maybe a fun challenge to recreate

@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.

@Chris thanks a whole bunch Chris!
@cobra_winfrey whoa. Also, nice pun ☺️

@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 love it!

@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)