jdg/breakout
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
José David Guillén
2021-11-12 01:16:21 +01:00
parent a025dae28d
commit 726d97720e
2 changed files with 159 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -1,7 +1,16 @@
<html> <html>
<head> <head>
<script src="index.js"></script> <style>
body {
margin: 0;
padding: 0;
}
</style>
<script src="index.js"></script>
</head> </head>
<body> <body>
</body> </body>
</html> </html>

183
index.js
View File

@ -1,55 +1,170 @@
"use strict"; "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"); let ctx, canvas = document.createElement("canvas");
function init() { function init() {
function start() { canvas.width = window.innerWidth
canvas.width = window.innerWidth canvas.height = window.innerHeight
canvas.height = window.innerHeight ctx = canvas.getContext('2d');
ctx = canvas.getContext('2d'); document.body.insertBefore(canvas, document.body.childNodes[0]);
document.body.insertBefore(canvas, document.body.childNodes[0]); window.addEventListener('keydown', (e) => Key.onKeydown(e));
document.addEventListener('keydown', controls); window.addEventListener('keyup', (e) => Key.onKeyup(e));
run();
for (let i = 0; i < 15; i++) add();
}
function run() { function run() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
update(); refresh();
requestAnimationFrame(run); requestAnimationFrame(run);
} }
function controls(e) { // -------------------------------------------------------------------
switch (e.key) { let gstate = 1;
case 'ArrowUp': add(); break; let intro = new Intro();
case 'ArrowDown': remove(); break; 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;
} }
} }
// ------------------------------------------------------------------- function newGame() {
gstate = 1;
let balls = []; score.reset();
bar.reset();
function remove() {
balls.pop();
} }
function add() { function refresh() {
let x = Math.floor(Math.random() * canvas.width); switch (gstate) {
let y = Math.floor(Math.random() * canvas.height); case 0: // Waiting to start
let speed = 1 + Math.floor(Math.random() * 10); intro.update();
let angle = Math.floor(Math.random() * 360); break;
case 1: // Playing...
balls.push(new ball(x, y, speed, angle)); bar.update();
} score.update();
break;
function update() { case 2: // Game Over
balls.forEach(b => b.update()); 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 { class ball {