From 726d97720e62fd25a297102a7991ab49bd8344d5 Mon Sep 17 00:00:00 2001 From: JDG Date: Fri, 12 Nov 2021 01:16:21 +0100 Subject: [PATCH] First commit --- index.html | 11 +++- index.js | 183 +++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 159 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index f671e7e..28d9a14 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,16 @@ + - + + + + \ No newline at end of file diff --git a/index.js b/index.js index 9deb08b..4a378e1 100644 --- 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(); - } + canvas.width = window.innerWidth + canvas.height = window.innerHeight + ctx = canvas.getContext('2d'); + document.body.insertBefore(canvas, document.body.childNodes[0]); + 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(); + + function joy_fire() { + switch (gstate) { + case 0: // Waiting to start + newGame(); + break; + case 1: // Playing... + break; + case 2: // Game Over + newGame(); + break; } } - // ------------------------------------------------------------------- - - let balls = []; - - function remove() { - balls.pop(); + function newGame() { + gstate = 1; + score.reset(); + bar.reset(); } - 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 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 {