first commit

gol.js

@@ -0,0 +1,228 @@
+var tRow = 30;
+var tCell = 60;
+var playing = false;
+var grid = new Array(tRow);
+var nextGrid = new Array(tRow);
+var runtime = 400;
+var timer;
+
+function setup() {
+  createGrid();
+  resetGrid();
+  drawTable();
+  control();
+}
+
+function drawTable() {
+  var container = document.getElementById('gridContainer');
+  var table = document.createElement("table")
+
+  for (var x = 0; x < tRow; x++) {
+    var tr = document.createElement("tr");
+    for (var y = 0; y < tCell; y++) {
+      var td = document.createElement("td");
+      td.setAttribute("id", x + "_" + y);
+      td.setAttribute("class", "dead");
+      td.onclick = changer;
+      tr.appendChild(td);
+    }
+    table.appendChild(tr);
+  }
+  container.appendChild(table);
+}
+
+function createGrid() {
+  for (var i = 0; i < tRow; i++) {
+    grid[i] = new Array(tCell);
+    nextGrid[i] = new Array(tCell);
+  }
+}
+
+function resetGrid() {
+  for (var i = 0; i < tRow; i++) {
+    for (var o = 0; o < tCell; o++) {
+      grid[i][o] = 0;
+      nextGrid[i][o] = 0;
+    }
+  }
+}
+
+function changer(){
+  var tds = this.getAttribute("class");
+  var rowcol = this.id.split("_");
+  var row = rowcol[0];
+  var col = rowcol[1];
+
+  if (tds.indexOf("live") > -1 ) {
+      this.setAttribute("class", "dead");
+      grid[row][col] = 0;
+  }
+  else {
+      this.setAttribute("class", "live");
+      grid[row][col] = 1
+  }
+}
+
+function control() {
+  var play = document.getElementById("start");
+  play.onclick = start;
+
+
+  var clean = document.getElementById("clear");
+  clean.onclick = clear;
+}
+
+function start() {
+  if (playing) {
+    this.innerHTML = "continue";
+    playing = false;
+    clearTimeout(timer);
+  }
+  else {
+    this.innerHTML = "pause";
+    playing = true;
+    play();
+  }
+}
+
+function clear() {
+  var button = document.getElementById("start");
+  button.innerHTML = "start";
+  playing = false;
+  var cellsList = document.getElementsByClassName("live");
+  for (var i = 0; i < cellsList.length; i++) {
+      cellsList[i].setAttribute("class", "dead");
+  }
+  resetGrids();
+}
+
+function play() {
+  console.log("Playing the game");
+  computeNextGen();
+  if (playing) {
+    timer = setTimeout(play, runtime);
+  }
+}
+
+function computeNextGen() {
+  for (var i = 0; i < tRow; i++) {
+    for (var j = 0; j < tCell; j++) {
+      applyRules(i, j);
+    }
+  }
+  copyAndResetGrid();
+  updateView();
+
+}
+
+function applyRules(row, col) {
+  var nNeighbors = countNb(row, col);
+  if (grid[row][col] == 1) {
+    if (nNeighbors < 2) {
+      nextGrid[row][col] = 0;
+    }
+    else if (nNeighbors == 2 || nNeighbors == 3) {
+      nextGrid[row][col] = 1;
+    }
+    else if (nNeighbors > 3) {
+      nextGrid[row][col] = 0;
+    }
+  }
+  else if (grid[row][col] == 0) {
+    if (nNeighbors == 3) {
+      nextGrid[row][col] = 1;
+    }
+  }
+}
+
+
+// Any live cell with fewer than two live neighbors dies, as if caused by under-population.
+// Any live cell with two or three live neighbors lives on to the next generation.
+// Any live cell with more than three live neighbors dies, as if by overcrowding.
+// Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
+// 0 0 0 0 0 0
+// 0 1 0 0 0 0
+// 0 0 0 0 0 0
+// 0 0 0 0 0 0
+
+function countNb(row, col) {
+  var count = 0;
+  if (row - 1 >= 0) {
+    if (grid[row - 1][col] == 1) {
+      count++;
+    }
+  }
+  if (row - 1 >= 0 && col - 1 >= 0) {
+    if (grid[row - 1][col - 1] == 1) {
+      count++;
+    }
+  }
+  if (row - 1 >= 0 && col + 1 < tCell) {
+    if (grid[row - 1][col + 1] == 1) {
+      count++;
+    }
+  }
+  if (col - 1 >= 0) {
+    if (grid[row][col - 1] == 1) {
+      count++;
+    }
+  }
+  if (col + 1 < tCell) {
+    if (grid[row][col + 1] == 1) {
+      count++;
+    }
+  }
+  if (row + 1 < tRow   && col - 1 >= 0) {
+    if (grid[row + 1][col - 1] == 1) {
+      count++;
+    }
+  }
+  if (row + 1 < tRow) {
+    if (grid[row + 1][col] == 1) {
+      count++;
+    }
+  }
+  if (row + 1 < tRow && col + 1 < tCell){
+    if (grid[row + 1][col + 1] == 1) {
+      count++;
+    }
+  }
+  return count;
+}
+
+function copyAndResetGrid() {
+  for (var i = 0; i < tRow; i++) {
+    for (var j = 0; j < tCell; j++) {
+      grid[i][j] = nextGrid[i][j];
+      nextGrid[i][j] = 0;
+    }
+  }
+}
+
+function updateView(){
+  for (var i = 0; i < tRow; i++) {
+    for (var j = 0; j < tCell; j++) {
+      var cell = document.getElementById(i + "_" + j);
+      if (grid[i][j] == 0) {
+        cell.setAttribute("class", "dead");
+      }
+      else {
+        cell.setAttribute("class", "live");
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+window.onload = setup();

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset = "UTF-8"/>
+    <title>The Game of Life</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+
+<div id="gridContainer"> </div>
+
+<div class="controls">
+  <button id="start">start</button>
+  <button id="clear">clear</button>
+</div>
+
+<script src="gol.js"></script>
+
+</body>
+</html>

main.css

@@ -0,0 +1,23 @@
+
+body {
+    padding: 20px;
+    background-color: #444;
+}
+#gridContainer {
+    padding-bottom: 10px;
+}
+table {
+    background-color: gray;
+    border-spacing: 0px;
+}
+td {
+    border: 1px solid rgb(90, 90, 90);
+    width: 20px;
+    height: 20px;
+}
+td.dead {
+    background-color: transparent;
+}
+td.live {
+    background-color: white;
+}