GAME OF LIFE

Game of Life in Javascript

This is an implementation of J. H. Conway's cellular automata game of life in Javascript where the game board is a topologically a torus. See my design notes for a description of the game and how it is designed.

Your browser does not support the canvas API so I can't show game of life!

Software Architecture

It's in two parts, HTML/CSS for the user interface and the Javascript for the actions.

Preloading the JavaScript

In this HTML file, life.html, we preload the Javascript program gameOfLife.js in the head section.

Canvas, Forms and Controls

First, we set up a page wide canvas for the game board.

Game controls and status buttons are HTML forms. Their styles defined by CSS. The controls have types and ID's to tie them to the Javascript.

• Some fields of the form have their actions call Javascript functions directly. Example: birth and death rule checkboxes.
• Other fields send their handles to into the Javascript upon initialization where they are linked to event listeners. Example: file name box, mouse click on the canvas.
• Still other fields have their contents rewritten by Javascript functions as internal states change. Example: clipboard.

JavaScript Objects

First we create a Game of Life Base Object. It contains the settings and links to DOM elements. Next we create a Game of Life Object from the base object. This object has most of the functions. Due to delegation along the prototype chain, we have access to the base object data and methods. Finally we initialize the Game of Life object as the last step.

• Using the unique id's in the HTML form controls, it gets handles to the canvas, game state, cell state, debug scrollbox, file input form, clipboard, and other HTML elements.
• Creates callback functions, some using closures, tied to form actions, events, etc.
• Creates a timer and registers a single step game function with it.
• There's a bit of minor cleanup where upon loading the body section, we call a function to initialize checkmarks in the game state form.

Download

Source code Version 3.4 is distributed under the terms of the GNU General Public License.

gameOfLife.js	Game of Life implemented in Javascript	View     Download
life.html	HTML code for this page which calls gameOfLife.js	View

Debugging