First commit

2021-11-12 01:16:21 +01:00
parent a025dae28d
commit 726d97720e
2 changed files with 159 additions and 35 deletions
--- a/index.html
+++ b/index.html
@ -1,7 +1,16 @@
 <html>
+
 <head>
-<script src="index.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+    <script src="index.js"></script>
 </head>
+
 <body>
 </body>
+
 </html>
--- a/index.js
+++ b/index.js
@ -1,55 +1,170 @@
 "use strict";

-document.addEventListener('DOMContentLoaded', () => init());
+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() {
-    function start() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    ctx = canvas.getContext('2d');
    document.body.insertBefore(canvas, document.body.childNodes[0]);
-        document.addEventListener('keydown', controls);
-        run();
-
-        for (let i = 0; i < 15; i++) add();
-    }
+    window.addEventListener('keydown', (e) => Key.onKeydown(e));
+    window.addEventListener('keyup', (e) => Key.onKeyup(e));

    function run() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        update();
+        refresh();
        requestAnimationFrame(run);
    }

-    function controls(e) {
-        switch (e.key) {
-            case 'ArrowUp': add(); break;
-            case 'ArrowDown': remove(); break;
-        }
-    }
-
    // -------------------------------------------------------------------
+    let gstate = 1;
+    let intro = new Intro();
+    let score = new Score();
+    let bar = new Bar();

-    let balls = [];
-
-    function remove() {
-        balls.pop();
+    function joy_fire() {
+        switch (gstate) {
+            case 0: // Waiting to start
+                newGame();
+                break;
+            case 1: // Playing...
+                break;
+            case 2: // Game Over
+                newGame();
+                break;
+        }
    }

-    function add() {
-        let x = Math.floor(Math.random() * canvas.width);
-        let y = Math.floor(Math.random() * canvas.height);
-        let speed = 1 + Math.floor(Math.random() * 10);
-        let angle = Math.floor(Math.random() * 360);
-
-        balls.push(new ball(x, y, speed, angle));
+    function newGame() {
+        gstate = 1;
+        score.reset();
+        bar.reset();
    }

-    function update() {
-        balls.forEach(b => b.update());
+    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;
+        }
    }

-    start();
+    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 {