A Free Software framework for making games using Javascript and open web technologies.
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.
You probably also want one of the following for Internet Explorer compatibility:
See the Internet Explorer compatability section below for instructions on getting your jsGameSoup game to work in Internet Explorer 6 and higher.
In an effort to keep this library minimal and focused on making games, here are some excellent 3rd party libraries and frameworks providing functionality you might need that is not included in jsGameSoup. Wherever possible these are single-file Javascript libraries that can just be dropped into your project along side jsGameSoup.
Contribute or get the latest version of the code using bazaar:
Download
bzr co http://jsgamesoup.net/
Or check the Github page for the git repository.
Or check the Google Code page for the SVN repository.
Start in an empty working directory. First get the jsGameSoup source in a sub-directory called 'jsGameSoup'.
Now create a file called index.html that will contain a basic HTML page, with a window-filling div tag that will become our game canvas.
<html>
<head>
<script src="jsGameSoup/js/jsgamesoup.js"></script>
<script src="main.js"></script>
</head>
<style>
html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
div {
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
}
</style>
<body onload='startGame()'>
<div id='surface'></div>
</body>
</html>
Now edit main.js with a little test code to get you started:
function Dot(gs) {
var x = gs.width * 0.5;
var y = gs.height * 0.5;
var r = gs.width * 0.1;
this.update = function() {
x += gs.width * 0.01 * (Math.random() - 0.5);
y += gs.height * 0.01 * (Math.random() - 0.5);
}
this.draw = function(c) {
c.fillRect(x - r / 2, y - r / 2, r, r);
}
}
function startGame() {
var gs = new JSGameSoup("surface", 30);
gs.addEntity(new Dot(gs));
gs.launch();
}
When you visit index page now you should see a black square wiggling about. The main component of the framework is the JSGameSoup() object, which is the engine of the system. You add your game entities to it with the addEntity() method as above. Entities should have an update() method and a draw() method, which accepts a canvas context as an argument. You can use the canvas context to draw your entities.
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.
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.