add pause funtionality

drj17 · May 10, 2017 · 2fb35b7 · 2fb35b7
1 parent 10a39a5
commit 2fb35b7
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html>
   <head>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
-    <link rel="icon" href=".at/favicon.ico" type="image/x-icon">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <meta charset="utf-8">
     <title>Cytosis</title>
@@ -20,6 +19,7 @@ <h1>Welcome to Cytosis!</h1>
           <li>Flashing bacteria (including you!) are invulnerable</li>
           <li>Avoid bacteria larger than your own</li>
           <li>Eat smaller bacteria to increase your size</li>
+          <li>Press enter to pause/unpause</li>
           <li>Press space to restart at any time</li>
         </ul>
         <button class="game-button" id="start">Start (Space)</button>

diff --git a/lib/bundle.js b/lib/bundle.js
diff --git a/lib/bundle.js.map b/lib/bundle.js.map
diff --git a/lib/cytosis.js b/lib/cytosis.js
@@ -7,15 +7,17 @@ document.addEventListener("DOMContentLoaded", () => {
   canvas.height = 700;
   const ctx = canvas.getContext("2d");
   const game = new Game();
-  new Viewport(game, ctx);
+  const viewPort = new Viewport(game, ctx);
   const btn = document.getElementById("start");
   const modal = document.getElementById("modal");
 
   document.addEventListener('keydown', (e) => {
     if(e.keyCode === 32 && !game.playing){
       modal.style.display = "none";
       game.start();
-      e.source.removeEventListener('keydown', arguments.callee);
+    } else if(e.keyCode === 13){
+      viewPort.paused = !viewPort.paused;
+      game.paused ? game.unpause() : game.pause();
     }
   });
 

diff --git a/lib/game.js b/lib/game.js
@@ -5,11 +5,12 @@ class Game {
     this.circles = [];
     this.player = new Player();
     this.playing = false;
-    this.generateCircles();
+    this.paused = false;
     this.sizeModifier = 1.0;
     this.maxRadius = 40;
     this.score = 0;
     this.gameOver = false;
+    this.generateCircles();
     this.modal = document.getElementById("end-modal");
     this.restartBtn = document.getElementById("restart");
     this.restartBtn.addEventListener("click", () => this.restart());
@@ -20,11 +21,25 @@ class Game {
     });
   }
 
+  unpause(){
+    this.paused = false;
+    this.interval = setInterval(() => {
+      this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier)));
+    }, 1500);
+  }
+
+  pause(){
+    this.paused = true;
+    clearInterval(this.interval);
+  }
+
   start(){
     this.playing = true;
     this.player = new Player();
     this.interval =
-    setInterval(() => this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier))), 1500);
+    setInterval(() => {
+      this.circles.push(new Circle(false, (this.player.radius*this.sizeModifier)));
+    }, 1500);
   }
 
   restart() {

diff --git a/lib/viewport.js b/lib/viewport.js
@@ -5,6 +5,7 @@ class Viewport {
     this.game = game;
     this.ctx = ctx;
     this.start();
+    this.paused = false;
   }
 
   start() {
@@ -15,14 +16,13 @@ class Viewport {
   }
 
   animate(time) {
-
       const dt = time - this.lastTime;
-
+    if(!this.paused){
       this.game.moveCircles();
       this.game.draw(this.ctx);
       this.lastTime = time;
-      requestAnimationFrame(this.animate.bind(this));
-        
+    }
+    requestAnimationFrame(this.animate.bind(this));
   }
 
 }