breakout/index.js
2021-11-12 18:42:55 +01:00

99 lines
2.1 KiB
JavaScript

"use strict";
document.addEventListener('DOMContentLoaded', init);
function init() {
let ctx, canvas = document.createElement("canvas");
canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx = canvas.getContext('2d');
document.body.insertBefore(canvas, document.body.childNodes[0]);
function run() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
refresh();
requestAnimationFrame(run);
}
// -------------------------------------------------------------------
let gstate = 1;
let key = new Key(controls);
let intro = new Intro(ctx);
let score = new Score(ctx);
let bar = new Bar(ctx, key);
function controls(e) {
switch (gstate) {
case 0: // Waiting to start
if (e.code=='Space') newGame();
break;
case 1: // Playing...
break;
case 2: // Game Over
if (e.code=='Space') newGame();
break;
}
}
function newGame() {
gstate = 1;
score.reset();
bar.reset();
}
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;
}
}
run();
}
class ball {
constructor(x, y, speed, angle) {
this.x = x;
this.y = y;
this.speed = speed;
this.angle = angle;
this.color = 'black';
this.size = 20;
}
update() {
this.move();
this.draw();
}
draw() {
this.ctx.fillStyle = this.color;
this.ctx.fillRect(this.x, this.y, this.size, this.size);
}
move() {
this.x += this.speed * Math.cos(this.angle);
this.y += this.speed * Math.sin(this.angle);
if (this.x < 0 || this.x > this.ctx.canvas.width || this.y < 0 || this.y > this.ctx.canvas.height)
this.bounce();
}
bounce() {
this.angle += 180;
}
}