CSS3 Pong - with scoring
An exercise in the futile but fun.
This is a playable version of Pong complete with working scoring system -- built entirely with CSS. Not a line a Javascript to be seen.
All game logic is built using hover state and sibling selectors.
PS: It's not quite finished but it's close.
ISSUES:
I'd love to limit the movement of the bat to vertical only
If the player doesn't move at all, he/she can cheat. Basically we're relying on ':HOVER' to determine if the animation continues or ends. When your cursor is stationary the browser doesn't ever recheck to see if the hover state has changed.
I doubt there's a solution to this, other than finding another method not using hover. If you can do it in pure CSS, I salute you sir or madam!
PS: I've written a breakdown on how this works here -- http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/