Pong Game with SVG.js

We were recently introduced to SVG.js, a library for manipulating and animating SVG (Scalable Vector Graphics). The library boasts of having no dependencies and aims to be the leanest of its kind, doing the same things that Snap.svg and Raphael can do, but with half the amount of code.

To highlight some aspects of the  SVG.js library, its creators have given us a neat tutorial on how to make a Pong game within their framework. Look how short the code is for drawing two paddles with different colors:

Pong with SVGjs - coding the paddles

This version of the classic arcade game has some cool effects.

For example, the ball changes its color into that of the opponent while moving towards the other side.

Pong with SVGjs - color blast

Also, there is a huge color blast when the opponent fails to hit the ball back.

You can try the game yourself here.

Check out the tutorial here.


You might also find this interesting:


  1. HTML5 Game Development Facebook, Twitter and G+ The official HTML5GameDevelopment.org Facebook page up at: http://www.facebook.com/Html5GameDevelopment The official HTML5GameDevelopment.org Twitter account is at: https://twitter.com/#!/gamedevhtml5 The Google Plus page is up at: https://plus.google.com/b/106608051085232600929/ All are updated automatically via the...

  2. Atari Opens up Development Kit for HTML5 Atari Arcade Atari arcade, the Microsoft sponsored HTML5 re-imagining of Atari’s classic catalog, is opening up it’s development platform: Supported by Internet Explorer and Atari, the new Atari Arcade is a browser-based...

  3. CodePlayer Tutorial: Make a snake game using HTML5 and jQuery The folks over at TheCodePlayer.com have written an interactive coding tutorial that walks you through the code for making a snake-game in HTML5. The tutorial walks you through the code...

  4. Ascii Fluid Designer Nick Kwiatek posted a innovative combination of Fluid Dynamics and Ascii Art. Creative JS has some more notes. Share List...

  5. Funky Microsoft Sponsored Japanese SVG Animation A wacky SVG animation created to show off the SVG animation capabilities of IE9 (but works fine in Chrome as well) – cool, rescalable stuff Share List...

, ,
HTML5 Demos, HTML5 Game Dev Tutorials, HTML5 Tools