×
Namespaces

Variants
Actions

HTML5 Canvas example - Game of Life

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (28 Dec 2010)
Last edited: hamishwillee (13 Aug 2012)

This article demonstrates how to use JavaScript and the CANVAS element of HTML5 to display the graphics for the theory called cellular automata, a.k.a. Game of Life. You can find more details about CANVAS at What is Canvas in HTML5

Contents

Game of life rules

The Game of Life uses a set of simple rules:

  • If a cell has either 0 or exactly 1 neighbour, it will die on underpopulation.
  • If a cell has exactly 4 or more neighbours, it will die on overpopulation
  • If an empty space has exactly 3 cells, the empty space will be populated by a new cell.

If none of the specified rules apply the empty space does not change. This means that a cell which is alive remains alive and an empty, unpopulated space will stay empty.

Prerequisites

Web browser supporting HTML5 canvas.

Example code

For this example we will create just one HTML & JavaScript file, starting with a check for if the user's web browser does support HTML5 and canvas.

<head>
<title>HTML5 - Canvas example - Game of Life</title>
</head>
<body>
<div>
<center>
<canvas id="gamearea" width="360" height="360">
Unfortunately your web browser has no canvas support!
</canvas>
</div>
</center>
<script>
// Set global variables
var x = 190;
var y = 160;
var resolution = 4;
var fpms = 400; //Milliseconds
var gamearea_x = x * resolution;
var gamearea_y = y * resolution;
var gametable = new Array(y);
var gametable_copy = new Array(y);
 
for (i = 0; i < y; i++)
{
gametable[i] = new Array(x);
gametable_copy[i] = new Array(x);
}
var randomize = 2000;
var rnd_y,rnd_x;
for (i = 0; i < randomize; i++)
{
rnd_y = Math.floor(Math.random()*y);
rnd_x = Math.floor(Math.random()*x);
gametable[rnd_y][rnd_x] = 1;
}
 
var canvas = document.getElementById('gamearea');
canvas.width = gamearea_x;
canvas.height = gamearea_y;
var context = canvas.getContext('2d');
draw_gametable();
setTimeout("cellular_automata()", fpms);
function cellular_automata()
{
var cells_next_door = 0;
gametable_copy = gametable.clone();
 
for (i = 0; i < y; i++)
{
for (j = 0; j < x; j++)
{
cells_next_door = counter_cells_next_door(i,j);
 
if (cells_next_door < 2)
{
gametable_copy[i][j] = 0;
}
if (cells_next_door > 3)
{
gametable_copy[i][j] = 0;
}
if (cells_next_door == 3)
{
gametable_copy[i][j] = 1;
}
}
}
gametable = gametable_copy.clone();
draw_gametable();
setTimeout("cellular_automata()", fpms);
}
Array.prototype.clone = function ()
{
var temporary = new Array();
for (var property in this)
{
temporary[property] = typeof (this[property]) == 'object' ? this[property].clone() : this[property];
}
return temporary;
}
function counter_cells_next_door(i, j)
{
var counter = 0;
 
if (gametable[i][j-1] == 1) counter++;
if (gametable[i][j+1] == 1) counter++;
if (gametable[i-1] != undefined)
{
if (gametable[i-1][j] == 1) counter++;
if (gametable[i-1][j-1] == 1) counter++;
if (gametable[i-1][j+1] == 1) counter++;
}
if (gametable[i+1] != undefined)
{
if (gametable[i+1][j] == 1) counter++;
if (gametable[i+1][j-1] == 1) counter++;
if (gametable[i+1][j+1] == 1) counter++;
}
return counter;
}
function draw_gametable()
{
for (i = 0; i < y; i++)
{
for (j = 0; j < x; j++)
{
draw_gametable_dot(j, i, gametable[i][j]);
}
}
}
function draw_gametable_dot(i, j, status)
{
var source_x = i * resolution;
var source_y = j * resolution;
if (status == 1)
{
context.fillStyle = '#CCFFCC';
}
else
{
context.fillStyle = '#0E0062';
}
draw_rectangle(context, source_x, source_y, resolution, resolution);
}
function draw_rectangle(context, source_x, source_y, width, height)
{
context.beginPath();
context.rect(source_x, source_y, width, height);
context.closePath();
context.fill();
}
 
</script>
</body>
</html>

Test this example live here

Hit F5 to reload the page, should the show stop.

http://mapswidgets.mobi/examples/HTML5_Example_Game_Of_Life.html

This page was last modified on 13 August 2012, at 02:15.
73 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×