1970's Retro Pong
I started writing my first article for HTML5Rocks.com the other day, and as I started working on it, I wanted to do something fun with it, something that folks could play with and enjoy, but still learn something. I found a really simple Pong implementation and decided that I’d re-write it in SVG, use the HTML5 audio tag and a few other little things for some extra fun. The article isn’t done yet, but I at least wanted to put the game up!
Play Pong #
The little “boink” noise is me. But it actually presented an interesting challenge, you’ll probably notice that the boink doesn’t happen every time the ball hits the wall. When the ball hits a wall twice, in quick succession, the browser is still playing the first boink, and doesn’t start a second boink [sad trombone noise]. While it’s still in early draft, this is a really great example of something the Web Audio API will be really useful for - playing sounds in quick succession.
Thanks to Chris Wilson for suggesting a painfully obvious optimization - I had two loops running in the game world, one for the paddle and one for the ball moving. Chris suggested one loop and tracking which key is pressed and moving both the paddle and the ball at the same time.
I’ve tested the game in Chrome 10, Firefox 4, Opera 11, Safari 5 and Internet Explorer 9 and it worked well in all of them.
The one thing I didn’t include was a scoring system, and I didn’t really see any interesting ones on the 'net anywhere. I think the next update I’ll include one that is timer based, but if anyone has any better suggestions, I’m open!