Post

Niels Leenheer
@html5test.com

DOOM fully rendered in CSS. Every surface is a <div> that has a background image, with a clipping path with 3D transforms applied. Of course CSS does not have a movable camera, so we rotate and translate the scene around the user.

Niels Leenheer
@html5test.com

No, I don’t think so. Most of the complexity is actually in JavaScript with parsing the WAD file and calculating the positions of each DOM element. I do want to offload some of those calculations to CSS now that we have Math functions. Just because we can.

Niels Leenheer
@html5test.com

Thanks! I've now also implemented the CSS math and it works flawlessly. I just feed in the player location from the game loop as CSS properties and the whole scene renders around it. All completely in CSS.

1 repost4 likes

Niels Leenheer
@html5test.com

And I do want to add @property for animating a head bob effect. I already use it for when the player drops of an edge. The player height is just a number set by a CSS custom property, but with @property I can give it a nice transition. And map cross fades using view transitions. Of course.