some stuff

markup/components/boi/boi.js

@@ -6,6 +6,8 @@ export default class Boi {
     this.cursor = cursor;
     this.field = field;
     this.onShot = onShot;
+    this.hp = 100;
+    this.shield = 100;
 
     this.x = 32;
     this.y = 32;
@@ -37,10 +39,10 @@ export default class Boi {
     radgrad.addColorStop(0.5, 'transparent');
     radgrad.addColorStop(1, 'rgba(255,255,255, 1)');
     // radgrad.addColorStop(1, 'rgba(0,255,249, 1)');
-    this.context.fillStyle = radgrad;
-    this.context.beginPath();
-    this.context.arc(this.x, this.y, 32, 0, Math.PI * 2);
-    this.context.fill();
+    // this.context.fillStyle = radgrad;
+    // this.context.beginPath();
+    // this.context.arc(this.x, this.y, 32, 0, Math.PI * 2);
+    // this.context.fill();
     // this.context.fillStyle = '#105f17';
     this.context.fillStyle = '#fff';
     this.context.beginPath();

markup/components/game/game.js

@@ -10,7 +10,9 @@ export default class Game {
     this.game = datGame;
     this.field = field;
     this.context = this.field.getContext('2d');
+    this.overlay = this.game.querySelector('.overlay');
     this.fps = 60;
+    this.started = false;
 
     this.timer = new Timer(this.run().bind(this), this.fps);
     this.keyboard = new Keyboard();
@@ -24,34 +26,26 @@ export default class Game {
   }
 
   initGameControls() {
-    this.stopButton = document.querySelector('.button_stop');
-    this.stopButton.addEventListener('click', () => {
-      this.timer.stop();
-      this.field.classList.remove('field_started');
-    });
     this.startButton = document.querySelector('.button_start');
-    this.startButton.addEventListener('click', () => {
-      this.timer.start();
-      this.field.classList.add('field_started');
+    this.resumeButton = document.querySelector('.button_resume');
+    this.resumeButton.style.display = 'none';
+    this.startButton.addEventListener('click', () => this.startGame());
+    this.resumeButton.addEventListener('click', () => this.resumeGame());
+    document.addEventListener('keydown', ev => {
+      if (ev.keyCode === 27) {
+        if (this.overlay.classList.contains('overlay_hidden')) {
+          this.pauseGame();
+        } else {
+          this.resumeGame();
+        }
+      }
     });
   }
 
   run() {
-    let loops = 0;
-    let nextGameTick = (new Date()).getTime();
-    const skipTicks = 1000 / this.fps;
-    const maxFrameSkip = 10;
     return () => {
-      loops = 0;
-
-      while ((new Date()).getTime() > nextGameTick && loops < maxFrameSkip) {
-        this.update();
-        nextGameTick += skipTicks;
-        loops++;
-      }
-      if (loops) {
-        this.draw();
-      }
+      this.update();
+      this.draw();
     };
   }
 
@@ -87,4 +81,24 @@ export default class Game {
   getId() {
     return '_' + Math.random().toString(36).substr(2, 9);
   }
+
+  startGame() {
+    this.timer.start();
+    this.overlay.classList.add('overlay_hidden');
+    this.field.classList.add('field_started');
+    this.startButton.style.display = 'none';
+    this.resumeButton.style.display = 'block';
+  }
+
+  resumeGame() {
+    this.timer.start();
+    this.overlay.classList.add('overlay_hidden');
+    this.field.classList.add('field_started');
+  }
+
+  pauseGame() {
+    this.timer.stop();
+    this.overlay.classList.remove('overlay_hidden');
+    this.field.classList.remove('field_started');
+  }
 }

markup/components/timer/timer.js

@@ -3,7 +3,7 @@ export default class Timer {
     this.stopped = false;
     this.callback = callback;
     this.fps = fps;
-    this.reqAnimation = window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.webkitRequestAnimationFrame;
+    this.reqAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.webkitRequestAnimationFrame;
   }
 
   onEachFrame(callback, reqAnimation) {

markup/pages/belive.pug

@@ -0,0 +1,15 @@
+doctype html
+html(class="no-js", lang="ru")
+
+  include ../components/head/head.pug
+
+  head
+    +head()
+  body
+    |%=symbols=%
+
+    .believe 
+      | i want to 
+      span believe
+
+    script(src='%=static=%js/main%=hash=%%=min=%.js')

markup/pages/index.pug

@@ -9,9 +9,12 @@ html(class="no-js", lang="ru")
     |%=symbols=%
 
   .game
-    .controls
-      button(type="button" class="button button_start") START
-      button(type="button" class="button button_stop") STOP
-    canvas.field(width="900" height="600")
+    .game__wrapper
+      canvas.field(width="900" height="600")
+      .overlay
+        .overlay__message
+        .controls
+          button(type="button" class="button button_start") start
+          button(type="button" class="button button_resume") resume
 
     script(src='%=static=%js/main%=hash=%%=min=%.js')

markup/static/stylus/common.styl

@@ -1,5 +1,5 @@
 // Common styles of the project
-
+@import 'static/fonts/stylesheet.css'
 html, body
   height 100%
   background #000
@@ -12,15 +12,18 @@ html, body
   flex-direction column
   justify-content center
   align-items center
+
+  &__wrapper
+    position relative
 
 .controls
-  height 24px
   display flex
+  flex-direction column
 
 .field
   background #000
   position relative
-  border 2px solid #fff
+  border 4px solid #fff
 
   &_started
     cursor none
@@ -37,21 +40,55 @@ html, body
 .button
   z-index 1
   border-radius 0
-  width 100px
-  height 24px
-  font-size 16px
+  width 160px
+  height 48px
+  font-size 28px
   background #000
   color #fff
   outline none
   border none
   transition .3s ease
   cursor pointer
   border 2px solid #fff
-  border-bottom none
-  
-  & + &
-    border-left none
+  text-transform uppercase
+
+  & + & 
+    margin-top 24px
 
   &:hover
     background #fff
-    color #000
+    color #000
+
+.overlay
+  z-index 999
+  background #000000
+  position absolute
+  left 0
+  right 0
+  top 0
+  bottom 0
+  display flex
+  align-items center
+  justify-content center
+  flex-direction column
+  border 4px solid #fff
+
+  &_hidden
+    display none
+
+
+.believe
+  padding-top 120px
+  font-size 40px
+  line-height 1
+  text-align center
+  width 280px
+  letter-spacing 3px
+  margin 0 auto
+  height 100vh
+  color #fff
+  font-family 'Star Jedi Rounded'
+
+  span
+    font-size 48px
+    letter-spacing 6px