CSSQuake

https://cssquake.com/

by msalsas • 1 month ago

548 114 1 month ago

cssquake.com

buffer_overlord• 1 month ago

is there no sound?

amarant• 1 month ago

Is there a way to produce sound using CSS?

Waterluvian• 1 month ago

Only screams.

pwdisswordfishq• 1 month ago

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

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

rofko3• 1 month ago

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

thenthenthen• 1 month ago

Wow

xenophonf• 1 month ago

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

rofko3• 1 month ago

Thanks for that report! It is hopefully fixed now.

AzzieElbab• 1 month ago

Awesome! Harder to exit than vim.

deskamess• 1 month ago

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

calgoo• 1 month ago

Back button worked for me

ChrisClark• 1 month ago

I pressed escape, then just closed the tab

axus• 1 month ago

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

pgt• 1 month ago

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

gpderetta• 1 month 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.

edwinjm• 1 month ago

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

degamad• 1 month ago

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

OuterVale• 1 month 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• 1 month 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/ (the original)

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

criley2• 1 month 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

remix2000• 1 month ago

It seems like this CSS Quake needs JS to run…

zamadatix• 1 month ago

CSS does the rendering, the game logic is TypeScript.

rikschennink• 1 month ago

Maybe possible with https://lyra.horse/x86css/ ?

rebane2001• 1 month ago

(author of x86css)

Not possible, but it would be possible to reimplement Quake's logic and controls in CSS to have it run without JS. I was considering doing that for my next CSS crime project, though now that CSSQuake has hit the hn frontpage there is little point in doing so.

stoobs• 1 month ago

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

divan• 1 month 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. :)

kiyeonjeon• 1 month ago

how long does it take to develop this game?

sgt• 1 month 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• 1 month ago

.dog { display: float; }

skvmb• 1 month ago

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

amatecha3• 1 month ago

Damn, always gotta deal with these accursed z-index issues with CSS ;)

ikari_pl• 1 month ago

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

perilunar• 1 month ago

Well, Quake and VRML were contemporaneous, but VRML was a plugin in the browser — it was never as fast as Quake, and not intended as a game engine, though there were many worlds and models built in VRML that were at least as detailed as the Quake maps.

ChrisArchitect• 1 month ago

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

alexb_• 1 month 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• 1 month ago

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

jojogeo• 1 month 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/

cynicalsecurity• 1 month ago

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

Rohansi• 1 month 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.

senfiaj• 1 month ago

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

Snoopfrogg• 1 month ago

This is dope.

iandanforth• 1 month ago

Crazy, such memories. Thanks!

jdw642• 1 month ago

I wish I could use CSS this well too

MattCruikshank• 1 month ago

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

jdw642• 1 month ago

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

qingcharles• 1 month ago

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

crimsonnoodle58• 1 month 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.

badsectoracula• 1 month 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.

slopinthebag2• 1 month ago

No it’s just the renderer. The game itself is Typescript.

rofko3• 1 month ago

Hi there! Thanks for the report, buttons should work properly now.

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.

jedberg5• 1 month 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• 1 month ago

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

Insanity• 1 month ago

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

It is awesome though.

jedberg5• 1 month 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.

DanielHB2• 1 month 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.

lightedman• 1 month ago

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

jedberg5• 1 month ago

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

iamphilrae• 1 month 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• 1 month ago

Quake ran well on my 100Mhz Pentium.

bluedino• 1 month ago

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

lizknope• 1 month ago

Ran fine on my Pentium 90 with 16MB RAM

MrFurious• 1 month ago

I played quake in 486dx100.

bitwize• 1 month ago

I ran it on a Pentium 60. If you stuck to 320x200 it ran fine.

jonplackett• 1 month ago

I think you’re missing the point

to11mtm• 1 month 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.

jamal-kumar• 1 month 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

jeroenhd• 1 month ago

Zero issues on Firefox + Linux. Gnome Web is stuttery and weird, though. Must be a WebKit/Safari thing.

jedberg5• 1 month ago

Possibly, I did it on Safari. Trying it now on Chrome and it's fine.

api• 1 month ago

Quake compiled in C will run insanely fast at 8K full resolution on an M1.

jedberg5• 1 month ago

You wouldn’t happen to have a pointer on where to get this version would you?

amatecha3• 1 month ago

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)

itvision2• 1 month ago

Runs perfectly fine at over 60fps on my Intel Core 358H at roughly 2560x1600.

Perhaps there's something wrong with your web browser. Try Firefox - it works beautifully there.

arendtio• 1 month ago

Maybe try Firefox.

Most of the time, things seem to be optimized for Chrome, but with this, I actually had the impression that Firefox ran a bit smoother, but I tested it on Linux.

Vaslo• 1 month ago

But can it play Crysis?

AndorinaAI• 1 month ago

lol that's crazy. Good job.

zuzululu• 1 month ago

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

boredemployee2• 1 month ago

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

amatecha3• 1 month ago

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.

boredemployee2• 1 month ago

Yes. Quake 3, "rebranded" as Quake Live, is the second best for me. I can play both for hours.

aggregator-ios• 1 month ago

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

ronbenton• 1 month ago

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

aruametello• 1 month ago

Then Tresspasser CSS next

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

jacobgold• 1 month ago

No light theme though?

rvba• 1 month ago

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

glerk• 1 month ago

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

xyproto• 1 month ago

Has science gone too far?

elinear• 1 month ago

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

ulrischa• 1 month ago

Though this is impressive, I think this is something that should not be possible with a declarative styling language

slopinthebag2• 1 month ago

Its just using CSS for the rendering, not the game logic.

vldszn• 1 month ago

lowkey amazing!

AbraKdabra• 1 month ago

Bro how tf.

This is insane.

joehabeebs• 1 month ago

Really impressive

system2• 1 month ago

My dark reader was on, and half of the map was black, but I played the first level from my memory. Amazing stuff, thank you.

koolala• 1 month ago

Using the Inspector on it is awesome. You can select each map piece.

itvision2• 1 month ago

Source code: https://github.com/LayoutitStudio/cssQuake

casey2• 1 month ago

Pretty fun to go into f12 and delete the enemy's face.

msephton• 1 month ago

This is a great showcase of both the PolyCSS library and CSS itself!

justaj• 1 month ago

If this is CSS only, then why does in need JS to run?

zftnb666• 1 month ago

This is what I show my friends when they say CSS isn't a real programming language.

ckeck• 23 days ago

Just in time for the 30th anniversary. This looks great, well done!

CSSQuake

Related Stories