CSS3 Pong - with scoring | CSSDeck

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!