Ajax Loader
×

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/

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Pong - with scoring

    CSSDeck G+