Turning canvas games into executables


This is something I’ve been looking to do for the longest time. The closest I ever got was using Adobe Air. I didn’t like that solution though because it left all of your assets out in the open. Recently a friend reminded me about QT something I haven’t touched in a few years. After looking over some of their webkit examples I realized I could load in embedded resources.. making self contained canvas games.

I tested out my theory using the Fancy Browser sample, and just modifying it to load an embedded html, which include all the code for the game.

So far it works great. I need to do some more tests, such as finding out what dependencies the executable requires, and also what kind of performance I get (QT5 will include V8). This is still pretty cool in my opinion, just another way to monetize HTML5 games :)…. or even… HTML5 screen savers!

JEST another HTML5 Game Framework

I’ve been coming up with small games and demos using canvas for a couple of years now, and over that time I’ve created a framework for doing so. You can see examples in some of my earlier blog posts such as the SOPA game, and the SHMUP thats been in development for a while. Today I decided to pretty some of it up a bit and post it on github. Minified it comes in at only 31k, and provides quite a bit of functionality (I am biased though).

Here is a link to the github repo and the first of many demo’s Ill be posting.

HTML5 Canvas Flood Fill

Messing around in JS today (surprising eh?) making an HTML5 vs of rampart-ish. The more I do the less it becomes like rampart. Today I decied to tackle the flood fill portion which is a major part of the gameplay.

Here is the workhorse function

function floodFill(mapData, x, y, oldVal, newVal){
    var mapWidth = mapData.length,
        mapHeight = mapData[0].length;

        if(oldVal == null){
            oldVal=mapData[x][y];
        }

        if(mapData[x][y] !== oldVal){
            return true;
        }

    mapData[x][y] = newVal;

    if (x > 0){
        floodFill(mapData, x-1, y, oldVal, newVal);
    }

    if(y > 0){
        floodFill(mapData, x, y-1, oldVal, newVal);
    }

    if(x < mapWidth-1){
        floodFill(mapData, x+1, y, oldVal, newVal);
    }

    if(y < mapHeight-1){
        floodFill(mapData, x, y+1, oldVal, newVal);
    }
}

Which is called by doing this

floodFill(map, 3,3,null,2);

map refers to a 2 dimensional array which contains the data, in my case, 0 or 1. The second 2 parameters are the x and y of where to start on the map, null is the initial value to start with, and 2 is the change value parameter, which tells the function to change any tile with the value 0, to 2.

The function is pretty straightforward it recursively checks each points north/south/east/west neighbor until it encounters a neighbors whos value is not 0. Try the code for yourself. I have portions commented out that generate a larger random map to fill for testing purposes. Anything beyond 256×256 has issues within chrome due to stack size restrictions.

Below is the result of the function.

And here is a link to some great information on recursive floodfilling