CPU seems to be playing at 'undefeatable' skill level. Is there a way to decrease her skill level?
CSS3 Ping Pong, with scoring
11–20 of 25 posts
Re: CSS3 Ping Pong, with scoring
#12Re: CSS3 Ping Pong, with scoring
#13Nicely written SASS! :)
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.
Re: CSS3 Ping Pong, with scoring
#14I hate to be the inevitable nitpicking HN commenter, but this doesn't work in Firefox.
Also seems to not work with javascript disabled, which is unfortunate given it's supposed to be a CSS demo, I imagine this is just a factor of the particular site though.
Re: CSS3 Ping Pong, with scoring
#15Hey guys.
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.
Re: CSS3 Ping Pong, with scoring
#16Very, very cool. We'll be able to use some of these concepts in the real world in about 8 or so years, but someone needs to be sitting on the bleeding edge and abusing CSS like this.
Re: CSS3 Ping Pong, with scoring
#17Very nifty. Why does the ball pass through the paddle though?
Mainly because I'm trying to fake 'collision detection' by using CSS hover. You could almost describe it as more of a 'controlled animation' than a game.
CSS isn't designed for this kind of thing, so we have to work with what we have.
Re: CSS3 Ping Pong, with scoring
#18Pretty cool, has a few glitches though. Such as if you just click the ball and never move your paddle you can never be scored on unless you move your paddle
I don't think there's anything I can do about that -- short of using JavaScript, which kinda defeats the purpose.
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 ;)
Re: CSS3 Ping Pong, with scoring
#19I hate to be the inevitable nitpicking HN commenter, but this doesn't work in Firefox.
it doesn't work in Chrome for me
Re: CSS3 Ping Pong, with scoring
#20Just a note: you cannot defeat the AI and your score always stays 0. Nice hack though.