Checking the levels

Ball.js

@@ -0,0 +1,167 @@
+class Ball {
+    constructor() {
+        this.size = 10;
+
+
+        this.moving = false;
+        this.speed = 7;
+        // this.angle = 90;
+        this.setAngle(180 + 60, 360 - 60);
+
+        this.color = 'red';
+        this.limits = null;
+
+        this.angleTR = this.g2r(360);
+        this.angleBR = this.g2r(90);
+        this.angleBL = this.g2r(180);
+        this.angleTL = this.g2r(270);
+
+    }
+
+    start() {
+        this.moving = true;
+    }
+
+    update(ctx, x, y) {
+        this.limits ??= {
+            l: this.size,
+            t: this.size,
+            r: ctx.canvas.width - this.size,
+            b: ctx.canvas.height
+        };
+
+        if (this.move(x, y)) {
+            this.draw(ctx);
+            return true;
+        }
+        return false;
+    }
+
+    draw(ctx) {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
+        ctx.fillStyle = this.color;
+        ctx.fill();
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = '#003300';
+        ctx.stroke();
+    }
+
+    move(x, y) {
+        if (this.moving) {
+            this.x += this.speed * Math.cos(this.angle);
+            this.y += this.speed * Math.sin(this.angle);
+
+            // Escaped from the pad
+            if (this.y > this.limits.b) {
+                this.moving = false;
+                return false;
+            }
+
+            this.collideWalls(this.limits.l, this.limits.t, this.limits.r, this.limits.b);
+        } else {
+            this.x = x;
+            this.y = y - this.size - 1;
+        }
+        return true;
+    }
+
+    bounceL(r) {
+        if (this.angle <= this.angleBL)
+            this.setAngle(0 + r, 90 - r);
+        else
+            this.setAngle(270 + r, 360 - r);
+    }
+    bounceR(r) {
+        if (this.angle <= this.angleBR)
+            this.setAngle(90 + r, 180 - r);
+        else
+            this.setAngle(180 + r, 270 - r);
+    }
+    bounceT(r) {
+        if (this.angle <= this.angleTL)
+            this.setAngle(90 + r, 180 - r);
+        else
+            this.setAngle(0 + r, 90 - r);
+    }
+    bounceB(r) {
+        if (this.angle <= this.angleBR)
+            this.setAngle(270 + r, 360 - r);
+        else
+            this.setAngle(180 + r, 270 - r);
+    }
+
+    collideWalls(x0, y0, x1, y1) {
+        let r = 20;
+        if (this.x <= x0) {
+            this.bounceL(r);
+            return true;
+        }
+        if (this.x >= x1) {
+            this.bounceR(r);
+            return true;
+        }
+        if (this.y <= y0) {
+            this.bounceT(r);
+            return true;
+        }
+        if (this.y >= y1) {
+            this.bounceB(r);
+            return true;
+        }
+        return false;
+    }
+    /*
+            TL  270  TR
+        180             0
+            BL  90   BR
+
+
+                B
+             ---------
+        R   |        |  L
+             ---------
+                T
+
+    */
+
+    collide(x0, y0, x1, y1) { // 0 = hit Left/Right, 1 = hit Up/Down
+        let r = 20;
+        if (this.x >= x0 && this.x <= x1) {
+            if ((this.y + this.size) >= y0 && (this.y + this.size) < y1) {
+                this.bounceB(r);
+                return true;
+            }
+            if ((this.y - this.size) <= y1 && (this.y - this.size) > y0) {
+                this.bounceT(r);
+                return true;
+            }
+        }
+
+        if (this.y >= y0 && this.y <= y1) {
+            if ((this.x + this.size) >= x0 && (this.x + this.size) < x1) {
+                this.bounceR(r);
+                return true;
+            }
+            if ((this.x - this.size) <= x1 && (this.x - this.size) > x0) {
+                this.bounceL(r);
+                return true;
+            }
+        }
+
+
+        return false;
+    }
+
+    setAngle(min, max) {
+        this.angle = this.g2r(Math.floor(Math.random() * (max - min)) + min);
+    }
+
+    g2r(deg) {
+        return (((360 + deg) % 360) * Math.PI) / 180.0;
+    }
+
+    r2g(rad) {
+        return rad * 180 / Math.PI;
+    }
+}

Bar.js

