Make games with Javascript.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A Free Software framework for making games using Javascript and open web technologies.

  • Free and Open Source.
  • Modular - component javascript files also work standalone.
  • Uses Open web technologies like Canvas and HTML5.
  • Runs on Firefox (Gecko), Safari/Chrome (WebKit), Internet Explorer 6+, and Android + iOS browsers.
[![FallingGame demo][FallingGame-thumbnail]][FallingGame] [![AsteroidsTNG demo][AsteroidsTNG-thumbnail]][AsteroidsTNG] [![SoupBox - box2d.js physics demo][SoupBox-thumbnail]][SoupBox] [![Audio demo][AudioDemo-thumbnail]][AudioDemo] [![Sylvester.js vector math demo][Sylvester-thumbnail]][Sylvester]

Batteries included

FallingGame screenshot


Copyright Chris McCormick, 2009-2011, and LGPL licensed. Please see the file COPYING.txt for details. Basically you can use this in a commercial product but if you make modifications to the library itself you should publish them.

Using jsGameSoup for your game? Hire me as a consultant.

AsteroidsTNG screenshot

Free game resources

Numbeat screenshot

Internet Explorer compatibility

To make your jsGameSoup game run under Internet Explorer 6 and above, you can use the ExplorerCanvas library (pure Javascript) or the FlashCanvas library (uses the proprietary Flash plugin) to emulate the <canvas> tag. These libraries have both been tested with jsGameSoup on Internet Explorer 6 and work fine, with the FlashCanvas library providing better performance than excanvas. You should get the source code for the project you want and then put the respective line for loading the library inside the <head> tag, before any other <script> tags.

To use ExplorerCanvas:

<!--[if IE]><script src="explorercanvas/excanvas.js"></script><![endif]-->

To use FlashCanvas:

<!--[if IE]><script src="flashcanvas/bin/flashcanvas.js"></script><![endif]-->

See the Download section above for links to these libraries.

One final gotcha under IE6 is that Javascript datastructures should not contain a trailing comma on the last element. E.g. t = [1, 2, 3]; not t = [1, 2, 3,]; This is a quirk of the browser that seems to trip people up. If you are finding debugging under old versions of Internet Explorer frustrating, one thing you can do to help is install the Microsoft Script Debugger. You'll also want to enable debugging in the advanced options of the browser.

Performance tips

  • Generally the larger screen area your game fills the slower it will draw. Try using to launch your game in it's own window of fixed size.

  • If you have an operation drawing lots of repeating shapes on Canvas, do them inside one big c.beginPath() and c.closePath() instead of lots of little ones.

Auto-launching your games

Auto-launching is useful if you have pages with multiple game canvases and you don't want to write the launch code for every instance. You do this by simply creating <canvas> tags in your html document with an attribute "jsgs":

		<script src='jsGameSoup/jsgamesoup.js'></script>
			function startGame(gs) {
				// our demo game entity
				function Thingy() {
					this.draw = function(c, gs) {
						c.moveTo(10, 10);
						c.lineTo(10 + 10 * Math.sin(), 10 + 10 * Math.cos());
				gs.addEntity(new Thingy());
		<canvas id='mygame' jsgs='startGame' fps="25"></canvas>

When the page is loaded, jsGameSoup will attach a new JSGameSoup() object to every canvas tag with the 'jsgs' attribute. This specifies the name of the function which should be called to launch the game script associated with that canvas. The 'fps' attribute specifies the desired frame rate of the game engine for that canvas. Once the jsGameSoup engine has been attached to the canvas it starts running immediately.