Turret Auto-aim
Testing auto-aiming formula.
HTML
<small>WASD or Arrows to move. Click to shoot. Space to pause.</small>
<canvas id="stage">
It seems your current browser does not support HTML5 Canvas.
Please try using one of the following browsers:<br>
<a href="http://www.mozilla.org/firefox">Firefox</a><br>
<a href="http://www.google.com/chrome">Google Chrome</a><br>
<a href="http://www.opera.com/">Opera</a>
</canvas>
<small id="debug"><small>
CSS
body {
background-color: #111;
color: #999;
font-family: verdana, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
a {
color: #9c3;
text-decoration: none;
}
#stage {
background-color: #000;
display: block;
}
JavaScript
// Need this method for inheritance
Object.create = Object.create || function (o) {
function F() {}
F.prototype = o;
return new F();
};
// Copy properties of object b into a
function merge(a, b) { for (var i in b) a[i] = b[i]; }
// Used instead of child.prototype = new supertype();
function extend(supertype, child) { child.prototype = Object.create(supertype.prototype); }
/*****************
* Game Object *
*****************/
var Game = function(canvas) {
this.canvas = canvas || document.createElement("canvas");
this.stageWidth = 800;
this.stageHeight = 600;
this.canvas.width = this.stageWidth;
this.canvas.height = this.stageHeight;
this.ctx = this.canvas.getContext("2d");
this.ctx.textBaseline = "top";
this.ctx.font = "bold 12px Verdana,sans-serif";
this.timer = 0;
this.fps = 50;
this.entities = [];
this.player = null;
this.collisionGroups = {
friendlies: [],
friendlyBullets: [],
enemies: [],
enemyBullets: []
};
this.img = {};
this.input = {
up: false,
down: false,
left: false,
right: false,
click: null
};
};
// Function called each frame
Game.prototype.step = function() {
var now = Date.now(), cg = this.collisionGroups;
this.stepEntities((now - this.lastT) / 1000);
this.detectEntityCollisions(cg.friendlies, cg.enemyBullets);
this.detectEntityCollisions(cg.enemies, cg.friendlyBullets);
this.renderEntities();
if (this.player && this.player.isDead()) {
this.player = null;
this.pause("You Lost :(");
}
if (this.entities.length === 1 && this.entities[0] === this.player) {
this.pause("You Win! :D");
}
this.input.click = null;
this.lastT = now;
};
Game.prototype.stepEntities = function(dt) {
var ents = this.entities,
i = ents.length;
while (i-- > 0) ents[i].step(dt, this);
if (this.debug) this.debug.innerHTML = (1/dt | 0) + "...