game-of-life .js

This website is a showcase of Conway's Game of life implemented with the html5 canvas component. Feel free to play around with the board below, or keep reading for details about this implementation.

HINT: try drawing on the board!

To start using game-of-life.js, simply add the single file to your page. You can then start creating <board /> elements that will be automatically replaced with game-of-life boards on page load.

The boards have four buttons to control what is happening:

  • "Step" displays the next generation of the board
  • "Play/Pause" starts or stops the generation loop
  • "Randomize" randomizes every cell on the board (can be pressed while the loop is running)
  • "Erase" makes the whole board empty (it will also pause the generation loop so that you can draw)

Here are some examples of the attributes that can be given to board tags to change how they function

<board gol-static="true" />

gol-static will prevent the user from editing the contents of a board.

<board gol-construct="dancers" />

gol-construct will initize a board with the specified pattern.

The boards will always try to fit their container while keeping an integer amount of pixel for each cell.

<board gol-ratio="20" />

gol-ratio allows to specify the relative thickness of the board

<board gol-width="20" />

gol-width allows to specify the amount of pixels on the board