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

  today at 2:59 PM

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

  • Insanity

    today at 3:11 PM

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

    It is awesome though.

  • jedberg

    today at 4:01 PM

    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

      today at 4:32 PM

      Decades of optimizing a toaster to make better toast will not make the toaster any better at making meatloaf

      • libria

        today at 6:23 PM

        Is this the right analogy? The product is the same, the appliance is different.

        It should be "Decades of inventions from toasters to IOT AI Smart Air Fryers will not make better toast than the original"

        But I'd argue the IOT AI Smart Air Fryer should make really good toast. Which is what GP is saying.

      • today at 4:56 PM

      • rustystump

        today at 5:10 PM

        I am on the ground. This is great.

        Still, why css is as slow as it is given what tech like imgui can do is a little wild.

        • harrall

          today at 5:30 PM

          CSS is a general rendering solution, not something built for rendering 3D games.

          And no one has spent any time optimizing 3D transforms to make a game workable because no one would be able to justify the use of their time like that. It wouldn’t even give you brownie points ‘cause most people would just ask “why?”

          • Akronymus

            today at 6:06 PM

            Id assume "a fun challenge" could be enough of a reason

• jamal-kumar

  today at 5:09 PM

  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

  today at 4:53 PM

  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

  today at 3:53 PM

  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.

  • iamphilrae

    today at 4:03 PM

    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.

  • bluedino

    today at 5:05 PM

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

    • Garlef

      today at 5:27 PM

      I played it on a Pentium with 60mhz - it was allright

  • UltraSane

    today at 4:14 PM

    Quake ran well on my 100Mhz Pentium.

  • jedberg

    today at 4:01 PM

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

  • lightedman

    today at 3:59 PM

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

• jonplackett

  today at 4:04 PM

  I think you’re missing the point

Awesome! Harder to exit than vim.

• pgt

  today at 5:15 PM

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

• deskamess

  today at 1:40 PM

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

  • calgoo

    today at 1:50 PM

    Back button worked for me

  • ChrisClark

    today at 2:18 PM

    I pressed escape, then just closed the tab

  • axus

    today at 2:18 PM

    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.

• today at 3:39 PM

Wow this is really awesome. Really really smooth. It's insane how after 25 years or so my muscle memory is still intact.

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/

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?

And maybe a skill issue but I was unable to jump out of the slime...

It seems like this CSS Quake needs JS to run…

• zamadatix

  today at 3:41 PM

  CSS does the rendering, the game logic is TypeScript.

Has science gone too far?

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. :)

No light theme though?

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

• OuterVale

  today at 12:40 PM

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

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

  • pantelisk

    today at 5:00 PM

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

    - https://pantel.is/projects/css3d/

    - https://keithclark.co.uk/labs/css-fps/ (the original)

    but quake and doom took it to the next level :)

• degamad

  today at 12:33 PM

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

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

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

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.

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

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

  today at 1:25 PM

  .dog { display: float; }

  • skvmb

    today at 2:26 PM

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

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?

Also nice achievement...!

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

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

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

I wish I could use CSS this well too

• MattCruikshank

  today at 2:46 PM

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

  • qingcharles

    today at 3:04 PM

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

  • jdw64

    today at 2:57 PM

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

But can it play Crysis?

Crazy, such memories. Thanks!

This is dope.

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

• aruametello

  today at 5:09 PM

  Then Tresspasser CSS next

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

how long does it take to develop this game?

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

  today at 2:30 PM

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

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

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

is there no sound?

• amarant

  today at 11:56 AM

  Is there a way to produce sound using CSS?

  • pwdisswordfishq

    today at 12:17 PM

        @media speech {
            body {
                cue-before: url(/path/to/sound.ogg);
            }
        }
    

    https://www.w3.org/TR/CSS2/aural.html

  • Waterluvian

    today at 12:12 PM

    Only screams.

    • circadian

      today at 12:17 PM

      Best. Comment. Ever

• rofko

  today at 11:58 AM

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

lol that's crazy. Good job.

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

[flagged]

• GeorgeWoff25

  today at 3:38 PM

  chrome web store?

Wow

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

• senfiaj

  today at 2:23 PM

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

• Rohansi

  today at 2:22 PM

  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.