Conway's Game of Life implemented in HTML5 canvas.
See a full demo at http://www.julianpulgarin.com/canvaslife/, including over 1200 interesting patterns.
To start with, you need to include jQuery, and
canvaslife.js, like so:
<head> … <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> <script src="http://jpulgarin.github.com/canvaslife/canvaslife.js"></script> … </head>
You also need a
<canvas> element which canvaslife.js will use to display the grid of cells:
<body> … <canvas id="universe" width="900" height="500"> … </body>
Finally you need to initialize the Game of Life Universe and tell it which canvas element to use, like so:
You can populate the grid by click and dragging your mouse to revive/kill cells.
'life' object properties
life.xCells - Number of cells per row.
life.yCells - Number of cells per column.
life.speed - An integer representing the speed at which the universe is evolving.
1000 being the slowest, and
0 being the fastest.
life.universe - A two dimensional array of booleans, representing the current alive/dead state of all cells in the universe. When making changes to this array ensure that
false so that your changes are not overriden by the next generation being calculated.
'life' object methods
life.initUniverse(canvasSelector) - Initializes a Game of Life universe.
canvasSelector should be a jQuery selector that matches to the desired canvas element.
life.loadPattern(url) - Loads a Run Length Encoded format Game of Life pattern file from the specified
url into the universe.
life.toggleLife() - Toggle whether the universe is in an envolving or static state.
life.isAlive() - Returns
true if the universe is evolving, and
false if it is static.
life.nextGen() - Evolve the universe one generation forward.
life.clear() - Kills all cells in the universe.
life.changeSpeed(faster) - Increases the speed of the universe if
true, and decreases it if
'graphics' object methods
graphics.paint() - Paint the current state of the universe.