Home

Requirements

First step is to make sure all the required files are included on the page that will display the game:

1. jQuery: Version 2.0.3 is recommended, anyway, v1.7 or higher should do the trick (note: jQuery 2 isn't compatible with IE8 or older).
2. GoL Plugin: The script for the Game of Life - jQuery Plugin.
3. That's it!

Basic implementation

This plugin works as an extension of jQuery making the implementation a nice and easy task, this way, any HTML element can be turned into a GoL (Game of Life) grid... but I strongly recommend to use a

element.

The plugin also offers basic interaction, but we will check it out later on this guide.

Let's start creating a new GoL grid into a div element with a "GridContainer** id:

$("div#GridContainer").GoL();

And that's it! Pretty easy huh?

As you can notice, the above code doesn't have any parameters, but don't worry, the plugin will generate a GoL grid anyway using some default values:

• Grid size: 10 x 10 cells (width x height).
• Autoplay: true.
• Speed: 1/3 seconds per "turn".
• Demo Mode: On.
• Demo Pattern: Glider.

Following those default values, your div#GridContainer element will now display a 10x10 GoL grid with a "Glider" moving all around.

You can use an object with a few parameters in order to customize your initial grid:

$("div#GridContainer").GoL({
	grid: [10,10],  // Array: Grid size: 10x10 by default (width x height)
	start: true,    // Boolean: Start after load: true by default
	demo: true,     // Boolean: Display the demo: true by default
	cells: [        // Array: Your initial patter: null by default
		[1,2],
		[2,3],
		[3,1],
		[3,2],
		[3,3]
	],
	speed: 300     // Number: Speed in miliseconds: 300 by default
});

Now, at this point, there are a few notes to take in mind:

1. All values are optional.
2. Loading a GoL two or more times on the same element will not cause a overwrite, the first grid will be updated with the new values instead.
3. The demo will only be displayed when there is no pattern (the "cells" parameter) and if "demo" is set to true.
4. The "grid" parameter accepts only an Array with 2 numbers, with values limited to: 5 <= num <= 150

Now, if you want a blank starting grid (with no demo) you may use:

$("div#GridContainer").GoL({
	grid: [15,15],
	start: false,
	demo: false
});

Drawing Patterns (cells)

The main objective of the GoL is to display patterns of cells that will "come to life" moving along the grid based on the game's rules.

There are 2 ways of "drawing" cells on the grid, the first one (the coding way) is by using the cell parameter:

$("div#GridContainer").GoL({
	cell: [
		[1,2],
		[2,3],
		[3,1],
		[3,2],
		[3,3]
	]
});

The cell parameter is an Array of cells' coordinates; each coordinate is an array of 2 values:

[ rowPosition , columnPosition ]

Note: I know it's backwards... I need to fix that.

The rowPosition and columnPosition must be numbers. Lowest accepted value is 0 (not 1) and highest value is the grid length. Let's say you have a 5x5 grid, the row and column available positions will be 0, 1, 2, 3 and 4.

There is no limit of cells to be displayed on the grid; repeated items will be ignored as well as those coordinates pointing outside the grid.

Manipulation

As I already mentioned on the above notes, loading a GoL more than once on the same element will be interpreted as an update.

Meaning... if you already have a GoL instance on your div#GridContainer element, you can modify the behavior using the same instructions:

$("div#GridContainer").GoL({
	cells:[[1,2],[3,4],[4,2],[1,0]],
	speed: 100
});

Then:

$("div#GridContainer").GoL({
	grid: [25,25],
	start:false
});

Then:

$("div#GridContainer").GoL({
	start: true,
	demo: true
});

And so goes on, anytime you want to make an update.

But hey! There is no use in sending an object with just one parameter... so there is a bunch of shortcuts for common actions:

$("div#GridContainer").GoL("start");   // Starts animation
$("div#GridContainer").GoL("stop");    // Stops animation
$("div#GridContainer").GoL("toggle");  // Toggles animation
$("div#GridContainer").GoL("demo");    // Turns demo on
$("div#GridContainer").GoL("reset");   // Resets grid
$("div#GridContainer").GoL(100);       // Or any Number, changes the speed in miliseconds
$("div#GridContainer").GoL([10,10])    // Or any Array, changes the grid size
$("div#GridContainer").GoL("edit");    // Starts edition mode (See next section)
$("div#GridContainer").GoL("editEnd")  // Finalizes edition mode (See next section)

Edit Mode

Like I said earlier: "There are 2 ways of "drawing" cells on the grid"; well, the second one is actually the "fun way":

I know nobody likes to translate points into coordinates, so, good news! There is an "Edit" feature included on the plugin.

To enter on the "Edit Mode" you just need:

$("div#GridContainer").GoL("edit");

Using the "edit" shortcut on a generated grid (it doesn't work as an initial parameter, you must run the shortcut on a pre-loaded grid) will turn your GoL into a drawing board, where you can click on the cells to switch their state from "live" to "death" and backwards.

Important note: while you are on the "Edit Mode", the GoL will ignore some of the inscructions to avoid messing your on-working-pattern, all the features will be available again once you end the "Edit Mode":

$("div#GridContainer").GoL("editEnd");

The available settings while you are editing are (including their "shortcut" version):

1. grid: To change the grid size.
2. demo: Will print the demo pattern on the grid, but you will be still on "Edit Mode".
3. cells: Will print the specified cells on the grid, but you will be still on "Edit Mode".
4. speed: Will take effect once you leave the "Edit Mode".
5. "reset": Shortcut only, will reset your grid (kill all cells).

Notes

The example contained on this repository is based on this implementation guide, there, you will find some code examples of the most of the above mentioned features.

Please feel free to comment or suggest any improvement for the plugin.

Enjoy!