
CSS Panic: Game written in HTML/CSS - no Javascript - dll
http://jsdo.it/GeckoTang/4rXg
======
billybob
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.

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

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

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

~~~
starwed
Likewise on FF7 nightly (mac)

------
ck2
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)

~~~
daleharvey
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)

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

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

------
Wickk
Works fine in Chrome 11 under linux

------
sambeau
Very clever.

How is the randomness produced?

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

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

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