@@ -0,0 +1,56 @@
+class Bar {
+    constructor(ctx, key) {
+        this.ctx = ctx;
+        this.key = key;
+
+        this.w = 80;
+        this.h = 15;
+        this.speed = 10;    // Target Speed
+        this._speed = 0;    // Current Speed and direction
+
+        this.xLimit = (ctx.canvas.width - this.w);
+        this.reset();
+    }
+
+    reset() {
+        this.x = (this.ctx.canvas.width - this.w) / 2;
+        this._y = (this.ctx.canvas.height - this.h * 2);
+
+        this.y = this.ctx.canvas.height + 10;
+    }
+    update() {
+        this.move();
+        this.draw();
+    }
+    stop() {
+        this._speed = 0;
+    }
+    left() {
+        if (this._speed >= 0) this._speed = -this.speed;
+        this.x += this._speed;
+        if (this.x < 0) this.x = 0;
+        this._speed -= 0.5;
+    }
+    right() {
+        if (this._speed <= 0) this._speed = this.speed;
+        this.x += this._speed;
+        if (this.x > this.xLimit) this.x = this.xLimit;
+        this._speed += 0.5;
+    }
+    move() {
+        if (this.key.isDown('ArrowLeft')) this.left();
+        else
+            if (this.key.isDown('ArrowRight')) this.right();
+            else
+                this.stop();
+    }
+
+
+    draw() {
+        if (this.y != this._y) this.y--;
+        if (this.y < this.ctx.canvas.height) {
+            this.ctx.fillStyle = 'black';
+            this.ctx.fillRect(this.x, this.y, this.w, this.h);
+        }
+    }
+}

Board.js

@@ -0,0 +1,56 @@
+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.loopStop();
+        this.resolve(nextStage);
+    }
+
+    loopStop() {
+        this.stop = true;
+        if (this.requestID) {
+            cancelAnimationFrame(this.requestID);
+            this.requestID = null;
+        }
+        this.ctx.clearRect(0, 0, this.w, this.h);
+    }
+
+    loop() {
+        if (this.stop) return;
+
+        this.ctx.clearRect(0, 0, this.w, this.h);
+        this.update();
+        this.requestID = requestAnimationFrame( ()=>this.loop() );
+    }
+
+    update() {
+
+    }
+}

Bricks.js

@@ -0,0 +1,30 @@
+class Brick {
+    constructor(type, column, row) {
+        this.type = type;
+        this.row = row;
+        this.column = column;
+
+        this.vspace = 2;
+        this.hspace = 2;
+
+        this.w = (360/8) -this.hspace;
+        this.h = (20) - this.vspace;
+        this.x = (this.w +this.hspace)*column;
+        this.y = 80 + (this.h +this.vspace)*row;
+
+        this.alive = true;
+    }
+
+    update(ctx) {
+        if (!this.alive) return false;
+        
+        switch(this.type) {
+            case 1:
+                ctx.fillStyle = 'blue';
+                ctx.fillRect(this.x+1, this.y, this.w, this.h);
+                break;
+        }
+        return true;
+    }
+    
+}

GameIntro.js

@@ -0,0 +1,18 @@
+class GameIntro extends Board {
+    constructor(ctx, key) {
+        super(ctx, key);
+        this.controls = {
+            'Space': ()=>this.next(1)
+        }
+    }
+    update() {
+        this.centerText('BreakOut', this.y, '48px', 'Consolas', 'Black');
+        this.centerText('JDG', this.y + 50, '24px', 'Consolas', 'Black');
+    }
+    centerText(txt, y, s, f, c) {
+        this.ctx.font = s + ' ' + f;
+        this.ctx.fillStyle = 'Black';
+        let x = (this.ctx.canvas.width - this.ctx.measureText(txt).width) / 2;
+        this.ctx.fillText(txt, x, y);
+    }
+}

GameOver.js

@@ -0,0 +1,25 @@
+class GameOver {
+    constructor() {
+        this.w = 240;
+        this.h = 120;
+
+        this.cx = 360 / 2;
+        this.cy = 640 / 2;
+
+        this.x = this.cx - this.w/2;
+        this.y = this.cy - this.h/2;
+    }
+    update(ctx) {
+        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+        ctx.fillRect(this.x, this.y, this.w, this.h);
+
+        this.centerText(ctx, 'GAME OVER', this.cy, '48px', 'Consolas', 'Black');
+        this.centerText(ctx, '(Press "N" to start)', this.cy + 48, '24px', 'Consolas', 'Black');
+    }
+    centerText(ctx, txt, y, s, f, c) {
+        ctx.font = s + ' ' + f;
+        ctx.fillStyle = 'Black';
+        let x = (ctx.canvas.width - ctx.measureText(txt).width) / 2;
+        ctx.fillText(txt, x, y);
+    }
+}

