Unrelatedly, thought it was a pretty well-done and clever game, I'm impressed.
Thanks for the feedback. It's very much a work-in-progress and I was surprised to find it here.
It's certainly 'Chrome-centric' at the moment -- but I don't think there's any reason it shouldn't eventually work in most modern browsers.
Taking the bat off the cursor when it's outside the court area is probably a smart move. Will do.
I like the trick of using radiobutton/hover interacting to create the scoring systems, very cool.
One improvement suggestion would be to change the player paddle image to be default when you move out of the court? Then it would feel like you could click on the Alex Walker name and see who this person is. Because atm it does not work.
CSS isn't designed for this kind of thing, so we have to work with what we have.
<!-- Player 1 score (tip: um... it never changes) -->
I showed the demo to a work buddy yesterday and a few hours later it popped up on HN. The genie got out of the bottle a little early.
Right now, the truth is, the millisecond you serve, you've already lost. The only question is how how long it will take.
I originally built the thing just as an interesting animation, and one of the guys at work said 'Hey wouldn't it be cool if you could play it?' I laughed off the idea at the time, but later started to wonder if it was maybe possible. It's ended up more playable than I ever imagined -- that's not great play, but I doubted it would have any game play value.
I do have the inkling of a method I might be able to make the robot player defeatable. I'll mull it over for a while.
Such as if you just click the ball and never move your paddle you can never be scored on unless you move your paddle
Basically, every time you move the cursor, the browser checks to see if you triggered a new hover state. If you keep still it assumes nothing has changed.
In this demo it's the thing being 'hovered over' that's doing a lot of the moving -- but the browser doesn't ever check for that.
Maybe there's a better alternative to :hover? CSS is obviously a limited toolset when it comes to this kind of thing.
The challenge is there for anyone who wants to fork it ;)