Missile-Firing Ship

v1 Ship fires straight shots which damage asteroids. v2 Ship fires missiles which veer towards nearest target. v3 Ship fires missiles which lock onto a specific target.

by djwelsh

HTML

<canvas id="c" width="400" height="400"></canvas>
<canvas id="_c" width="120" height="80"></canvas>
<canvas id="_c2" width="100" height="100"></canvas>
<div id="debug"></div>

CSS

#_c, #_c2 {
    display: inline-block;
    outline: 1px dashed #ccc;
    
}
#c {
    outline: 1px solid #ccc;
    width: 400px;
    height: 400px;
    margin: 10px;
}
#debug {
    position: fixed;
    right: 0px;
    top: 0px;
    width: 120px;
}

JavaScript

//Element stuff
var main_canvas, 
    main_ctx, 
    minimap_square_canvas, 
    minimap_rect_ctx, 
    minimap_circle_canvas, 
    minimap_circle_ctx;

//Dimensions of canvas
var canvas_width, canvas_height;

//Store the ship and the other objects
var ship = null;
var dummies = [];
var projectiles = [];

//Size of universe in notional units. For now, 1nu = 1px (no zoom).
var universe = {
    leftWall : 0,
    rightWall : 5000,
    topWall : 0,
    bottomWall : 5000
};

//Stores the size of the largest object we are going to draw.
var largestObjectSize = 0;

//Position of the mouse on the canvas.
var mouse = {
    x : 0,
    y : 0
};

var minimapScale = 0.1;

//Info needed to create a rectangular minimap
var minimapRect = {
    //How much smaller than 1px=1uu the universe should be displayed in the minimap; 0.2 => 1px=5uu
    scale : minimapScale,
    //How much of the space around the ship will appear in the minimap, in uu. This takes into account the current scale. It also adds a buffer around the edges of the visible minimap so we begin to draw large circles before their centerpoint hits the cutoff point.
    areaToShow : {
        minX : 0,
        maxX : 0,
        minY : 0,
        maxY : 0
    },
    //Physically where should the minimap appear on the main canvas?
    //--do this later; just paste the _canvas contents to the right xy with drawImage 
    physicalPositionOnCanvas : {
        x : 30,
        y : 310
    },
    physicalSizeOnCanvas : {
        width : 120,
        height : 80
    }
};


var minimapCircle = {
    //How much smaller than 1px=1uu the universe should be displayed in the minimap; 0.2 => 1px=5uu
    scale : minimapScale,
    //How much of the space around the ship will appear in the minimap, in uu. This takes into account the current scale. It also adds a buffer around the edges of the visible minimap so we begin to draw large circles before their centerpoint hits the cutoff point.
    areaToShow : {
        centerX : 0,
       ...