HTML5 Conway’s Game of Life

I have created a HTML5 version of the Conway’s Game of Life.

The “game” is a zero-player game, meaning that its evolution is determined by its initial configuration and does not require any other input. The “game” is based in a grid with cells. Each cell has only 2 states: alive and dead. There are only 4 rules that determines how the game evolves:

  1. Any live cell with fewer than two live neighbours dies, as if caused by under-population.
  2. Any live cell with two or three live neighbours lives on to the next generation.
  3. Any live cell with more than three live neighbours dies, as if by overcrowding.
  4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

You can try it here.

I used javascript, knockout and Jasmine and the source code is available on my Github.



Scrolling background on Canvas

In this post I will show how to implement a scrolling background on the canvas.

Actually this is something very easy to achieve. The trick is that we have to draw the image twice, one for the top of the image and the second for the remaining part.

If you want, you can see the final result here and the source code on my Github page.

We start with the window onload event. We check if canvas is supported, if not we send an alert.

window.onload = function () {
 // get canvas
 var canvas = document.getElementById('canvas');
 // get context
 var ctx = canvas.getContext && canvas.getContext('2d');
 if(!ctx) {
 alert("Your browser is not supported!");
 } else {
 // start
 start(canvas, ctx);

After checking that the canvas is supported we start by loading the image.

var start = function (canvas, ctx) {
 // load image
 var img = new Image();
 img.onload = function () {
 // start animation
 animateBg(canvas,ctx, img);
 img.src = 'lib/img/starBackground.png';

As you can see, we set a callback to run on the image onload event.

On this event we call our function that is responsible for the animation.

var animateBg = function (canvas, ctx, img) {
 // properties
 var y = 0;
 var speed = 2;
 var ch = canvas.height;
 var cw = canvas.width;

// our loop
 setInterval(function () {
 // draw botom part
 ctx.drawImage(img, 0, 0, cw, ch, 0, y, cw, ch);

// draw remaining part
 ctx.drawImage(img, 0, ch-y, cw, ch, 0, 0, cw, ch);

// increment y or reset y if reached the bottom
 y = y < ch ? y + speed : 0;
 }, 1000/30);

In this function, first we get some properties, the Y position of the image (set to 0 initially), the speed of the animation and the canvas size. Next I use the setInterval function to create the animation loop (which is not the best way, but for our demo it works just fine). In the loop, first we draw the bottom and then the remaining part. Finally we reset the Y if we reached the bottom of the canvas.

Oops, too fast? Ok, let just take a look at the drawImage. We are using all the parameters that the function provide to us.

void drawImage(
 in nsIDOMElement image, // the image
 in float sx, // source coordinate X
 in float sy, // source coordinate Y
 in float sw, // source width
 in float sh, // source height
 in float dx, // destination coordinate X
 in float dy, // destination coordinate Y
 in float dw, // destination width
 in float dh // destination height

So, for the top, the only thing that changes with time is the destination Y coordinate.

For the remaining part the only thing that changes with time is source coordinate Y, which will be the canvas height – Y coordinate.

And that is all we need to set up a scrolling background!