Chris McCormick - News - jsgamesoup Chris McCormick - News - jsgamesoup en Copyright 2008- Chris McCormick 60 GMT Global Game Jam 2012 - postmortem entries/global-game-jam-2012-postmortem Here is what I ended up with at the end of GGJ 2012. I've cleaned it up a bit, got it working under Internet Explorer (mostly) and put it online here.

Screen shot of commit 31

I ended up with more of a virtual world or virtual ecosystem than a video game. I ran out of time to put probably the most important thing into the game - game mechanics. Also no time for sound, the player has very little agency in the world, and there are no win or lose conditions.

Overall it was a lot of fun to build though, and I got some pretty neat new technology for jsGameSoup out of it, namely the isometric camera library, and a lightweight vector math library.

GGJ was also really fun just because of the social aspect of being crammed into a room with like minded people for 48 hours. Can't wait for next year!

/tags/jsgamesoup Wed, 01 Feb 2012 14:17 GMT
Global Game Jam 2012 - day 2 entries/global-game-jam-2012-day-2 End of Saturday night, day two:

The Cycle - day two

Got some sleep. Lots of on the TODO list for today. About 7 hours left. :)

/tags/jsgamesoup Sun, 29 Jan 2012 02:21 GMT
Global Game Jam 2012 - day 1 entries/global-game-jam-2012-day-1 The theme is "Ouroboros". Progress as at midnight day 1:

The Cycle - title screen

The Cycle - current gameplay

I have a reasonably concrete idea of where I am going. Hopefully there will be time to iterate on my idea and "find the fun".

/tags/jsgamesoup Sat, 28 Jan 2012 03:26 GMT
Coherent Noise in jsGameSoup entries/coherent-noise-in-jsgamesoup Recently I added Sean McCullough's Javascript implementation of the Perlin noise algorithms to jsGameSoup. These Academy Award winning algorithms by Ken Perlin are fantastic for adding procedural content to your games.

Simple noise generated RPG map

The RPG map above with grass, water, road, sand, and tree tiles represented in the different colours, was produced with the simplex noise demo here. It can randomly generate a basically infinite number of unique RPG maps of basically infinite size. Check the jsGameSoup documentation for more details.

/tags/jsgamesoup Tue, 24 Jan 2012 13:50 GMT
A* Path Finding for jsGameSoup entries/astar-path-finding-for-jsgamesoup A* Path finding algorithm demo in jsGameSoup

I have included a modified version of Benjamin Hardin's 2009 A* implementation in jsGameSoup. This is a nice general way for entities in your game to find a path between two squares on a two dimensional board with some obstructed squares. Check the demo here and the documentation here.

Have fun!

/tags/jsgamesoup Sat, 14 Jan 2012 10:25 GMT
Finite-State Machines in jsGameSoup entries/finite-state-machines-in-jsgamesoup A finite-state machine is an algorithmic structure which is frequently useful in video games. A finite-state machine can be used to simulate any game entity which has a set of discrete states which it changes between, and which looks different and/or exhibits different behaviour in each of those states. Here are some examples:

  • A non-player character which wanders around and then starts chasing the player once they come in range.
  • A door which switches between closed, opening (animated), and open states.
  • A spacecraft under player control which has an proximity-triggered docking procedure.

Public domain image of a finite-state machine from Wikipedia

Many video game entities can be most easily modelled in this way. In jsGameSoup it is now very easy to create state machines like this. Simply include "statemachine.js" in your HTML file:

<script src="jsGameSoup/js/statemachine.js"></script>

Then call the statemachine() function on an entity inside it's constructur:

