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/

Related: