ReOrganizing the code

Ball.js

@@ -88,7 +88,6 @@ class Ball {
     }
 
     g2r(deg) {
-        console.log((360+deg)%360);
         return ( ((360+deg)%360) * Math.PI) / 180.0; 
     }
 

Board.js

@@ -0,0 +1,52 @@
+class Board {
+    constructor(ctx, key) {
+        this.controls = {};
+        this.key = key;
+        this.stop = false;
+        this.ctx = ctx;
+        this.x = ctx.canvas.width;
+        this.y = ctx.canvas.height / 2 - 48;
+
+        this.w = this.ctx.canvas.width;
+        this.h = this.ctx.canvas.height
+    }
+
+    run() {
+        let _this = this;
+        this.stop = false;
+        this.key.setKeydown( e => {
+            let code = e.code;
+            for(var key in this.controls) {
+                if(key==code) this.controls[key]();
+            }
+        } );
+        return new Promise((resolve, reject) => {
+            _this.resolve = resolve;
+            _this.reject = reject;
+            _this.loop();
+        }
+        );
+    }
+
+    next(nextStage) {
+        this.stop = true;
+        if (this.requestID) {
+            cancelAnimationFrame(this.requestID);
+            this.requestID = null;
+        }
+        this.ctx.clearRect(0, 0, this.w, this.h);
+        this.resolve(nextStage);
+    }
+
+    loop() {
+        if (this.stop) return;
+
+        this.ctx.clearRect(0, 0, this.w, this.h);
+        this.update();
+        this.requestID = requestAnimationFrame( ()=>this.loop() );
+    }
+
+    update() {
+
+    }
+}

GameIntro.js

@@ -1,8 +1,9 @@
-class Intro {
+class GameIntro extends Board {
-    constructor(ctx) {
+    constructor(ctx, key) {
-        this.ctx = ctx;
+        super(ctx, key);
-        this.x = ctx.canvas.width;
+        this.controls = {
-        this.y = ctx.canvas.height / 2 - 48;
+            'Space': ()=>this.next(1)
+        }
     }
     update() {
         this.centerText('BreakOut', this.y, '48px', 'Consolas', 'Black');

GamePlay.js

@@ -0,0 +1,42 @@
+class GamePlay extends Board {
+    constructor(ctx, key) {
+        super(ctx, key);
+
+        this.controls = {
+            'KeyX': ()=>{ 
+                            this.balls.push(new Ball(this.ctx, this.bar)); 
+                            this.balls[this.balls.length - 1].start(); 
+                        },
+            'Space': ()=>{
+                            this.balls[0].moving = true;
+                        }
+        }
+
+        this.score = new Score(ctx);
+        this.lives = new Lives(ctx);
+        this.bar = new Bar(ctx, key);
+        this.newGame();
+    }
+
+    newGame() {
+        this.lives.reset();
+        this.score.reset();
+        this.bar.reset();
+        this.balls = [];
+        this.balls.push(new Ball(this.ctx, this.bar));
+    }
+
+    update() {
+        if(this.lives.get()==0) {
+            gameOver.update();
+        } else {
+            this.balls = this.balls.filter(ball => ball.update());
+            if (this.balls.length==0) {
+                if ( !this.lives.lost() ) this.balls.push(new Ball(this.ctx, this.bar));
+            }
+            this.bar.update();
+        }
+        this.score.update();
+        this.lives.update();
+    }
+}

Lives.js

@@ -15,6 +15,9 @@ class Lives {
         this.lives--;
         return this.lives==0;
     }
+    get() { 
+        return this.lives;
+    }
     update() {
         if (this.y != 60) this.y++;
         if (this.y > 0) {

index.html

@@ -7,13 +7,18 @@
             padding: 0;
         }
     </style>
+<!-- ------------------------------------------ -->
     <script src="Key.js"></script>
-    <script src="Intro.js"></script>
+    <script src="Board.js"></script>
-    <script src="GameOver.js"></script>
+<!-- ------------------------------------------ -->
+    <script src="GameIntro.js"></script>
+<!-- ------------------------------------------ -->
     <script src="Score.js"></script>
     <script src="Lives.js"></script>
     <script src="Bar.js"></script>
     <script src="Ball.js"></script>
+    <script src="GamePlay.js"></script>
+<!-- ------------------------------------------ -->
     <script src="index.js"></script>
 </head>
 

index.js

@@ -1,4 +1,6 @@
 "use strict";
+// import {Intro as game_intro} from "./Intro";
+// import game_play from "./game.js";
 
 document.addEventListener('DOMContentLoaded', init);
 
@@ -10,70 +12,15 @@ function init() {
     ctx = canvas.getContext('2d');
     document.body.insertBefore(canvas, document.body.childNodes[0]);
 
-    function run() {
+    let key = new Key(), board;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    function runBoard(stage) {
-        refresh();
+        switch(stage) {
-        requestAnimationFrame(run);
+            case 1:  board = new GamePlay(ctx, key); break;
+            default: board = new GameIntro(ctx,key); break;
         }
-
+        board
-    // -------------------------------------------------------------------
+            .run()
-    let gstate = 0;
+            .then( stage=>runBoard(stage), e=>{} );;
-    let key = new Key(controls);
-    let intro = new Intro(ctx);
-    let gameOver = new GameOver(ctx);
-    let score = new Score(ctx);
-    let lives = new Lives(ctx);
-    let bar = new Bar(ctx, key);
-    let balls = [];
-    newGame();
-
-    function controls(e) {
-        switch (gstate) {
-            case 0: // Waiting to start
-                if (e.code == 'Space') newGame();
-                break;
-            case 1: // Playing...
-                if (e.code == 'Space' && balls.length>0) balls[balls.length - 1].start();
-                else
-                    if (e.code == 'KeyX') { balls.push(new Ball(ctx, bar)); balls[balls.length - 1].start(); }
-                break;
-            case 2: // Game Over
-                if (e.code == 'Space') newGame();
-                break;
     }
-    }
+    runBoard(0);
-
-    function newGame() {
-        gstate = 1;
-        lives.reset();
-        score.reset();
-        bar.reset();
-        balls.push(new Ball(ctx, bar));
-    }
-
-    function refresh() {
-        switch (gstate) {
-            case 0: // Waiting to start
-                intro.update();
-                break;
-            case 1: // Playing...
-            case 2:
-
-                if(gstate==2) {
-                    gameOver.update();
-                } else {
-                    balls = balls.filter(ball => ball.update());
-                    if (balls.length==0) {
-                        if ( lives.lost() ) gstate=2;
-                        else balls.push(new Ball(ctx, bar));
-                    }
-                    bar.update();
-                }
-                score.update();
-                lives.update();
-                break;
-        }
-    }
-
-    run();
 }