Adding Buttons

- Create 3 Buttons in the HTML file - Create EventListeners for these Buttons - Create 2 new functions (play and pause) - Create 2 new properties to the G_Matrix.config Object: (isRunning and initialState) - Amend the animate function so that is behaves differently depending on G_Matrix.config
joehakimrahme · Nov 23, 2021 · 1c708c6 · 1c708c6
1 parent dae3465
commit 1c708c6
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 22 deletions.
diff --git a/game.js b/game.js
@@ -15,27 +15,29 @@ var G_MATRIX = {
                            // relative to the beginning of the canvas.
 
         refresh_rate: 1000 / 60, // speed of evolution of the game (in ms)
+
+        isRunning : false,
+
+        initialState: true
     },
 
     get_cell_value: function (i, j) {
 
         if (i<0) {
             i += this.config.matsize;
-	}
+        }
 
         if (i >= this.config.matsize) {
             i -= this.config.matsize;
-	}
-	
+        }
+ 
         if (j < 0) {
             j += this.config.matsize;
-	}
+        }
 
         if (j >= this.config.matsize) {
             j -= this.config.matsize;
-	}
-
-
+        }
         return this.cells[i + j*this.config.matsize];
     },
 
@@ -56,7 +58,7 @@ var G_MATRIX = {
                 if (this.config.stroked)
                     context.stroke();
 
-		context.closePath();
+                context.closePath();
 
                 x += this.config.cellsize;
             }
@@ -147,8 +149,10 @@ window.requestAnimFrame = (function(callback) {
 
 function animate (canvas) {
 
+    var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext('2d');
 
+    if (G_MATRIX.config.isRunning) {
     context.clearRect(0, 0, canvas.width, canvas.height);
 
     G_MATRIX.draw(context);
@@ -159,16 +163,36 @@ function animate (canvas) {
     requestAnimFrame(function() {
         animate(canvas);
     });
+  } else {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    G_MATRIX.draw(context);
+    G_MATRIX.next_iteration();
+  }
 }
-
 
-window.onload = function () {
-    var canvas = document.getElementById('myCanvas');
-
-    // random initial state
-    //G_MATRIX.blink();
+function play() {
+  if (G_MATRIX.config.initialState) {
+    var canvas = document.getElementById("myCanvas");
     G_MATRIX.init();
-
-    // launch animation
+    G_MATRIX.config.isRunning = true;
     animate(canvas);
-};
+    G_MATRIX.config.initialState = false;
+  } else {
+    var canvas = document.getElementById("myCanvas");
+    G_MATRIX.next_iteration();
+    G_MATRIX.config.isRunning = true;
+    animate(canvas);
+  }
+}
+
+function pause() {
+  var canvas = document.getElementById("myCanvas");
+  G_MATRIX.config.isRunning = false;
+  animate(canvas);
+}
+
+document.getElementById("playButton").addEventListener("click", play);
+document.getElementById("pauseButton").addEventListener("click", pause);
+document.getElementById("resetButton").addEventListener("click", function () {
+  location.reload();
+});
diff --git a/index.html b/index.html
@@ -4,15 +4,41 @@
     <meta charset="utf-8" />
     <title>Conway's Game of Life</title>
     <style type="text/css" media="screen">
-      #myCanvas{
-    	border: 1px solid #9c9898;
+      #myCanvas {
+        border: 1px solid #9c9898;
+      }
+
+      body {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        height: 100vh;
+      }
+
+      main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 400px;
+      }
+
+      canvas {
+        margin-bottom: 2rem;
       }
     </style>
-    <script type="text/javascript" src="game.js"></script>
   </head>
 
   <body>
-    <h1>Conway's Game of Life</h1>
-    <canvas id="myCanvas" width="1000" height="750"></canvas>
+    <main>
+      <h1>Conway's Game of Life</h1>
+      <canvas id="myCanvas" width="200" height="200"></canvas>
+      <div>
+        <button id="playButton">Play</button>
+        <button id="pauseButton">Pause</button>
+        <button id="resetButton">Reset</button>
+      </div>
+    </main>
+    <script type="text/javascript" src="game.js"></script>
   </body>
 </html>