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!

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

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

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.

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!

• 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.

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() {
    statemachine(this);
    ...
}

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() {
    this.set_state("wandering");
}

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.

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).

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 jsgamesoup.net - 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!

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!

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!

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!

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!

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!

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!

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

jsgamesoup-46.zip

or bazaar:

bzr branch http://mccormick.cx/dev/jsgamesoup/

AsteroidsTNG-41.zip

or bazaar:

bzr branch http://mccormick.cx/dev/AsteroidsTNG/

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:

jsgamesoup-39.zip

or if you are a bazaar user:

bzr branch http://mccormick.cx/dev/jsgamesoup/

AsteroidsTNG-40.zip

or the repo:

bzr branch http://mccormick.cx/dev/AsteroidsTNG/

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) {
    this.world = world;
    this.world.player = 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) {
        //console.log(keyCode);
    }

    this.update = function() {
        if (this.speed > 0.1)
            this.speed -= 0.1;
        else
            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));
            gs.addEntity(this.lastsmoke);
        }
    }

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

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;
    this.life = 1.0;

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

    this.update = function() {
        this.life -= 0.08;
        if (this.life < 0)
        {
            gs.delEntity(this);
            this.life = 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(w);
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.