

CSS3 Ping Pong, with scoring - 19_ploT
http://cssdeck.com/labs/css3-pong-with-scoring

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

~~~
freditup
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.

------
alexmwalker
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
Just a note: you cannot defeat the AI and your score always stays 0. Nice hack
though.

------
kaichanvong
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
Very nifty. Why does the ball pass through the paddle though?

~~~
padwan
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
You actually cannot hit the all more than once.

------
corin_
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
0.1, and he turned into Flash.

------
jwarren
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
A writeup for this would be awesome. Just when I think I've seen the limits of
CSS, something like this comes along.

~~~
alexmwalker
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
CPU seems to be playing at 'undefeatable' skill level. Is there a way to
decrease her skill level?

~~~
alexmwalker
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
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
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
I had a good laugh trying with these settings: $speed: 0.1; /* 1=fast 10=slow
_/ $updown-speed:(0.1s_ $speed);

