simple game
HTML
<canvas id="board" />
CSS
canvas {
background-color:cornflowerblue;
}
JavaScript
var canvas;
var surface
var currentScreen;
var mainGameScreen;
var mouse;
var fullCircle = Math.PI * 2;
function beginLoop() {
var frameId = 0;
var lastFrame = Date.now();
function loop() {
var thisFrame = Date.now();
var elapsed = thisFrame - lastFrame;
frameId = window.requestAnimationFrame(loop);
currentScreen.update(elapsed);
currentScreen.draw(surface);
lastFrame = thisFrame;
}
loop();
}
canvas = document.querySelector('canvas#board');
canvas.setAttribute('width', 600);
canvas.setAttribute('height', 300);
surface = canvas.getContext('2d');
mouse = (function (target) {
var isButtonDown = false;
target.addEventListener('mousedown', function () {
isButtonDown = true;
});
target.addEventListener('mouseup', function () {
isButtonDown = false;
});
return {
isButtonDown: function () {
return isButtonDown;
}
};
}(document));
function makeEnemyShip(x, y) {
var position = {
x: x,
y: y
};
var turnSpeed = fullCircle / 200;
var speed = 2;
var orientation = 0;
var target = findNewTarget();
function draw(ctx) {
ctx.save();
ctx.translate(position.x, position.y);
ctx.rotate(orientation);
ctx.fillStyle = 'yellow';
ctx.fillRect(-3, -1, 6, 2);
ctx.restore();
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(target.x, target.y, 2, 0, Math.PI * 2, true);
ctx.fill();
}
function update(elapsed) {
var y = target.y - position.y;
var x = target.x - position.x;
var d2 = Math.pow(x, 2) + Math.pow(y, 2);
if (d2 < 16) {
target = findNewTarget();
} else {
var angle = Math.atan2(y, x);
var delta = angle - orientation;
var delta_abs = Math.abs(delta);
if (delta_abs > Math.PI) {
...