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.

 

Advertisements

Unity 2D

If you’ve been following my blog, you know that I’ve started with game development a few months ago.

I started with Javascript engines but, this time I tried something different. I started with Unity engine!

Unity 4.3 was launched with a new feature.. the 2D! So, I gave it a shot and I loved it! You really feel that you are working with a professional tool for developing games. I’ve started developing another clone of Flappy Bird that you can play here.

 

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!

ImpactJS – how classes work

As you know, in Javascript there is no traditional class structure as on classical OOP languages.

So, how does ImpactJS structures its code? Well, it has a pseudo-class  object, which is the basis for every class we create on the game.

This is based on John Resig’s simple JavaScript inheritance code

Here is an example of how it looks like:


// Create a new class "Player"
var Player = ig.Class.extend({
 name: '',
 init: function( name ) {
 this.name = name;
 }
});

// Instantiate an object of the Player class
var e = new Person('Nuno');
console.log(e.name); // logs Nuno

All classes that are created with .extend() will also have an .extend() method that can be used to create other subclasses.

Inside of extended classes, we can use .this and .parent for scope. And very shortly, this is how ImpactJS structures its code in classes almost as a traditional OOP language.

Impactjs a JavaScript Game Engine

Hi all,

My new adventure is development of HTML5 and Javascript games.

After reading a lot about HTML5 and Javascript games I understood that the best thing would be to use a game engine framework.

The question is which one would be the best choice? With the proliferation of Javascript game engines this is not an easy task. So I started with CraftyJS. I think this is a good choice for someone that is starting with game development but, I felt that it lacks a few things. So I kept with my research and testing and I opt for ImpactJS. Even though it is not free, I felt it was better for me. Why did I choose it:

  • Good support
  • Lot of open source games
  • Includes a game level editor
  • Includes a publishing tool for iOS App Store with native-like performance
  • Books with source code
  • Well maintained and updated
  • Good community

And for these reason it was my choice for future game development. I will keep posting whenever I have news on this.