Game of Life by Ninjihaku

HTML5 Canvas game of life

by Dr. Ninjimonimous

HTML

<center>
  <h1>The game of life in HTML5 </h1><small>By Ninjihaku</small></center>
<center>
  <canvas id="myCanvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
</center>
<center>
  <input type="button" value="Start" id="start" />
  <input type="button" value="Clear" id="clear" />
  <input type="button" value="Random" id="random" />
  <center/>
  <center>Grid size:
    <input type="range" id="csz" min="1" max="100" />
    <label id="zoom">13</label>
  </center>
  <br/>
  <center>Timer:
    <input type="range" id="tmr" min="20" max="2000" interval="100" />
    <label id="tmrz">100</label>
  </center>
  <center>
    <form>
      <input type="checkbox" id="sgrd" checked>Show grid
      <input type="checkbox" id="colrs" checked>Fancy Colors
      <br>
    </form>
    <br/>
    <textarea id="mdata" cols=50 rows=10></textarea>
    <br/>
    <center>
      <input type="button" value="Load" id="ldata">
      <input type="button" value="Generate" id="gdata" />
    </center><br/>
    <center>
    <p>Click on each square to create or destroy a cell. Click on Start to run the simulation. Alternatively, you can use a script into the textbox to load a simulation. Click on Generate to get the script for the current frame of the simulation.</p>
    <p>
    Available instructions:
    <ul>
    <li>grid [size] > Initialize the grid. Each square will be [size] pixels long.</li>
    <li>add [x][y] > Adds a cell at the coordinates [x] and [y].</li>
    <li>rem [x][y] > Removes a cell at the coordinates [x] and [y].</li>
    <li>block [x1][y1][x2][y2] > Creates a block of cells from [x1][y1] to [x2][y2]</li>
        <li>hollow [x1][y1][x2][y2] > Creates a hollow block of cells from [x1][y1] to [x2][y2]</li>
    <li>line [x1][y1][x2][y2] > Creates a line of cells from [x1][y1] to [x2][y2]</li>
    <li>You can comment a line using a # at the beginning of the line.</li>
    </ul>
    </p></center>

CSS

body {
  background: #000;
  color: #aaa;
}

canvas {
-webkit-box-shadow: -1px 0px 24px 3px rgba(29,79,122,1);
-moz-box-shadow: -1px 0px 24px 3px rgba(29,79,122,1);
box-shadow: -1px 0px 24px 3px rgba(29,79,122,1);
border-radius: 15px;
}

textarea {
  background: #00141e;
  color: #003c79;
  font-family: "Courier New", Courier, monospace;
}

JavaScript

/* This script relies on JQuery for certain stuff. */
/* Click on each square to create or kill a cell. Click on Start to start the simulation.
		?Each cell must be surounded by at least other 2 cells to survive.
    ?Cells surounded by 4 or more cells will die of overpopulation.
    ?Cells surounded by 1 or no cells will die of solitude.
    ?If a dead cell is surounded by 3 cells, it will give birth to another cell.

*/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var dimensions = (c.width + c.height) / 2; //Dimension of the canvas, in pixels.
var ced = 13; //Dimension of a grid square
var ls = Math.ceil(dimensions / ced); //How many squares per row / column
var squares = Math.pow(Math.ceil(dimensions / ced), 2); //How many squares in the entire canvas
var cells = new Array(squares); // Array of cells
var simulating = false; //Is the simulation running?
var times = 100; //Time interval between updates (in ms)
var showgrid = true; // Show the grid?
var usecolors = true;

var ccr = 0x0;
var ccg = 0x4c;
var ccb = 0x99;

/* Function that converts decimal numbers into an hex string with padding */
function decimalToHex(d, padding) {
  var hex = Number(d).toString(16);
  padding = typeof(padding) === "undefined" || padding === null ? padding = 2 : padding;

  while (hex.length < padding) {
    hex = "0" + hex;
  }

  return hex;
}

/* Function that creates an array */
function createArray(length) {
  var arr = new Array(length || 0),
    i = length;

  if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while (i--) arr[length - 1 - i] = createArray.apply(this, args);
  }

  return arr;
}

// Creates the array of cells
var cells = createArray(ls, ls);

/* Function to draw the background */
function drawbackground() {
  //Background color

  if (usecolors) {
    var grd = ctx.createLinearGradient(0, 0, 0, dimensions);
    grd.addColorStop(0, "black");
    grd.addColorStop(1, "#00141e");

   ...