Space Game w/Canvas

by sirfizx

HTML

<title>Space Arcade Game</title>
<body style="background-color:black">
    <canvas id="can" height="300" width="500" style="position:absolute;top:0;left:0"></canvas>
    <img id="back" style="display:none" src="http://www.howtogeek.com/wp-content/uploads/2012/12/Plain-Black-Wallpaper.png#black%201920x1080" />
</body>

JavaScript

var can, ctx, back, xBack = 0,
    xIncr = 1,
    imgWidth = 1498,
    shipX = 10,
    shipY = 140,
    target = [1, 1, 1, 1, 1],
    targetX = [],
    targetY = [],
    targetSpeed = 1.5,
    phase = 0.1,
    targets = 4,
    bulletX, bulletY, score = 0;

function init() {
    back = document.getElementById("back");
    can = document.getElementById("can");
    ctx = can.getContext("2d");
    ctx.font = "14pt Helvetica";
    newTargets();
    animate();
    can.addEventListener("mousemove", move, false);
    can.addEventListener("touchmove", tMove, false);
    can.addEventListener("mouseup", newBullet, false);
}

function newTargets() {
    for (i = 0; i < targets; i++) {
        target[i] = 1;
        targetX[i] = can.width + 10 + i * 50;
        targetY[i] = i * Math.PI / 2;
    }
}

// There is a maximum of 1 bullet
// If user shoots again, old bullet is gone
// If bulletX = 0, there is no bullet

// User clicked mouse or lifted finger
function newBullet(e) {
    bulletX = 35;
    bulletY = shipY + 10;
}

function animate() {
    model();
    drawBack();
    drawShip();
    drawBullet();
    drawTarget();
    drawScore();
    setTimeout(animate, 15);
}

function model() {
    // if there is a bullet, advance it
    if (bulletX) bulletX = bulletX + 2;
    // if the bullet goes off the right edge, zero it
    if (bulletX > can.width) bulletX = 0;
    // move targets
    for (i = 0; i < targets; i++) {
        targetX[i] -= targetSpeed;
        targetY[i] += phase;
    }
    // if last target off left edge of screen,
    // generate new set
    if (targetX[targets - 1] < 0) newTargets();
}

function drawBack() {
    // pan background
    xBack -= xIncr;
    ctx.drawImage(back, xBack, 0);
    // draw new copy at right edge of old copy
    ctx.drawImage(back, xBack + imgWidth, 0);
    // if background scrolled off screen, reset
    if (xBack <= -1 * imgWidth) xBack += imgWidth;
}


function drawTarget() {
    ctx.strokeStyle = "red";
    // for each target:
   ...