jsGameSoup is a simple Free Software framework for making games for the web using only Javascript and the canvas tag. Its purpose is to abstract away some of the complexity of developing Javascript + canvas tag games for multiple browsers and it currently runs under new versions of Firefox, Safari, IE 6.0, and IE 7.0. It doesn't depend on any proprietary technologies like Flash or Silverlight.
jsGameSoup is copyright Chris McCormick, 2009, and is licensed to you under the terms of the LGPL. Please see the file COPYING for details.
jsGameSoup is pretty beta, but you can already make games with it.
I periodically post demos and releases of jsGameSoup on my blog.
There is a mailing list for jsGameSoup at Google groups.
The main component of the framework is v74 of the jsgamesoup.js Javascript library. You probably also want to download excanvas.js from the excanvas homepage for Internet Explorer compatability.
You can also download a zipfile of v74 of the full sourcecode, docs, etc., or if you use bazaar you can stay up to date with my cutting-edge repository by doing bzr checkout or bzr branch from here:
http://mccormick.cx/dev/jsgamesoup/
Check out the jsGameSoup demos page here. The somewhat sparse test suite might also be useful.
Probably the most important bit of documentation is jsGameSoup's API, but see the bottom of the page for a quick-start setup, which gives you the HTML neccessary to get up and running with your first jsGameSoup "hello world".
Because jsGameSoup graphics are rendered using the canvas tag, the canvas documentation is also useful, as well as Mozilla's canvas demos page. Finally, the canvas cheatsheet by Jacob Seidelin is very useful too. Be aware that jsGameSoup uses the excanvas library for Internet Explorer compatability and so not everything works 100%, although most of the important bits do.
The main component of the framework is the JSGameSoup() object, which is the engine of the system. When the jsgamesoup.js script is loaded, it will attach a new JSGameSoup() engine to every canvas tag which has an attribute 'jsgs'. The attribute 'jsgs' 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. The jsGameSoup engine keeps a list of objects to update and draw every frame. In order to make things happen in your game, you should create objects and add them to the engine with the addEntity() method.
Here is some example code to get you going. You should be able to paste this into an HTML document with jsgamesoup.js and excanvas.js installed in the correct subdirectories.
<!--[if IE]><script src="js/explorercanvas/excanvas.js"></script><![endif]-->
<script src='js/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>
<canvas id='mygame' jsgs='startGame' fps="25"></canvas>