Introduction

The game of Conway is one of the examples of games because it's related to cellular automata. The game of life also called simply life. The game of Conway is a board game. In these games follow many different types of patterns occur in the game of life. In more common cases it is impossible to look at a starting position or pattern and see what will happen in the future. Here we find a way to find out is to follow the rules of the game.
There are some rules which as follows :
Step 1: Open any HTML editor (ex. Visual Studio, Notepad, etc) and in the source code page (the page where you want to write the HTML code) type the following lines.
Here first of all, given a title.
  1. <!doctype html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><link rel="stylesheet" href="css/site.css" type="text/css" media="screen" /><title>Conway's Game of Life</title>
Step 2: This step is writing the canvas tags with a default message in the case when the user's browser does not support it. So, apply this condition.
  1. else {
  2. alert("Canvas is unsupported in your browser.");
  3. }
Step 3: The given code works on there things simply.
  1. < script type = "text/javascript" >
  2. $(document).ready(
  3. function() {
  4. Array.matrix = function(m, n, initial) {
  5. var a, i, j, mat = [];
  6. for (i = 0; i < m; i += 1) {
  7. a = [];
  8. for (j = 0; j < n; j += 1) {
  9. a[j] = 0;
  10. }
  11. mat[i] = a;
  12. }
  13. return mat;
  14. };
  15. var Life = {};
  16. Life.CELL_SIZE = 8;
  17. Life.X = 576;
  18. Life.Y = 320;
  19. Life.WIDTH = Life.X / Life.CELL_SIZE;
  20. Life.HEIGHT = Life.Y / Life.CELL_SIZE;
  21. Life.DEAD = 0;
  22. Life.ALIVE = 1;
  23. Life.DELAY = 500;
  24. Life.STOPPED = 0;
  25. Life.RUNNING = 1;
  26. Life.minimum = 2;
  27. Life.maximum = 3;
  28. Life.spawn = 3;
  29. Life.state = Life.STOPPED;
  30. Life.interval = null;
  31. Life.grid = Array.matrix(Life.HEIGHT, Life.WIDTH, 0);
  32. Life.counter = 0;
  33. Life.updateState = function() {
  34. var neighbours;
  35. var nextGenerationGrid = Array.matrix(Life.HEIGHT, Life.WIDTH, 0);
  36. for (var h = 0; h < Life.HEIGHT; h++) {
  37. for (var w = 0; w < Life.WIDTH; w++) {
  38. neighbours = Life.calculateNeighbours(h, w);
  39. if (Life.grid[h][w] !== Life.DEAD) {
  40. if ((neighbours >= Life.minimum) && (neighbours <= Life.maximum)) {
  41. nextGenerationGrid[h][w] = Life.ALIVE;
  42. }
  43. } else {
  44. if (neighbours === Life.spawn) {
  45. nextGenerationGrid[h][w] = Life.ALIVE;
  46. }
  47. }
  48. }
  49. }
  50. Life.copyGrid(nextGenerationGrid, Life.grid);
  51. Life.counter++;
  52. };
  53. Life.calculateNeighbours = function(y, x) {
  54. var total = (Life.grid[y][x] !== Life.DEAD) ? -1 : 0;
  55. for (var h = -1; h <= 1; h++) {
  56. for (var w = -1; w <= 1; w++) {
  57. if (Life.grid[(Life.HEIGHT + (y + h)) % Life.HEIGHT][(Life.WIDTH + (x + w)) % Life.WIDTH] !== Life.DEAD) {
  58. total++;
  59. }
  60. }
  61. }
  62. return total;
  63. };
  64. Life.copyGrid = function(source, destination) {
  65. for (var h = 0; h < Life.HEIGHT; h++) {
  66. /*
  67. for (var w = 0; w < Life.WIDTH; w++) {
  68. destination[h][w] = source[h][w];
  69. }
  70. */
  71. destination[h] = source[h].slice(0);
  72. }
  73. };
  74. function Cell(row, column) {
  75. this.row = row;
  76. this.column = column;
  77. };
  78. var gridCanvas = document.getElementById('grid');
  79. var counterSpan = document.getElementById("counter");
  80. var controlLink = document.getElementById("controlLink");
  81. var clearLink = document.getElementById("clearLink");
  82. var minimumSelect = document.getElementById("minimumSelect");
  83. var maximumSelect = document.getElementById("maximumSelect");
  84. var spawnSelect = document.getElementById("spawnSelect");
  85. controlLink.onclick = function() {
  86. switch (Life.state) {
  87. case Life.STOPPED:
  88. Life.interval = setInterval(function() {
  89. update();
  90. }, Life.DELAY);
  91. Life.state = Life.RUNNING;
  92. break;
  93. default:
  94. clearInterval(Life.interval);
  95. Life.state = Life.STOPPED;
  96. }
  97. };
  98. clearLink.onclick = function() {
  99. Life.grid = Array.matrix(Life.HEIGHT, Life.WIDTH, 0);
  100. Life.counter = 0;
  101. clearInterval(Life.interval);
  102. Life.state = Life.STOPPED;
  103. updateAnimations();
  104. }
  105. minimumSelect.onchange = function() {
  106. clearInterval(Life.interval);
  107. Life.state = Life.STOPPED;
  108. Life.minimum = minimumSelect.value;
  109. updateAnimations();
  110. }
  111. maximumSelect.onchange = function() {
  112. clearInterval(Life.interval);
  113. Life.state = Life.STOPPED;
  114. Life.maximum = maximumSelect.value;
  115. updateAnimations();
  116. }
  117. spawnSelect.onchange = function() {
  118. clearInterval(Life.interval);
  119. Life.state = Life.STOPPED;
  120. Life.spawn = spawnSelect.value;
  121. updateAnimations();
  122. }
  124. function update() {
  125. Life.updateState();
  126. //updateInput();
  127. //updateAI();
  128. //updatePhysics();
  129. updateAnimations();
  130. //updateSound();
  131. //updateVideo();
  132. };
  133. function updateAnimations() {
  134. for (var h = 0; h < Life.HEIGHT; h++) {
  135. for (var w = 0; w < Life.WIDTH; w++) {
  136. if (Life.grid[h][w] === Life.ALIVE) {
  137. context.fillStyle = "#000";
  138. } else {
  139. context.fillStyle = "#FF0000";
  140. //context.clearRect();
  141. }
  142. context.fillRect(
  143. w * Life.CELL_SIZE + 1,
  144. h * Life.CELL_SIZE + 1,
  145. Life.CELL_SIZE - 1,
  146. Life.CELL_SIZE - 1);
  147. }
  148. }
  149. counterSpan.innerHTML = Life.counter;
  150. };
  151. if (gridCanvas.getContext) {
  152. var context = gridCanvas.getContext('2d');
  153. var offset = Life.CELL_SIZE;
  154. for (var x = 0; x <= Life.X; x += Life.CELL_SIZE) {
  155. context.moveTo(0.5 + x, 0);
  156. context.lineTo(0.5 + x, Life.Y);
  157. }
  158. for (var y = 0; y <= Life.Y; y += Life.CELL_SIZE) {
  159. context.moveTo(0, 0.5 + y);
  160. context.lineTo(Life.X, 0.5 + y);
  161. }
  162. context.strokeStyle = "#254117";
  163. context.stroke();
  164. function canvasOnClickHandler(event) {
  165. var cell = getCursorPosition(event);
  166. var state = Life.grid[cell.row][cell.column] == Life.ALIVE ? Life.DEAD : Life.ALIVE;
  167. Life.grid[cell.row][cell.column] = state;
  168. updateAnimations();
  169. };
  170. function getCursorPosition(event) {
  171. var x;
  172. var y;
  173. if (event.pageX || event.pageY) {
  174. x = event.pageX;
  175. y = event.pageY;
  176. } else {
  177. x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  178. y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  179. }
  180. x -= gridCanvas.offsetLeft;
  181. y -= gridCanvas.offsetTop;
  182. var cell = new Cell(Math.floor((y - 4) / Life.CELL_SIZE), Math.floor((x - 2) / Life.CELL_SIZE));
  183. return cell;
  184. };
  185. gridCanvas.addEventListener("click", canvasOnClickHandler, false);
  186. } else {
  187. alert("Canvas is unsupported in your browser.");
  188. }
  189. }
  190. );
  191. function minimumSelect_onclick() {
  192. } <
  193. /script><
  194. script type = "text/javascript" >
  195. var _gaq = _gaq || [];
  196. _gaq.push(['_setAccount', 'UA-2662092-4']);
  197. _gaq.push(['_trackPageview']);
  198. (function() {
  199. var ga = document.createElement('script');
  200. ga.type = 'text/javascript';
  201. ga.async = true;
  202. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  203. var s = document.getElementsByTagName('script')[0];
  204. s.parentNode.insertBefore(ga, s);
  205. })() <
  206. /script><
  207. script type = "text/javascript" >
  208. var _gaq = _gaq || [];
  209. _gaq.push(['_setAccount', 'UA-2662092-4']);
  210. _gaq.push(['_trackPageview']);
  211. (function() {
  212. var ga = document.createElement('script');
  213. ga.type = 'text/javascript';
  214. ga.async = true;
  215. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  216. var s = document.getElementsByTagName('script')[0];
  217. s.parentNode.insertBefore(ga, s);
  218. })(); <
  219. /script>
