//Constants
const KEY_UP = 38;
const KEY_DOWN = 40;
const KEY_LEFT = 37;
const KEY_RIGHT = 39;
const KEY_SPACE = 32;
let canvas;
let ctx;
let ship;
let bullets = [];
// Event handling
document.body.onload = setup;
document.body.onkeydown = processKeyDown;
document.body.onkeyup = processKeyUp;
document.getElementById("start-button").onclick = function(event) {
event.target.style.display = "none";
draw();
};
function setup() {
canvas = document.getElementById("asteroids-canvas");
ctx = canvas.getContext("2d");
// Create a Ship
ship = new Ship(canvas.width / 2, canvas.height / 2);
}
function draw() {
// Clear the previous frame
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the ship
ship.draw(ctx);
update();
window.requestAnimationFrame(draw);
}
function update() {
ship.update();
}
function processKeyDown(event) {
if(event.keyCode == KEY_LEFT) {
ship.rotating = -1;
} else if(event.keyCode == KEY_RIGHT) {
ship.rotating = 1;
} else if(event.keyCode == KEY_UP) {
ship.moving = true;
} else if(event.keyCode == KEY_DOWN) {
ship.breaking = true;
} else if(event.keyCode == KEY_SPACE) {
ship.shoot();
}
}
function processKeyUp(event) {
if(event.keyCode == KEY_LEFT) {
ship.rotating = 0;
} else if(event.keyCode == KEY_RIGHT) {
ship.rotating = 0;
} else if(event.keyCode == KEY_UP) {
ship.moving = false;
} else if(event.keyCode == KEY_DOWN) {
ship.breaking = false;
}
}