GamePlay.js

@@ -0,0 +1,79 @@
+class GamePlay extends Board {
+    constructor(ctx, key) {
+        super(ctx, key);
+
+        this.controls = {
+            'KeyS': ()=>{
+                this.nextLevel(++this.level);
+            },
+            'KeyX': ()=>{ 
+                            let b = new Ball();
+                            b.update(this.ctx, this.bar.x + this.bar.w/2, this.bar.y); 
+
+                            this.balls.push(b);
+                            this.balls[this.balls.length - 1].start(); 
+                        },
+            'Space': ()=>{
+                            this.balls[0].moving = true;
+                        },
+            'KeyN': ()=>{
+                            if(this.lives.get()==0) this.next(1);
+                        }
+        }
+
+        this.gameOver = new GameOver();
+        this.score = new Score();
+        this.lives = new Lives();
+        this.bar = new Bar(ctx, key);
+        this.levels = new Levels();
+        this.newGame();
+    }
+
+    newGame() {
+        this.lives.reset();
+        this.score.reset();
+        this.nextLevel(1);
+    }
+
+    nextLevel(lvl) {
+        this.level = lvl;
+        this.bricks = this.levels.load(lvl);
+        this.bar.reset();
+        this.balls = [];
+        this.balls.push(new Ball());
+    }
+
+    update() {
+        if(this.lives.get()==0) {
+            this.loopStop();
+            this.gameOver.update(this.ctx);
+//            this.next(2);
+        } else {
+            this.balls = this.balls.filter(ball => {
+                    let r = ball.update(this.ctx, this.bar.x + this.bar.w/2, this.bar.y);
+                    ball.collide( this.bar.x, this.bar.y, this.bar.x + this.bar.w, this.bar.y + this.bar.h );
+                    this.bricks.forEach(b=>{
+                                            if(b.alive){
+                                                if ( ball.collide(b.x,b.y,b.x+b.w,b.y+b.h) ) {
+                                                    this.score.add(1);
+                                                    b.alive = false;
+                                                }
+                                                
+                                        }});
+                    return r;
+                }
+            );
+            if (this.bricks.length==0) {
+                this.nextLevel(++this.level);
+            }
+            if (this.balls.length==0) {
+                if ( !this.lives.lost() ) this.balls.push(new Ball());
+            }
+            this.bricks =  this.bricks.filter(brick => brick.update(this.ctx));
+//            if ( this.bricks.length == 0 ) this.nextLevel();
+            this.bar.update();
+        }
+        this.score.update(this.ctx);
+        this.lives.update(this.ctx);
+    }
+}

Keyboard.js

@@ -0,0 +1,24 @@
+class Keyboard {
+    constructor(onKeydown) {
+        this._pressed = {};
+        this.cb_onKeydown = onKeydown;
+
+        window.addEventListener('keydown', e => this.onKeydown(e));
+        window.addEventListener('keyup', e => this.onKeyup(e));
+    }
+
+    setKeydown(fn) {
+        this.cb_onKeydown = fn;
+    }
+
+    isDown(keyCode) {
+        return this._pressed[keyCode];
+    }
+    onKeydown(event) {
+        this._pressed[event.code] = true;
+        if (this.cb_onKeydown) this.cb_onKeydown(event);
+    }
+    onKeyup(event) {
+        delete this._pressed[event.code];
+    }
+}

Levels.js