Step 4: This application contains body follow the code given below.
  1. <body>
  2. <div id="container">
  3. <div id="header">
  4. <h1>Conway's Game of Life</h1>
  5. </div>
  6. <div id="left-content">
  7. <h2>Game</h2>
  8. <p>Generation counter:
  9. <span id="counter">0</span>
  10. </p>
  11. <canvas id="grid" width="577" height="321"></canvas>
  12. </div>
  13. <div id="right-content">
  14. <h2>Controls</h2>
  15. <a id="controlLink" href="javascript:void(0)">Start/Stop</a>
  16. <br />
  17. <a id="clearLink" href="javascript:void(0)">Clear Grid</a>
  18. <select id="minimumSelect" disabled="disabled" onclick="return minimumSelect_onclick()"></select>
  19. <br />
  20. <select id="maximumSelect" disabled="disabled"></select>
  21. <br />
  22. <select id="spawnSelect" disabled="disabled"></select>
  23. <br />
  24. <p></p>
  25. </div>
  26. </div>
  27. </body>
Step 5: After writing this code the application an run in browser we have to see the figure given below.
conway game.jpg
Step 6: After click on the game board we have to find it.
conwa.jpg
We have to play anything with cells.
conway.jpg
Step 7: With the start/stop button on click and clear the game board with the use of the clear button.
befor run.jpg
After making on cells click on start button we have to find this figure given below.
after run.jpg
Resources
Here are some useful resources: