Hit Boxes!

Dueling Squares. Watch out, Ubisoft.

by Taylor Lopez

HTML

<canvas id="canvas" width=640 height=480></canvas>

CSS

html
{
    font-family: Arial;
    color: grey;
}

#canvas
{
    width: 640px;
    height: 480px;
    border: solid 1px #BBB;
}

JavaScript

/******** START shiv for cross-browser requestAnimationFrame, DO NOT EDIT; ********/
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x <
vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame =
window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; }
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());
/******** END requestAnimationFrame shiv ********/


var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var SCREEN_WIDTH = 640;
var SCREEN_HEIGHT = 480;

var fps = 60;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;

var keys =        // Keeps track of which keys are currently down
{
    left: false,
    up: false,
    right: false,
    down: false,
    punch: false
};

document.addEventListener("keydown", handleKeyDown);
document.addEventListener("keyup", handleKeyUp);

// ctx.fillStyle = "#FF0000";
// ctx.strokeStyle = "#0000FF";
// ctx.fillRect(50, 50, 100, 100);
// ctx.strokeRect(50, 50, 100, 100);



/********** CLASSES **********/

function Entity()
{
    this.pos = new Vec2d(0, 0);
    this.size = new Vec2d(32, 32);
    this.curVel = new Vec2d(0, 0);
    this.maxVel = new Vec2d(.2, .2);    // pixels per milisecond
    this.color = new Color(0, 0, 0);
    this.movable = false;
}
Entity.prototype.draw = function()
{
    ctx.strokeStyle = this.color.toString();
    ctx.strokeRect(this.pos.x + .5, this.pos.y + .5, this.size.x,...