function MyEntity() {

After that your entity will have a new method set_state(state) which switches it between different arbitrary states. These states are completely up to you. You can define different behaviours, events, and visual representations by creating multiple versions of jsGameSoup's normal expected methods. For example, let's say the entity above has a state "wandering" and a state "seeking" when it is moving towards the player. In this case we would define two different sets of methods:

/****** Update and draw this entity in the wandering state. ******/

this.wandering_update = function() {
    // update the entity in "wandering" mode

this.wandering_draw = function() {
    // draw the entity in "wandering" mode

/****** Update and draw this entity in the seeking state. ******/

this.seeking_update = function() {
    // update the entity in "seeking" mode

this.seeking_draw = function() {
    // draw the entity in "seeking" mode

When you want to put the entity into a particular state, you call set_state(state), for example in the init() method of the entity to put it into a certain state from the start:

this.init = function() {

Here is an example of a jsGameSoup entity class which switches between a "chill" and an "antsy" state. View source to see how it works.

Hopefully this will help you write games and get them infront of players more quickly.

Screenshot of an old game

/tags/jsgamesoup Sun, 07 Aug 2011 06:04 GMT
MineAscender - is it fun? entries/mineascender-is-it-fun

I wrote this game in a few hours today using jsGamesoup.

Is it fun? I would like to know what you think.

(Inspired by SpoutDS).

/tags/jsgamesoup Tue, 26 Jul 2011 15:06 GMT does audio entries/jsgamesoup-weekend Guitar amplifier

That's right, the jsGameSoup library now plays sound effects samples on all supported platforms, right back to Internet Explorer 6. I also registered the domain name - hooray!

With graphics and sprite animation, collisions, random number generation, sound effects, vector math, physics, and network, I think we pretty much have developing games for the web covered.

Enjoy, and remember to view the source!

/tags/jsgamesoup Sat, 25 Jun 2011 01:42 GMT
jsGameSoup physics and vector math demos entries/jsgamesoup-physics-and-vector-math-demos I've updated the jsGameSoup project with a couple of new demos showing how to integrate it with some 3rd party libraries that are useful for making video games.

The first demo shows how to integrate the sylvester.js library. This is a great little single-file Javascript library that covers the basic vector and matrix math nicely. Check out the attractors demo, and don't forget to view source!

Vector math with Sylvester screenshot

The second demo was created by Nick Lowe and it shows off the Box2d.js physics engine integrated with jsGameSoup. Check it out! I'm really happy to have such a robust and popular 2d physics engine working along side jsGameSoup in the browser. Great stuff!

/tags/jsgamesoup Fri, 17 Jun 2011 13:54 GMT
jsGameSoup documentation update entries/jsgamesoup-documentation-update jsGameSoup logo I've made some updates to the jsGameSoup documentation, specifically the quickstart instructions and also how to get things working under older versions of Internet Explorer. Check it out if you are making video games on the web and you love freedom! :)

/tags/jsgamesoup Sun, 12 Jun 2011 14:54 GMT
FallingGame jsGameSoup demo - updated entries/fallinggame-jsgamesoup-demo Update: There appears to be some weird bug on WebKit (at least in Chrome) making objects randomly not get drawn in both demos. Will have to figure this one out!

Update 2: The WebKit bug is now fixed and was due to the strage fact that Array.sort is unstable in WebKit - one to remember. Have fun!

jsGameSoup logo - a bowl and chopsticks

Here's another demo built using my HTML5 and Javascript game engine, jsGameSoup.

I also updated the AsteroidsTNG demo to support collisions so that the ship no longer passes through the asteroids.

I'm finding it pretty fun to fly around this almost infinite asteroid field finding interesting little places amongst the virtual space rocks. I really want to add some kind of multiplayer component to this demo.

After these changes jsGameSoup now has the following new features:

  • Collision engine with support for circle, poly, and axis-aligned bounding-box (rectangle) collisions.
  • Sprite engine which is capable of basic animation.
  • Seedable random number generator, useful for procedurally generated worlds where you want the same seed to generate the same thing for everyone every time.
  • Basic support for touch on WebKit browsers (like in the iPad and Android devices).

The collision, sprite, and random number engines are each simple and self-contained, and can be used independently of the jsGameSoup library by just including the respective javascript file in your project. If you use the library though, you also get cross platform events and robust entity management thrown in for free.

Unfortunately I still haven't updated the documentation or the jsGameSoup page to reflect these changes. Whoops!

/tags/jsgamesoup Sat, 06 Nov 2010 02:08 GMT
GameJam August 2010 entries/gamejam-august-2010 This weekend I have competed in Simon Wittber's GameJam. It's been a fun couple of days and nights hanging out with other nerds, programming video games. I used my Javascript/HTML5 games library jsGameSoup which meant I got the first working iteration of the game up and running after about four hours on Friday night. Saturday afternoon I polished it and tweaked the game mechanic with some good suggestions from Jack, Simon, Nick, and Jason. This afternoon I spent a few minutes getting it online and fixing bugs.

Anyway, here is a link to the game, PingZinger. I would love to hear what you think!

The theme of the game was "choose two at the expense of the other," which should give you some clue as to how to play the game.

Have fun!

/tags/jsgamesoup Sun, 08 Aug 2010 06:25 GMT
A virtually infinite asteroid field entries/a-virtually-infinite-asteroid-field update: Oh wow, I completely forgot that there is already an awesome indie game called Dyson, thanks for reminding me, Dan!

Here's another AsteroidsTNG prototype. This asteroid field goes on until MAXFLOAT before looping (I think) and it contains up to 2^32 unique asteroids. I had to remove the collision detection, so you can fly through asteroids, but don't let that stop you from exploring! Oh wow, I just tested this on Internet Explorer and it runs hellishly slow. Sorry IE user, whoever you are. :(

(click on the image to play)

I think if I was ever to turn this into a proper game, I would call it Dyson, after the physicist Freeman Dyson who came up with the concept of the Dyson tree, which I would hope to work into the game. A short time ago I had the great fortune of briefly meeting Freeman Dyson's daughter and tech luminary, Esther Dyson, source of the following great piece of advice:

"Fail cheap. Fail fast. Fail often. Always make new mistakes." -Esther Dyson

I am a huge fan of this philosophy, especially when it comes to rapidly prototyping software and games.

This game was written inside the jsGameSoup framework.

Writing games for javascript and the canvas tag feels a bit like being an eight year old again, trying to squeeze every last cpu cycle out of my parents' Apple //e. Good times!

/tags/jsgamesoup Sun, 13 Sep 2009 21:02 GMT
jsGameSoup homepage and documentation entries/jsgamesoup-homepage-and-documentation I've been doing a lot of really boring, but neccessary work on the documentation for jsGameSoup, the Free Software library/framework I've been writing so that I can make web based games without using Flash. So here it is (click on the image below). Enjoy!

jsGameSoup link image

/tags/jsgamesoup Sat, 18 Jul 2009 18:36 GMT
Javascript games library; Asteroids game progress entries/javascript-games-library-asteroids-game-progress I did a little bit more work on the Javascript games library that I've been working on recently, adding rudimentary collision detection. It needs quite a bit more work, but I'm getting there slowly. That allowed me to put shooting into the little asteroids-like game that I'm using to test the framework. Click on the image to play.

AsteroidsTNG revision 41

I've also been doing a bit of work on the documentation of jsGameSoup so that other people can start using it more effectively. I got jsDoc running, producing documentation from the comments in the code. I need to get that documentation online and make a nice little mini-site like the great flixel one at some stage. I've also started documenting reasons why a game developer might like to use jsGameSoup:

  • If you make a game for the web, it will run everywhere, for everyone. Desktops, netbooks, games consoles, hand-held devices " developers the largest user base of any platform."
  • jsGameSoup runs on the major current generation browser engines, including Internet Explorer, Firefox (gecko), and Safari (WebKit).
  • jsGameSoup relies on open standards and protocols, which means it runs in the lowest-common-demoninator places where proprietary technologies won't run.
  • jsGameSoup is Free Software, which means that the users and developers (that's you) will have control over its future, unlike proprietary technologies such as Flash and Silverlight.

Here are some of the things that are not yet supported by jsGameSoup, but which I am looking to support soon:

  • Documentation - I've started on this, but I need to get it online with lots of demos and examples.
  • Bitmap graphics - The canvas element is the basis of jsGameSoup and it supports bitmap graphics, but I haven't tested how it performs yet on all of the browsers.
  • Collision detection - I have implemented very naive bruteforce collision detection. I need to implement the more complex collision detection system I have in mind in order for it to scale up to games with more entities.
  • Sprite/Animation - I'd like to add vector and bitmap sprite management and animation to jsGameSoup to make it easier to draw and manage on-screen entities.
  • Networking - I will probably make a separate Javascript library with a Python based server for plugging into jsGamesoup to write multiplayer games with it. I have written a couple of Python based game/web servers before, so I have some idea of a good architecture for that.
  • Inheritance - I am thinking about adding John Resig's Simple Javascript Inheritance to the library to make it easier to code in an object oriented style. Maybe this is best left as an optional plugin though.

Taking all that into account, you can see from the AsteroidsTNG demo that you can make basic 2d games using jsGameSoup already, and they will run in the major browsers.

jsGameSoup is LGPLv3 and AsteroidsTNG is GPLv3. Here is their source code:

or bazaar:

bzr branch

or bazaar:

bzr branch
/tags/jsgamesoup Thu, 09 Jul 2009 21:38 GMT
Web based game library progress entries/web-based-game-library-progress This weekend, in between watching Captain Picard versus Gandalf and having a birthday drink, I somehow managed to find some time to work on my web based games library, currently tentatively named 'JSGameSoup'. Click through the image to try out a little demo which uses it:

AsteroidsTNG revision 40

This demo doesn't do that much except let you fly around, but you can see where it's leading, and what the library is basically capable of. The idea is to make a Free Software game development environment which can be trivially deployed to web browsers and portable devices like Android, Nintendo DS, etc. I want to keep it completely free of proprietary technologies so that people don't have to rely on Flash, for example, to develop games for the web and beyond. I am pretty excited with how things are going. So far it seems to work well and speedily with the three majority rendering engines; Gecko, IE, and that KHTML fork that some company started. In other words, the demo runs with acceptible quality and speed on the majority of operating systems in the majority of browsers, with no fiddly tweaking - Hooray! \o/

Even though I've only just started doing it, I am really liking this new way of making and releasing games and game libraries, where I get to release them right here on this blog to you, the three people who read it. :) I really need to set up comments here as well, so I can actually get some feedback on the releases (but please feel free to email me). I think the fact that making games feels fun again, is a very good sign that I'm on the right track.

Anyway, as usual, here is the source code:

or if you are a bazaar user:

bzr branch

or the repo:

bzr branch

JSGameSoup is LGPLv3 and AsteroidsTNG is GPLv3.

The code of the Asteroids themselves is quite similar to what I posted before, except that it uses canvas commands now, instead of processingjs commands to draw. Here's the code that drives the ship:

function Ship(world) { = world; = this;
    this.x = gs.width / 2;
    this.y = gs.height / 2;
    this.angle = 0;
    this.speed = 0;
    this.points = [[0, -13], [-7, 7], [7, 7]];
    this.poly = [];
    this.lastsmoke = null;

    this.keyHeld_37 = this.keyDown_37 = function () {
        this.angle -= 0.1;

    this.keyHeld_39 = this.keyDown_39 = function () {
        this.angle += 0.1;

    this.keyDown_38 = function () {
        this.speed = 1;

    this.keyHeld_38 = function () {
        if (this.speed < 3.0)
            this.speed += 0.3;

    this.keyDown = function (keyCode) {

    this.update = function() {
        if (this.speed > 0.1)
            this.speed -= 0.1;
            this.speed = 0;
        this.x = (this.x + this.speed * Math.sin(this.angle) + gs.width) % gs.width;
        this.y = (this.y - this.speed * Math.cos(this.angle) + gs.height) % gs.height;
        for (n=0; n<this.points.length; n++) {
            this.poly[n] = [this.points[n][0] * Math.cos(this.angle) - this.points[n][1] * Math.sin(this.angle) + this.x, this.points[n][0] * Math.sin(this.angle) + this.points[n][1] * Math.cos(this.angle) + this.y];
        if (this.speed && (!gs.inEntities(this.lastsmoke) || gs.distance([this.lastsmoke.x, this.lastsmoke.y], [this.x, this.y]) > 15)) {
            this.lastsmoke = new Smoke(this.x - 9 * Math.sin(this.angle), this.y + 9 * Math.cos(this.angle));

    this.draw = function(c) {
        c.strokeStyle = 'rgba(255, 255, 255, 1.0)';

And here is the object/class defining the little smoke particles which come out of the ship:

function Smoke(x, y) {
    this.x = x;
    this.y = y; = 1.0;

    this.draw = function(c) {
        c.strokeStyle = 'rgba(200, 200, 200, ' + + ')';
        c.arc(this.x, this.y, 2, 0, Math.PI*2, true);

    this.update = function() { -= 0.08;
        if ( < 0)
   = 0.01;

The whole game is launched like this, where gs is the JSGameSoup() object that is automatically created by the framework:

w = new World();
gs.addEntity(new Ship(w));
for (n=0; n<3; n++) {
    gs.addEntity(new Asteroid(w));

To me this code feels like it does quite a lot for just a little bit of work, and that's always nice.

/tags/jsgamesoup Mon, 29 Jun 2009 17:08 GMT