moth/www/tanks/tanks.js

214 lines
5.4 KiB
JavaScript

function dbg(o) {
e = document.getElementById("debug");
e.innerHTML = o;
}
function torgba(color, alpha) {
var r = parseInt(color.substring(1,3), 16);
var g = parseInt(color.substring(3,5), 16);
var b = parseInt(color.substring(5,7), 16);
return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
}
function Tank(ctx, width, height, color, sensors) {
var craterStroke = torgba(color, 0.5);
var craterFill = torgba(color, 0.2);
var sensorStroke = torgba(color, 0.4);
var maxlen = 0;
this.x = 0;
this.y = 0;
this.rotation = 0;
this.turret = 0;
// Do all the yucky math up front
this.sensors = new Array();
for (i in sensors) {
s = sensors[i];
// r, angle, width, turret
this.sensors[i] = new Array();
this.sensors[i][0] = s[0];
this.sensors[i][1] = s[1] - (s[2]/2);
this.sensors[i][2] = s[1] + (s[2]/2);
this.sensors[i][3] = s[3]?1:0;
if (s[0] > maxlen) {
maxlen = s[0];
}
}
// Set up our state, for later interleaved draw requests
this.set_state = function(x, y, rotation, turret, flags, sensor_state) {
this.x = x;
this.y = y;
this.rotation = rotation;
this.turret = turret;
this.fire = flags & 1;
this.led = flags & 2;
this.sensor_state = sensor_state;
}
this.draw_crater = function() {
var points = 7;
var angle = Math.PI / points;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.lineWidth = 2;
ctx.strokeStyle = craterStroke;
ctx.fillStyle = craterFill;
ctx.beginPath();
ctx.moveTo(12, 0);
for (i = 0; i < points; i += 1) {
ctx.rotate(angle);
ctx.lineTo(6, 0);
ctx.rotate(angle);
ctx.lineTo(12, 0);
}
ctx.closePath()
ctx.stroke();
ctx.fill();
ctx.restore();
}
this.draw_sensors = function() {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.lineWidth = 1;
for (i in this.sensors) {
var s = this.sensors[i];
var adj = this.turret * s[3];
if (this.sensor_state & (1 << i)) {
// Sensor is triggered
ctx.strokeStyle = "#000";
} else {
ctx.strokeStyle = sensorStroke;
}
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, s[0], s[1] + adj, s[2] + adj, false);
ctx.closePath();
ctx.stroke();
}
ctx.restore();
}
this.draw_tank = function() {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.fillStyle = color;
ctx.fillRect(-5, -4, 10, 8);
ctx.fillStyle = "#777";
ctx.fillRect(-7, -9, 15, 5);
ctx.fillRect(-7, 4, 15, 5);
ctx.rotate(this.turret);
if (this.fire) {
ctx.fillStyle = color;
ctx.fillRect(0, -1, 45, 2);
} else {
if (this.led) {
ctx.fillStyle = "#f00";
} else {
ctx.fillStyle = "#000";
}
ctx.fillRect(0, -1, 10, 2);
}
ctx.restore();
}
this.draw_wrap_sensors = function() {
var orig_x = this.x;
var orig_y = this.y;
for (x = this.x - width; x < width + maxlen; x += width) {
for (y = this.y - height; y < height + maxlen; y += height) {
if ((-maxlen < x) && (x < width + maxlen) &&
(-maxlen < y) && (y < height + maxlen)) {
this.x = x;
this.y = y;
this.draw_sensors();
}
}
}
this.x = orig_x;
this.y = orig_y;
}
}
function start(game) {
var canvas = document.getElementById('battlefield');
var ctx = canvas.getContext('2d');
var loop_id;
canvas.width = game[0];
canvas.height = game[1];
// game[2] is tank descriptions
var turns = game[3];
// Set up tanks
var tanks = new Array();
for (i in game[2]) {
var desc = game[2][i];
tanks[i] = new Tank(ctx, game[0], game[1], desc[0], desc[1]);
}
var frame = 0;
var lastframe = 0;
var fps = document.getElementById('fps');
function update_fps() {
fps.innerHTML = (frame - lastframe);
lastframe = frame;
}
function update() {
var idx = frame % (turns.length + 20);
var turn;
frame += 1;
if (idx >= turns.length) {
return;
}
canvas.width = canvas.width;
turn = turns[idx];
// Draw craters first
for (i in turn) {
t = turn[i];
if (! t) {
tanks[i].draw_crater();
}
}
// Then sensors
for (i in turn) {
t = turn[i];
if (t) {
// Surely there's a better way to do this.
tanks[i].set_state(t[0], t[1], t[2], t[3], t[4], t[5]);
tanks[i].draw_wrap_sensors();
}
}
// Then tanks
for (i in turn) {
t = turn[i];
if (t) {
tanks[i].draw_tank()
}
}
}
loop_id = setInterval(update, 66);
setInterval(update_fps, 1000);
}