Nintendo NES console in CSS

http://codepen.io/onediv/pen/AsDev

by zhs • 13 years ago

78 51 13 years ago

codepen.io

smacktoward• 13 years ago

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

joeblau• 13 years ago

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

ljak• 13 years ago

Why?

lbebber• 13 years ago

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

fooqux• 13 years ago

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.

prg3185• 13 years ago

Why not?

ashmud• 13 years ago

Silly me, I was expecting an emulator.

w1ntermute• 13 years ago

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

It doesn't seem entirely stable though.

mratzloff2• 13 years ago

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

benferris• 13 years ago

It worked for me in FF20.

sean-duffy• 13 years ago

Works perfectly for me on Safari 6.

jspaur• 13 years ago

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

LukeShu• 13 years ago

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

prg3185• 13 years ago

No issues whatsoever with Firefox 21 on XP

mratzloff2• 13 years ago

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.

likarish• 13 years ago

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

carpe171• 13 years ago

this is amazing! nice work

throwaway19806• 13 years ago

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

orangethirty3• 13 years ago

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

madsravn• 13 years ago

But ... OP promised.

Zimahl• 13 years ago

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

jeffasinger4• 13 years ago

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

throwaway19806• 13 years ago

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

jonhmchan• 13 years ago

CSS continues to amaze me.

canthonytucci• 13 years ago

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?

eridius• 13 years ago

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

prg3185• 13 years ago

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/

alcuadrado• 13 years ago

I don't see any connection

recursive• 13 years ago

They're both related to NES.

prg3185• 13 years ago

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.

meerita• 13 years ago

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.

keithnoizu• 13 years ago

art doesn't require utility.

throwaway19806• 13 years ago

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

prawks• 13 years ago

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!

speedyrev• 13 years ago

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

orangethirty3• 13 years ago

Amazing work. Do the Genesis Now. (:

mathiasben• 13 years ago

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.

MrGrillet• 13 years ago

Dope. That is all.

Nintendo NES console in CSS

Related Stories