@@ -0,0 +1,48 @@
+class Levels {
+    load(lvl) {
+        let map = [];
+        switch (+lvl) {
+            case 1:
+                map = [].concat(
+                                this.row(0, [1, 0, 1, 0, 0, 1, 0, 1]),
+                                this.row(1, [1, 1, 1, 1, 1, 1, 1, 1]),
+                                this.row(3, [0, 1, 1, 1, 1, 1, 1, 0]),
+                                this.row(4, [1, 1, 1, 1, 1, 1, 1, 1])
+                                );
+                break;
+            case 2:
+                map = [].concat(
+                                this.row(0, [1, 1, 1, 0, 1, 1, 0, 0]),
+                                this.row(1, [0, 0, 1, 0, 1, 0, 1, 0]),
+                                this.row(2, [0, 0, 1, 0, 1, 0, 1, 0]),
+                                this.row(3, [1, 0, 1, 0, 1, 0, 1, 0]),
+                                this.row(4, [0, 1, 1, 0, 1, 1, 0, 0])
+                                );
+                break;
+            default:
+                map = [].concat(
+                                this.row(0, [1, 1, 1, 1, 1, 1, 1, 1]),
+                                this.row(1, [1, 1, 1, 1, 1, 1, 1, 1]),
+                                this.row(2, [1, 1, 1, 1, 1, 1, 1, 1]),
+                                this.row(3, [1, 1, 1, 1, 1, 1, 1, 1]),
+                                this.row(4, [1, 1, 1, 1, 1, 1, 1, 1])
+                                );
+                break;
+        }
+        return this.toBricks(map);
+    }
+
+    row(r, bricksTypes) {
+        let row = [];
+        for (var i = 0; i < bricksTypes.length; i++) row.push([bricksTypes[i], i, r]);
+        return row;
+    }
+
+    toBricks(map) {
+        let bricks = [];
+        map.forEach(b => {
+            if (b[0] > 0) bricks.push(new Brick(b[0], b[1], b[2]));
+        });
+        return bricks;
+    }
+}

Lives.js

@@ -0,0 +1,27 @@
+class Lives {
+    constructor() {
+        this.reset();
+    }
+    reset() {
+        this.lives = 3;
+        this.y = 10;
+    }
+    lost() {
+        this.lives--;
+        return this.lives==0;
+    }
+    get() { 
+        return this.lives;
+    }
+    update(ctx) {
+        if (this.y != 48) this.y++;
+        if (this.y > 0) {
+            let txt = (String.fromCharCode(parseInt('26A1', 16))+" ").repeat(this.lives);
+
+            ctx.font = "18px Consolas";
+            ctx.fillStyle = 'Green';
+            this.x = ctx.canvas.width - ctx.measureText(txt).width;
+            ctx.fillText(txt, this.x, this.y);
+        }
+    }
+}

Score.js

@@ -0,0 +1,21 @@
+class Score {
+    constructor() {
+        this.reset();
+    }
+    reset() {
+        this.points = 0;
+        this.x = 235;
+        this.y = -10;
+    }
+    add(x) {
+        this.points += x;
+    }
+    update(ctx) {
+        if (this.y != 20) this.y++;
+        if (this.y > 0) {
+            ctx.font = "20px Consolas";
+            ctx.fillStyle = 'Black';
+            ctx.fillText('Score: ' + this.points, this.x, this.y);
+        }
+    }
+}

index.html

@@ -5,8 +5,27 @@
         body {
             margin: 0;
             padding: 0;
+            align-items: center;
+            justify-content: center;
+            display: flex;
         }
+        canvas { border:1px solid black; }
     </style>
+<!-- ------------------------------------------ -->
+    <script src="Keyboard.js"></script>
+    <script src="Board.js"></script>
+<!-- ------------------------------------------ -->
+    <script src="GameIntro.js"></script>
+<!-- ------------------------------------------ -->
+    <script src="GameOver.js"></script>
+    <script src="Bricks.js"></script>
+    <script src="Levels.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,203 +1,35 @@
 "use strict";
+// import {Intro as game_intro} from "./Intro";
+// import game_play from "./game.js";
 
 document.addEventListener('DOMContentLoaded', init);
 
-let Key = {
-    _pressed: {},
-    isDown: function (keyCode) {
-        return this._pressed[keyCode];
-    },
-    onKeydown: function (event) {
-        this._pressed[event.code] = true;
-    },
-    onKeyup: function (event) {
-        delete this._pressed[event.code];
-    }
-};
 
