diff --git a/Bar.js b/Bar.js new file mode 100644 index 0000000..9b2cd4c --- /dev/null +++ b/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); + } + } +} diff --git a/Intro.js b/Intro.js new file mode 100644 index 0000000..f133767 --- /dev/null +++ b/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); + } +} diff --git a/Key.js b/Key.js new file mode 100644 index 0000000..fecd33f --- /dev/null +++ b/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]; + } +} \ No newline at end of file diff --git a/Score.js b/Score.js new file mode 100644 index 0000000..474d733 --- /dev/null +++ b/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); + } + } +}