CSS Panic: Game written in HTML/CSS - no Javascript | Hacker News Reader

CSS Panic: Game written in HTML/CSS - no Javascript

jsdo.it

81 pointsdll15 comments

There are more than 6000 lines of CSS behind this, but only the first 500 or so are actual CSS; the rest appears to be images encoded into text.

At any rate, this is very impressive and interesting. I would have sworn it was a Flash game if I didn't know better.

Works well in webkit-based browser (Chrome 12 and Safari 5 tested). This is due to the extensive usage of -webkit-animation-, -webkit-pointer- and -webkit-transform-.

The crocodiles are radio buttons and animations are controlled via the :checked pseudo-selector, very clever.

As soon as I click play/replay, I get the message Game Over :-) I am using FF4 on Mac

doesn't work in my ff5 also (mac).

Likewise on FF7 nightly (mac)

Very clever work.

But we're back to the days of "works best in so-and-so browser".

(no FF3/4 or IE9 or Opera11 support)

They never went away, a pure css game is very obviously not going to work in ie6, there is nothing for it to degrade to, some people push the standards (mostly fun experiments) and some people have to be very careful about browser support (the amazons of the world)

Sure, for experiments like this that are playing with vendor specific properties. This is an outlier.

The great thing now is, for most regular old websites, I can just write the CSS and expect it to work reasonably well in any of the latest generation browsers.

How can one implement game logic and AI in CSS? I thought CSS can do nothing much other than styling except mouse hover property which gives some interactive elements without JS.

It has no AI, the croc's movement is scripted. CSS can do a lot more than changing style on mouse hover. Check out the pseudo-elements, the transitions, the :target selector.

Works fine in Chrome 11 under linux

Very clever.

How is the randomness produced?

There isn't any randomness involved. Everything is defined to slide in/out at specific intervals. Once you click an alligator (either with or without sunglasses), that alligator is hidden for the rest of the game. The other alligator continues on sliding in/out at the specified duration for each cycle (there's about three cycles for the game...) until you click it as well.

However, the game does have a feel of randomness do the the different speeds of sliding and the multiple instances of an alligator sliding in/out during a cycle. It's very nifty.

It doesn't work on IE9 either. Thus we see the flaw in designing programs in html/CSS there is no guarantee that what you wrote is what will happen/appear on a browser. Even worse than an untyped language. A programming language that has the programmer "suggest" commands rather than demand them.

Yes. Welcome to web development. :)

Snarkiness aside, I feel the pain behind your complaint. That's one reason I think CSS can be harder than actual programming: you have all these unknowns and contingencies to manage.

Reply on news.ycombinator.com