It's pretty amazing at how fast people can learn certain technologies. A couple of months ago, I learned my friend and ex-classmate Sidney te Grotenhuis some (basic) jQuery. Last week, he contacted me to show off his latest creation: jPong. I was blown away.

By combining jQuery with a collision detection plugin, a line drawing plugin and some own scripting, he was able to create this game. Feel free to dig in the source code (comments were added) to see how it works. But for now, simply start the game and play.

As you might already see, this game is based on the popular Flash version called Curveball.

  

I want to thank Sidney a lot for sharing this great example with us. Take note this is just a simple proof of concept and not fully tested in any way. Now let's see if you can beat your browser at this neat little jQuery game! What highscore can you get?

Features

Here's the list of features that are included in this game:

• Show the score
• Give effect to the ball when you hit it (curve)
• Turn on/off power up to create a "wall" of panels when you curve the ball

Future

These changes could be implemented in the future:

• Improve the AI of the opponent based on the player
• Making the game resizable instead of fixed width/height
• Adding sounds (maybe with HTML5 audio)
• Cursors are acting different in different browsers
• IE9 < support

Conclusion and Download

Except for the minor bugs, I think it's just a cool little game showing some nice use of jQuery. What do you think? Do you see improvements of this script? Feel free to share.

  

Next version might include the use of HTML5 canvas in combination with WebSockets for a multiplayer version of this game!

Interested in this topic? You might enjoy another article I've written called

• jQuery Mobile First Look: Book review and Giveaway
• Generating the pixellogo from TechCrunch in HTML
• Animated fullscreen background image slideshow
• Animated CSS3 helix using 3d transforms
• jQuery Quickie: Smooth animated quote display

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Gaya   2010-11-10 09:10:41 Wow! Very nice. Never knew Sidney could do such a thing. Good job and thanks for sharing. Reply | Quote

Robin   2010-11-10 12:09:14 Pretty nice Only thing that I found strange was that the ball doesn't increase/decrease in size. Otherwise very well done Reply | Quote

steve   2010-11-10 16:42:56 Just managed to play this in my phone browser (android). Nice concept, thanks for sharing! Reply | Quote

jp iconshock - great work !!   2010-11-12 17:06:50 Marco this is great !!... thanks for sharing, its going to take some productivity today Reply | Quote

Malcolm Gibb - Web Designer Stirling   2010-12-22 12:08:07 Ah, this takes me back to a university project exactly the same as this. Great little project and can get addictive, be sure to play around with the maths so it gets ultra hard the more you play Reply | Quote

Alexa - Glitch   2011-01-19 06:37:02 I have gotta say, nice. But on my browser(Safari5.0.3/OSX10.6.6) If you click the 'throw ball button' and keep the ball bouncing in the middle, no paddles moving for about 2 mins., the game starts glitching. The green 'z-axis' indicator goes off the screen, the ball resizes, and the game gets so quick that the ball is just a blur. Is this happening to anyone else? or is it just me? Reply | Quote

Andrei - great job!   2011-03-23 09:38:50 Well done.. never thaught you can create that with jQuery. We want moooore Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Unsubscribe from e-mail notifications.