-let ctx, canvas = document.createElement("canvas");
 function init() {
-    canvas.width = window.innerWidth
+    let ctx, canvas = document.createElement("canvas");
-    canvas.height = window.innerHeight
+    canvas.width = 360; // window.innerWidth
+    canvas.height = 640; // window.innerHeight
     ctx = canvas.getContext('2d');
     document.body.insertBefore(canvas, document.body.childNodes[0]);
-    window.addEventListener('keydown', (e) => Key.onKeydown(e));
+    let container = document.querySelector("body");
-    window.addEventListener('keyup', (e) => Key.onKeyup(e));
+    let resize = (e) => {
+        container.clientWidth / container.clientHeight > 1
+            ? (canvas.style.height = "100vh") && (canvas.style.width = "auto")
+            : (canvas.style.height = "auto") && (canvas.style.width = "100vw");
+    };
+    resize();
+    container.onresize = resize;
 
-    function run() {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        refresh();
-        requestAnimationFrame(run);
-    }
 
-    // -------------------------------------------------------------------
+    let key = new Keyboard(), board;
-    let gstate = 1;
+    function runBoard(stage) {
-    let intro = new Intro();
+        switch (stage) {
-    let score = new Score();
+            case 1: board = new GamePlay(ctx, key); break;
-    let bar = new Bar();
+            default: board = new GameIntro(ctx, key); break;
-
-    function joy_fire() {
-        switch (gstate) {
-            case 0: // Waiting to start
-                newGame();
-                break;
-            case 1: // Playing...
-                break;
-            case 2: // Game Over
-                newGame();
-                break;
         }
+        board
+            .run()
+            .then(stage => runBoard(stage), e => { });;
     }
-
+    runBoard(0);
-    function newGame() {
-        gstate = 1;
-        score.reset();
-        bar.reset();
-    }
-
-    function refresh() {
-        switch (gstate) {
-            case 0: // Waiting to start
-                intro.update();
-                break;
-            case 1: // Playing...
-                bar.update();
-                score.update();
-                break;
-            case 2: // Game Over
-                break;
-        }
-    }
-
-    run();
 }
-
-class Intro {
-    constructor() {
-        this.x = canvas.width;
-        this.y = canvas.height / 2 - 48;
-    }
-    update() {
-        this.centerText('BreakOut', this.y, '48px', 'Consolas', 'Black');
-        this.centerText('JDG', this.y + 50, '24px', 'Consolas', 'Black');
-    }
-    centerText(txt, y, s, f, c) {
-        ctx.font = s + ' ' + f;
-        ctx.fillStyle = 'Black';
-        let x = (canvas.width - ctx.measureText(txt).width) / 2;
-        ctx.fillText(txt, x, y);
-    }
-}
-
-class Bar {
-    constructor() {
-        this.w = 100;
-        this.h = 20;
-        this.speed = 10;    // Target Speed
-        this._speed = 0;    // Current Speed and direction
-
-        this.xLimit = (canvas.width - this.w);
-        this.reset();
-    }
-    reset() {
-        this.x = (canvas.width - this.w) / 2;
-        this.y = (canvas.height - this.h * 2);
-
-        this._y = canvas.height + 10;
-    }
-    update() {
-        this.move();
-        this.draw();
-    }
-    stop() {
-        this._speed = 0;
-    }
-    left() {
-        if (this._speed >= 0) this._speed = -this.speed;
-        this.x += this._speed;
-        if (this.x < 0) this.x = 0;
-        this._speed -= 0.5;
-    }
-    right() {
-        if (this._speed <= 0) this._speed = this.speed;
-        this.x += this._speed;
-        if (this.x > this.xLimit) this.x = this.xLimit;
-        this._speed += 0.5;
-    }
-    move() {
-        if (Key.isDown('ArrowLeft')) this.left();
-        else
-            if (Key.isDown('ArrowRight')) this.right();
-            else
-                this.stop();
-    }
-
-
-    draw() {
-        if (this._y != this.y) this._y--;
-        if (this._y < canvas.height) {
-            ctx.fillStyle = 'black';
-            ctx.fillRect(this.x, this._y, this.w, this.h);
-        }
-    }
-}
-
-class Score {
-    constructor() {
-        this.reset();
-
-        ctx.font = "30px Consolas";
-        let m = ctx.measureText('Score: 00000');
-        this.x = canvas.width - m.width;
-        this.y = -10;
-    }
-    reset() {
-        this.points = 0;
-    }
-    add(x) {
-        this.points += x;
-    }
-    update() {
-        if (this.y != 30) this.y++;
-        if (this.y > 0) {
-            ctx.font = "30px Consolas";
-            ctx.fillStyle = 'Black';
-            ctx.fillText('Score: ' + this.points, this.x, this.y);
-        }
-    }
-}
-
-class ball {
-    constructor(x, y, speed, angle) {
-        this.x = x;
-        this.y = y;
-        this.speed = speed;
-        this.angle = angle;
-        this.color = 'black';
-        this.size = 20;
-    }
-
-    update() {
-        this.move();
-        this.draw();
-    }
-
-    draw() {
-        ctx.fillStyle = this.color;
-        ctx.fillRect(this.x, this.y, this.size, this.size);
-    }
-
-    move() {
-        this.x += this.speed * Math.cos(this.angle);
-        this.y += this.speed * Math.sin(this.angle);
-
-        if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height)
-            this.bounce();
-    }
-
-    bounce() {
-        this.angle += 180;
-    }
-}
-
-