Nintendo NES console in CSS | Hacker News Reader

Nintendo NES console in CSS

codepen.io

78 pointszhs51 comments

"Full CSS Nintendo NES" is a bit of a linkbait title. However, it's still kind of amazing, because despite knowing that CSS is not Turing complete, I still clicked on it hoping for an emulation. Which effectively means that I identified it as bait and then chose to eat it anyway.

Other than that it's a neat demo.

Did you seriously expect a NES emulator written in CSS? Color me surprised.

But ... OP promised.

.orangethirty { background-color: #ff0000; font-weight: bold; }

Shouldn't it be:

    #orangethirty {background: #000;}
    #orangethirty .surprised {
        background: #fa0000; 
        font-weight: 700;
    }

I remember seeing an encoding of Rule 110 in CSS + HTML a while back. Is CSS actually not Turing complete?

I'd found this before posting:

http://stackoverflow.com/questions/2497146/is-css-turing-com...

where the top answer gives a Rule 110 solution, but I was satisfied with this comment:

"BRILLIANT!. However, I don't think this qualifies as turing complete. CSS is only able to calculate 1 iteration of the state-machine. Your example relies on the human repeatedly clicking all the orange boxes in order to feed the "output" (pixels) back into the input (page state) and "pump" the state machine. Because there is no programmatic way to use the output of CSS as input, it can't be used to calculate any multi-step loops, the hallmark of turing-complete languages."

That makes sense. Browser implementors would definitely balk at anything that they couldn't guarantee would stop in a reasonable amount of time.

What about JS?

JS is trivially Turing complete (given infinite RAM)

See this: http://www.turing.org.uk/turing/scrapbook/tmjava.html

What I meant was, why don't browser implementors balk at it?

I think the thing is, that JS can be executed separately from the layout engine, but CSS can't, however, I'm definitely not an expert in the matter.

Browser vendors control the javascript VM. Though we can't solve the halting problem, we can just throttle or unplug the JS interpreter if it causes usability problems.

But CSS is required for the site to look right There's no way to turn it off without messing with the site's layout.

To me this is unpractical example of use of CSS. Yes, you can do an image using tables and other elements or techniques but I think these things are just a waste of time. If you want to drool on something why not seeing this made on SVG AND using all the CSS, JS capabilities instead of showing something made in CSS with fewer uses.

art doesn't require utility.

http://www.lettersofnote.com/2010/01/art-is-useless-because....

I don't think these types of examples are created to be practical, but more to just demonstrate what's possible/to experiment. Plus, it's probably fun.

But I agree, an SVG implementation really would be something!

Silly me, I was expecting an emulator.

http://fir.sh/projects/jsnes/

It doesn't seem entirely stable though.

So how do you blow on it? It's not an NES unless you have to blow on it.

Yeah, you also have to be able to stack two games in there on top of each other.

Very cool indeed.

Am I remembering correctly that the reset button should make the power light blink if the system is on and reset is depressed?

Yes. While you hold the reset button down the power light should be off.

If I remember correctly when you press power and there is no cartridge, then the power button flashes ;) Great work!

The author of this should get in touch with the guy that wrote that NES emulator in javascript [1]. I can imagine a pretty neat collaboration of the two projects!

[1] http://fir.sh/projects/jsnes/

I don't see any connection

They're both related to NES.

Also browsers. Also JS and CSS both have at least one 'S'.

The CSS for the NES console itself could be used in a rich graphical user interface for emulating NES ROMS.

Hope that clears up the connection for you.

That would be the same kind of skeuomorphism everyone decries in Apple's applications etc. Why should I virtually flip through a big stack of virtual cartridges, drag one into the slot, press it down with the mouse, and press the power button when I could just double-click on the game from a list? It would be cute and fun exactly once.

Well, yeah, you certainly wouldn't do that for the sake of intuitive design. It would just be neat. That's all it would be. Just like a home made craft or art project.

There's nothing wrong with that and I'd appreciate it. Even if it was only once.

As one of the lead developers of FCEUX [1], a multi-platform desktop NES/Famicom emulator, no: I don't see this CSS project as a usability breakthrough. I prefer to load my ROMs from the command line. But would it be a cool toy? Absolutely.

[1] http://www.fceux.com/web/home.html

Yeah it's a cool as hell demo, I just think it would be really annoying if I were forced to use it to play games.

You could even turn it into a minigame of trying to get the game working. Re-seat the cart. Wedge another on top. Try it with a Game Genie in hopes that'll contact all the pins. Click here to blow on the cart.

Cute, fun to fiddle with, but like all cute UI conceits, there would have to be an option to shut it off because I just want to play some Zelda.

relax.

Chrome-only. Firefox works but some code shows up in the window. Safari doesn't work at all.

It worked for me in FF20.

Works perfectly for me on Safari 6.

worked in IE10 as well (still can't log in to HN using chrome...odd)

Worked fine for me in Iceweasel 20.0 (Debian's Firefox).

No issues whatsoever with Firefox 21 on XP

With Firefox, I saw JavaScript in the result pane the first time but now it works fine. Perhaps it was behind a version or two the first time.

Went back with Safari (version 6, same version) and it worked fine this time. Before, the background didn't show up properly, only the cartridge door.

Weird.

I feel like a kid who got a SNES for Christmas and found out no one bought any games.

be nice to see full realism and proportionality with the lid opening, should be on hinges and shouldn't change shape and size when it's opened.

Amazing work. Do the Genesis Now. (:

CSS continues to amaze me.

Dope. That is all.

this is amazing! nice work

Why?

Exercise, fun, finding out what it is possible to do, etc.

Son, we don't take kindly to folks who ask 'why?' around these parts. You best mosey on before you accidentally fall down a well.

Why not?

Reply on news.ycombinator.com