CSS3 Pong - with scoring
An exercise in the futile but fun.
All game logic is built using hover state and sibling selectors.
PS: It's not quite finished but it's close.
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/
- Animated CSS Gradient
- CSS BMW Logo
- CSS Tear Off Sheet
- selection animation
- css3 animation Phenakistoscope