CSS3 Ping Pong, with scoring

CSS3 Ping Pong, with scoring(cssdeck.com)

72 points by 19_ploT 13 years ago | 23 comments

jbackus 13 years ago |

I hate to be the inevitable nitpicking HN commenter, but this doesn't work in Firefox.

freditup 13 years ago | |

I think these comments are relevant - can be kind of frustrating to try something and wonder if you're just doing something wrong vs. if it is broken.

Unrelatedly, thought it was a pretty well-done and clever game, I'm impressed.

nowarninglabel 13 years ago | |

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.

isaacwaller 13 years ago | |

It also doesn't work in IE10.

daledavies 13 years ago | |

I cant get it to work at all, in any browser :(

chenyeric 13 years ago | |

it doesn't work in Chrome for me

alexmwalker 13 years ago |

Hey 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.

runn1ng 13 years ago |

Just a note: you cannot defeat the AI and your score always stays 0. Nice hack though.

kaichanvong 13 years ago |

Nicely 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.

nhm 13 years ago |

Very nifty. Why does the ball pass through the paddle though?

alexmwalker 13 years ago | |

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.

padwan 13 years ago | |

You need to keep the paddle more to the left, by the end of the table. I don't know if this is a feature or a bug.

JacksonGariety 13 years ago | | |

You actually cannot hit the all more than once.

corin_ 13 years ago |

I wonder if it would be possible to make it so the player could win...

  <!-- Player 1 score (tip: um... it never changes) -->

Changing the speed to 0.2 and watching the CPU player keep up was fun, though.

19_ploT 13 years ago | |

0.1, and he turned into Flash.

jwarren 13 years ago |

Very, 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.

grimtrigger 13 years ago |

A writeup for this would be awesome. Just when I think I've seen the limits of CSS, something like this comes along.

alexmwalker 13 years ago | |

I actually have a write-up 80% written.

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.

imdhmd 13 years ago |

CPU seems to be playing at 'undefeatable' skill level. Is there a way to decrease her skill level?

alexmwalker 13 years ago | |

At the moment, no.

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.

huskerfan711 13 years ago |

Pretty 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

alexmwalker 13 years ago | |

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 ;)

polskibus 13 years ago |

I had a good laugh trying with these settings: $speed: 0.1; /* 1=fast 10=slow/ $updown-speed:(0.1s$speed);