Hacker News

by Ryan Harman

CSSQuake (cssquake.com)

321 points by msalsas 7 hours ago

jedberg 3 hours ago

This is an awesome achievement, but I can't help but notice that Quake ran smoother on my Pentium-133 PC in the 90s than it runs on my Mac M1 Pro...

poisonfountain 2 hours ago

This engine is not optimised for performance. It's using CSS, after all.

Insanity 2 hours ago

Yeah this is a case of “not the right tool for the job”.

It is awesome though.

jedberg an hour ago

Of course, but you'd think after 30 years the compute power should be enough to overcome any lack of optimization. It's a testament to the engineering that went into the original Quake engine.

culi an hour ago

jamal-kumar 18 minutes ago

For what it's worth it works like smooth butter under Chrome on an M2, on Safari it's clunky and seems to clip alot

to11mtm 34 minutes ago

Either you had a Voodoo on your P133 or whatever the M1 is doing is having a bad time...

On my 7945HX this is plenty fast.

DanielHB 2 hours ago

Wait, did Quack run on Pentium-133? I had a Pentium MMX 233mhz and I always assumed it didn't ran well so I never bother to get it.

bluedino 22 minutes ago

Bare minimum for it being playable was a 486DX4 100MHz or similar, but with the floating point Quake really wanted a Pentium

iamphilrae an hour ago

If you had a 3dfx card it would run silky smooth on a Pentium-120 (what I had at the time)! Quake 2 ran pretty well too if I recall.

UltraSane an hour ago

Quake ran well on my 100Mhz Pentium.

jedberg an hour ago

It must have, because that's what I had in 1996 and I played it.

lightedman an hour ago

Quake ran on a P75 with 8MB RAM in DOS mode. Not the best but it worked at 320x200.

jonplackett an hour ago

I think you’re missing the point

badsectoracula 3 hours ago

Impressive. I guess this isn't only the renderer made to use CSS but also a full recreation of the engine and logic right? My guess is because a bunch of things do not behave like the original game, e.g. some buttons need to be shot instead of touched to activate, some secret doors open by touching them instead of being shot, etc.

AzzieElbab 5 hours ago

Awesome! Harder to exit than vim.

pgt 12 minutes ago

In case you want to view the menu, press Tab. Click outside menu items to resume game.

deskamess 4 hours ago

how did you exit? because nothing seems to be working.

calgoo 4 hours ago

Back button worked for me

ChrisClark 3 hours ago

I pressed escape, then just closed the tab

axus 3 hours ago

I pressed Esc key, click quit. And then closed the browser tab.

jojogeo 4 hours ago

This is the first thing I've seen on the intertubes for a /long/ time which genuinely makes me smile, thank you op.

Checked out https://cssdoom.wtf/ and loved it too, both are far lighter than current affairs. \o/

remix2000 5 hours ago

It seems like this CSS Quake needs JS to run…

zamadatix 2 hours ago

CSS does the rendering, the game logic is TypeScript.

jacobgold 2 hours ago

No light theme though?

aggregator-ios 2 hours ago

Wow, this is impressive. 60FPS, MacBook Air M1. I was instantly hooked and so much nostalgia.

edwinjm 5 hours ago

Is this a rip from https://github.com/NielsLeenheer/cssDOOM

OuterVale 5 hours ago

Separate projects. Niels Leenheer who made CSS Doom has seen Agustin Capeletto's CSS Quake.

https://bsky.app/profile/html5test.com/post/3mok5febchs2g

pantelisk 26 minutes ago

And I think both have seen these much older handcrafted css3d engines

- https://pantel.is/projects/css3d/ - https://keithclark.co.uk/labs/css-fps/

but they took it to the next level :)

degamad 5 hours ago

The source appears to be <https://github.com/LayoutitStudio/cssQuake>

crimsonnoodle58 3 hours ago

Amazing and impressive use of CSS. But at the same time, makes me appreciate what feat Carmack achieved 30 years ago on early Pentiums.

boredemployee 2 hours ago

I still play quake (world) to this day. I just can't quit it.

divan 5 hours ago

As someone who passionately and ardiently hates prolifiration of this set of _hacks on top of hacks_ called CSS (and CSS/JS/HTML aka Web-stack), I must say this is good and valid use case for CSS. :)

gpderetta 5 hours ago

Nice, but the view keeps clipping out to far ahead of the map (but the character seems to still be in its original position as I can die from monsters). It snaps back in place when I shoot.

edit: both on chromium and firefox, desktop linux.

sgt 4 hours ago

Very cool. I wonder what the limitations are? I see the dog I shot is floating in the air. Is that maybe a CSS thing or is it fixable?

freakynit 4 hours ago

.dog { display: float; }

skvmb 3 hours ago

You win! I laughed way too hard at this. Boss man is now giving me the side eye.

stoobs 5 hours ago

Seems like you get stuck on corners and it really doesn't like running up/down slopes, neat though.

ChrisArchitect 4 hours ago

Show HN: from the dev (who's also in here, maybe a title update) https://news.ycombinator.com/item?id=48571117

ronbenton 2 hours ago

Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should

aruametello 18 minutes ago

Then Tresspasser CSS next

https://en.wikipedia.org/wiki/Trespasser_(video_game

jdw64 3 hours ago

I wish I could use CSS this well too

MattCruikshank 3 hours ago

Don't worry, OP still can't center a div.

qingcharles 2 hours ago

I was centering divs just fine, but now they took away Fable and I'm lost.

jdw64 2 hours ago

I think I've finally found something in common between OP and me

Vaslo 2 hours ago

But can it play Crysis?

criley2 5 hours ago

Really cool experiment. A lot of jank. It would sometimes rubber band me back, movement was grid aligned in a way that made accessing the secret room challenging, and the whole tab unexpectedly crashed with no error. 5 star would play again

iandanforth 3 hours ago

Crazy, such memories. Thanks!

Snoopfrogg 3 hours ago

This is dope.

kiyeonjeon 5 hours ago

how long does it take to develop this game?

zuzululu 2 hours ago

this is crazy i didn't know css could do this

alexb_ 4 hours ago

Doesn't work at all for me. I keep jumping around and clipping through objects, can't even leave the first room without being stuck in the doorway to the elevator.

ekaryotic 3 hours ago

have to shoot the elevator buttons in this, in the original you could move into them.

xenophonf 5 hours ago

Every time I click in the window, the menu disappears. I tried both Firefox and Chrome.

cynicalsecurity 3 hours ago

If this is what CSS has become, it means at some point its development went the wrong way.

senfiaj 3 hours ago

It still needs JS. It just avoids using canvas and does DOM manipulation + CSS instead.

Rohansi 3 hours ago

The game logic here is running in JS. Only the rendering is handled by HTML and CSS. Is it really wrong that you can do this? All it requires is 3D transformation of elements.

AndorinaAI 2 hours ago

lol that's crazy. Good job.

ikari_pl 4 hours ago

Wow, this will be a great project for the forever-upcoming VRML /s

buffer_overlord 6 hours ago

is there no sound?

amarant 6 hours ago

Is there a way to produce sound using CSS?

pwdisswordfishq 5 hours ago 

    @media speech {
        body {
            cue-before: url(/path/to/sound.ogg);
        }
    }
https://www.w3.org/TR/CSS2/aural.html

Waterluvian 5 hours ago

Only screams.

circadian 5 hours ago

rofko 5 hours ago

You should be able to enable sounds with the M shortcut or through the Options menu.

thenthenthen 5 hours ago

Wow