Download
Latest release: v275

jsGameSoup

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

FallingGame demo AsteroidsTNG demo SoupBox - box2d.js physics demo Audio demo Sylvester.js vector math demo

Batteries included

FallingGame screenshot

Documentation

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

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":

<html>
    <head>
        <script src='jsGameSoup/jsgamesoup.js'></script>
        <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());
            }
        </script>
    </head>
    <body>
        <canvas id='mygame' jsgs='startGame' fps="25"></canvas>
    </body>
</html>

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.