

Game made using only CSS - pwim
http://asiajin.com/blog/2011/05/24/css-only-no-flashjavascript-browser-action-game/

======
rodh257
It's good to see something that is advertised as 'only CSS' or 'pure CSS' that
is actually pure CSS and doesn't have any javascript.

------
aw3c2
blogspam, source is
[http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game...](http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm)

~~~
akkyakimoto
There are a lot of non-English news there. Without translation, it had not
been noticed for about a month for example.

------
astrodust
Based on the source, it's kind of clever. Each "cow" and "haystack" are a pair
of radio buttons, so clicking on the cow toggles the select state for both
simultaneously. This combines with some fancy CSS animation to make the cows
fly around so they're harder to click.

~~~
meric
I still don't get how the counter is incremented.

~~~
johnswamps
The counter is a large image with every possible score
([http://ndruger.lolipop.jp//hatena/20110429/css_game/images/c...](http://ndruger.lolipop.jp//hatena/20110429/css_game/images/counter_image.png)).
Initially only the top of the image is shown, but as the radio buttons are
clicked it makes visible some spacing elements which move the image so the
next score is shown.

~~~
trafficlight
I see. So each input is being made visible in sequence and the overflow
outside of #counter is hidden.

------
ewolfe
source <https://github.com/ndruger/css-game>

------
DCoder
More pure CSS minigames can be seen at <http://www.cssplay.co.uk/menu/> ,
under Puzzles.

~~~
rimantas
This one <http://www.cssplay.co.uk/menu/amazing.html> was created in 2004.
That's seven years ago…
[http://web.archive.org/web/20041030050027/http://www.stunich...](http://web.archive.org/web/20041030050027/http://www.stunicholls.myby.co.uk/menu/amazing.html)

~~~
rufibarbatus
The problem of programming a game based on :hover states is that you can cheat
the game by using a context menu to pass through the walls.

------
zbowling
Clever. Does this count as CSS being turing complete yet?

~~~
paulitex
Can you use CSS to throw your browser into an infinite loop?

~~~
qntm
I've seen this, in situations where a link is set to become bold when the
mouse pointer is hovering over it. The result is that the text becomes bold,
and redistributes itself. Having redistributed itself, the bold link is no
longer under your mouse pointer, so the link shrinks back to normal font
weight. Now the link is back under your mouse pointer so it becomes bold
again. Repeat.

