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...
Err, strange, what browser? I'm using Firefox on a ThinkPad from 2018 running Linux, and cssquake was running at a smooth 60fps just now (and at 1080p resolution vs the 320x240 or 320x200 someone would likely be running on a P133)
This engine is not optimised for performance. It's using CSS, after all.
Yeah this is a case of “not the right tool for the job”.<p>It is awesome though.
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.
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
Zero issues on Firefox + Linux. Gnome Web is stuttery and weird, though. Must be a WebKit/Safari thing.
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.
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.
Bare minimum for it being playable was a 486DX4 100MHz or similar, but with the floating point Quake really wanted a Pentium
I ran it on a Pentium 60. If you stuck to 320x200 it ran fine.
I played quake in 486dx100.
Quake ran on a P75 with 8MB RAM in DOS mode. Not the best but it worked at 320x200.
It must have, because that's what I had in 1996 and I played it.
Ran fine on my Pentium 90 with 16MB RAM
Quake ran well on my 100Mhz Pentium.
Either you had a Voodoo on your P133 or whatever the M1 is doing is having a bad time...<p>On my 7945HX this is plenty fast.
Quake compiled in C will run insanely fast at 8K full resolution on an M1.
I think you’re missing the point
Awesome! Harder to exit than vim.
In case you want to view the menu, press Tab. Click outside menu items to resume game.
how did you exit? because nothing seems to be working.
Back button worked for me
I pressed escape, then just closed the tab
I pressed Esc key, click quit. And then closed the browser tab.
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.
Hi there! Thanks for the report, buttons should work properly now.<p>Regarding the game logic, the build step has a small JS extractor over QuakeC/progs.dat to generate JSON source facts: states, models, attacks, sounds, etc. The browser runtime is TypeScript and consumes those for Quake-ish gameplay.
No it’s just the renderer. The game itself is Typescript.
This is the first thing I've seen on the intertubes for a /long/ time which genuinely makes me smile, thank you op.<p>Checked out <a href="https://cssdoom.wtf/" rel="nofollow">https://cssdoom.wtf/</a> and loved it too, both are far lighter than current affairs. \o/
It seems like this CSS Quake needs JS to run…
Maybe possible with <a href="https://lyra.horse/x86css/" rel="nofollow">https://lyra.horse/x86css/</a> ?
CSS does the rendering, the game logic is TypeScript.
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. :)
Is this a rip from
<a href="https://github.com/NielsLeenheer/cssDOOM" rel="nofollow">https://github.com/NielsLeenheer/cssDOOM</a>
Separate projects. Niels Leenheer who made CSS Doom has seen Agustin Capeletto's CSS Quake.<p><a href="https://bsky.app/profile/html5test.com/post/3mok5febchs2g" rel="nofollow">https://bsky.app/profile/html5test.com/post/3mok5febchs2g</a>
The source appears to be <<a href="https://github.com/LayoutitStudio/cssQuake" rel="nofollow">https://github.com/LayoutitStudio/cssQuake</a>>
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?
Though this is impressive, I think this is something that should not be possible with a declarative styling language
Wow this is really awesome. Really really smooth. It's insane how after 25 years or so my muscle memory is still intact.
No light theme though?
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.<p>edit: both on chromium and firefox, desktop linux.
Amazing and impressive use of CSS. But at the same time, makes me appreciate what feat Carmack achieved 30 years ago on early Pentiums.
Wow, this is impressive. 60FPS, MacBook Air M1. I was instantly hooked and so much nostalgia.
I noticed my cursor was continuously sliding upward first in Neal.fun's latest canvas multiplayer game and I experienced it here as well. Anyone else see this behavior?<p>And maybe a skill issue but I was unable to jump out of the slime...
I wish I could use CSS this well too
Seems like you get stuck on corners and it really doesn't like running up/down slopes, neat though.
I still play quake (world) to this day. I just can't quit it.
Hell yeah, I still see it as the optimal arena FPS. The sequels add too much IMO. Quake 1 (QuakeWorld) was such a raw competitive arena shooter that is just pure action, no weird extra mechanics. Pick up items, get some health, shoot people. Q2/Q3 are totally fine too, but I feel like QW really just nailed everything.
Really impressive
Show HN: from the dev (who's also in here, maybe a title update) <a href="https://news.ycombinator.com/item?id=48571117">https://news.ycombinator.com/item?id=48571117</a>
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
Has science gone too far?
Crazy, such memories. Thanks!
After leaving the first area to the bridge... was the sky really so close to the ground in the original game, or the old monitors made it look differently?<p>Also nice achievement...!
how long does it take to develop this game?
This is dope.
lowkey amazing!
But can it play Crysis?
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.
Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should
Every time I click in the window, the menu disappears. I tried both Firefox and Chrome.
Bro how tf.<p>This is insane.
this is crazy i didn't know css could do this
If this is what CSS has become, it means at some point its development went the wrong way.
It still needs JS. It just avoids using canvas and does DOM manipulation + CSS instead.
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.
is there no sound?
lol that's crazy. Good job.
[flagged]
Wow, this will be a great project for the forever-upcoming VRML /s
[flagged]
Wow