Add pause feature

src/Asteroid.js

@@ -15,6 +15,8 @@ export default class Asteroid {
     this.create = args.create;
     this.addScore = args.addScore;
     this.vertices = asteroidVertices(8, args.size)
+
+    this.beforePauseVelocity = this.velocity
   }
 
   destroy(){
@@ -56,6 +58,17 @@ export default class Asteroid {
     }
   }
 
+  pause(){
+    this.velocity = {
+      x: 0,
+      y: 0
+    }
+  }
+
+  unPause(){    
+    this.velocity = this.beforePauseVelocity     
+  }
+
   render(state){
     // Move
     this.position.x += this.velocity.x;

src/Bullet.js

@@ -13,12 +13,25 @@ export default class Bullet {
       y:posDelta.y / 2
     };
     this.radius = 2;
+
+    this.beforePauseVelocity = this.velocity
   }
 
   destroy(){
     this.delete = true;
   }
 
+  pause(){
+    this.velocity = {
+      x: 0,
+      y: 0
+    }
+  }
+
+  unPause(){    
+    this.velocity = this.beforePauseVelocity     
+  }
+
   render(state){
     // Move
     this.position.x += this.velocity.x;

src/Particle.js

@@ -5,12 +5,24 @@ export default class Particle {
     this.radius = args.size;
     this.lifeSpan = args.lifeSpan;
     this.inertia = 0.98;
+
+    this.isPaused = false
   }
 
   destroy(){
     this.delete = true;
   }
 
+  pause(){
+    this.velocity = {x:0, y:0}
+    this.isPaused = true
+  }
+
+  unPause(){
+    this.isPaused = false
+    this.velocity = {x:0.5, y:0.5}
+  }
+
   render(state){
     // Move
     this.position.x += this.velocity.x;
@@ -19,11 +31,14 @@ export default class Particle {
     this.velocity.y *= this.inertia;
 
     // Shrink
-    this.radius -= 0.1;
+    if(!this.isPaused){
+      this.radius -= 0.1;
+      this.lifeSpan -= 1
+    }
     if(this.radius < 0.1) {
       this.radius = 0.1;
     }
-    if(this.lifeSpan-- < 0){
+    if(this.lifeSpan < 0){
       this.destroy()
     }
 

src/Reacteroids.js

@@ -10,7 +10,8 @@ const KEY = {
   A: 65,
   D: 68,
   W: 87,
-  SPACE: 32
+  SPACE: 32,
+  ESC: 27
 };
 
 export class Reacteroids extends Component {
@@ -29,11 +30,13 @@ export class Reacteroids extends Component {
         up    : 0,
         down  : 0,
         space : 0,
+        esc   : 0,
       },
       asteroidCount: 3,
       currentScore: 0,
       topScore: localStorage['topscore'] || 0,
-      inGame: false
+      inGame: false,
+      pause: false
     }
     this.ship = [];
     this.asteroids = [];
@@ -53,19 +56,44 @@ export class Reacteroids extends Component {
 
   handleKeys(value, e){
     let keys = this.state.keys;
-    if(e.keyCode === KEY.LEFT   || e.keyCode === KEY.A) keys.left  = value;
-    if(e.keyCode === KEY.RIGHT  || e.keyCode === KEY.D) keys.right = value;
-    if(e.keyCode === KEY.UP     || e.keyCode === KEY.W) keys.up    = value;
-    if(e.keyCode === KEY.SPACE) keys.space = value;
+    const finalValue = !this.state.pause ? value : 0
+
+    if(e.keyCode === KEY.LEFT   || e.keyCode === KEY.A) keys.left  = finalValue;
+    if(e.keyCode === KEY.RIGHT  || e.keyCode === KEY.D) keys.right = finalValue;
+    if(e.keyCode === KEY.UP     || e.keyCode === KEY.W) keys.up    = finalValue;
+    if(e.keyCode === KEY.SPACE) keys.space = finalValue;
     this.setState({
       keys : keys
     });
   }
 
+  handlePause(e){
+    if(e.keyCode === KEY.ESC && this.state.inGame){
+
+      const pause = this.state.pause
+      if(pause){
+        this.ship[0].unPause()
+        this.asteroids.forEach(asteroid => asteroid.unPause())
+        this.bullets.forEach(bullet => bullet.unPause())
+        this.particles.forEach(particle => particle.unPause())
+      }else{
+        this.ship[0].pause() 
+        this.asteroids.forEach(asteroid => asteroid.pause())
+        this.bullets.forEach(bullet => bullet.pause())
+        this.particles.forEach(particle => particle.pause())
+      }
+
+      this.setState({       
+        pause: !pause
+      })
+    }
+  }
+
   componentDidMount() {
     window.addEventListener('keyup',   this.handleKeys.bind(this, false));
     window.addEventListener('keydown', this.handleKeys.bind(this, true));
     window.addEventListener('resize',  this.handleResize.bind(this, false));
+    window.addEventListener('keydown', this.handlePause.bind(this));
 
     const context = this.refs.canvas.getContext('2d');
     this.setState({ context: context });
@@ -77,6 +105,7 @@ export class Reacteroids extends Component {
     window.removeEventListener('keyup', this.handleKeys);
     window.removeEventListener('keydown', this.handleKeys);
     window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('keydown', this.handlePause);
   }
 
   update() {
@@ -222,6 +251,7 @@ export class Reacteroids extends Component {
   render() {
     let endgame;
     let message;
+    let onPause;
 
     if (this.state.currentScore <= 0) {
       message = '0 points... So sad.';
@@ -244,14 +274,27 @@ export class Reacteroids extends Component {
       )
     }
 
+    if(this.state.pause){
+      onPause = (
+        <div className="pausegame">
+          <p>Pause</p>
+          <p>press [ESC] to resume</p>
+        </div>
+      )
+    }else{
+      onPause = (<div></div>)
+    }
+
     return (
       <div>
         { endgame }
+        { onPause }
         <span className="score current-score" >Score: {this.state.currentScore}</span>
         <span className="score top-score" >Top Score: {this.state.topScore}</span>
         <span className="controls" >
           Use [A][S][W][D] or [←][↑][↓][→] to MOVE<br/>
-          Use [SPACE] to SHOOT
+          Use [SPACE] to SHOOT <br/>
+          Use [ESC] to PAUSE
         </span>
         <canvas ref="canvas"
           width={this.state.screen.width * this.state.screen.ratio}

src/Ship.js

@@ -17,6 +17,8 @@ export default class Ship {
     this.lastShot = 0;
     this.create = args.create;
     this.onDie = args.onDie;
+
+    this.beforePauseVelocity = this.velocity
   }
 
   destroy(){
@@ -71,6 +73,22 @@ export default class Ship {
     this.create(particle, 'particles');
   }
 
+  pause(){
+    this.beforePauseVelocity = this.velocity 
+    this.velocity = {
+      x: 0,
+      y: 0
+    }
+    this.speed = 0
+    this.rotationSpeed = 0
+  }
+
+  unPause(){    
+    this.velocity = this.beforePauseVelocity
+    this.speed = 0.15
+    this.rotationSpeed = 6
+  }
+
   render(state){
     // Controls
     if(state.keys.up){

src/style.css

@@ -39,7 +39,7 @@ canvas {
   text-align: center;
   line-height: 1.6;
 }
-.endgame{
+.endgame, .pausegame{
   position: absolute;
   top: 50%;
   left: 50%;