Moved classes his own files

Bar.js

@@ -0,0 +1,55 @@
+class Bar {
+    constructor(ctx, key) {
+        this.ctx = ctx;
+        this.key = key;
+
+        this.w = 100;
+        this.h = 20;
+        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);
+        }
+    }
+}

Intro.js

@@ -0,0 +1,17 @@
+class Intro {
+    constructor(ctx) {
+        this.ctx = ctx;
+        this.x = ctx.canvas.width;
+        this.y = ctx.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) {
+        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);
+    }
+}

Key.js

@@ -0,0 +1,24 @@
+class Key {
+    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];
+    }
+}

Score.js

@@ -0,0 +1,25 @@
+class Score {
+    constructor(ctx) {
+        this.ctx = ctx;
+        this.reset();
+
+        this.ctx.font = "30px Consolas";
+        let m = ctx.measureText('Score: 00000');
+        this.x = ctx.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) {
+            this.ctx.font = "30px Consolas";
+            this.ctx.fillStyle = 'Black';
+            this.ctx.fillText('Score: ' + this.points, this.x, this.y);
+        }
+    }
+}