Game Engine

by wio_dude

HTML

<img id="sprite-sheet" src="http://i.imgur.com/iJnWBXr.png" />
<canvas width="256" height="160" id="game"></canvas><br/>
<div id="controls">
<input id="up" type="button" value="^" /><br/>
<input id="left" type="button" value="&lt;" />
<input id="right" type="button" value="&gt;" /><br/>
<input id="down" type="button" value="v" /><br/>
</div>
Health: <span id="health"></span><br/>
Time: <span id="time"></span>

CSS

#sprite-sheet {
    display: block;
}

canvas#game {
    border: 5px solid black;   
}

JavaScript

function Sprite(image, x, y, width, height) {
    this.image = image;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}
Sprite.prototype.draw = function(context, x, y, width, height) {
    context.drawImage(
        this.image, 
        this.x, 
        this.y, 
        this.width, 
        this.height, 
        x, 
        y, 
        width, 
        height
    );
};

function Tile(name, sprite, properties){
    this.name = name;
    this.sprite = sprite;
    this.properties = {}; 
}
Tile.prototype.draw = function(context, x, y, width, height) {
    this.sprite.draw(
        context,
        x,
        y,
        width,
        height
    );
};

function Vector(components) {
    this.components = components;
};
Vector.prototype.add = function(that) {
    var length = Math.min(this.components.length, that.components.length);
    var components = new Array(length);
    for (var i = 0; i < length; i++) {
        components[i] = this.components[i] + that.components[i];
    }
    return new Vector(components);
};
Vector.prototype.multiply = function(scalar) {
    var length = this.components.length
    var components = new Array(length);
    for (var i = 0; i < length; i++) {
        components[i] = scalar * this.components[i];
    }
    return new Vector(components);
};
Vector.prototype.nonZero = function() {
    for (var i = 0; i < this.components.length; i++) {
        if (this.components.length !== 0) {
            return false;
        }
    }
    return true;
};

function Map(rows, columns){
    this.rows = rows;
    this.columns = columns;
    this.tiles = new Array(this.rows);
    for (var r = 0; r < this.rows; r++) {
        this.tiles[r] = new Array(this.columns);
        for (var c = 0; c < this.columns; c++) {
            this.tiles[r][c] = 0;
        }
    }
}
Map.prototype.find = function(tile) {
    for (var r = 0; r < this.rows; r++) {
        for (var c = 0; c < this.columns; c++) {
            if (this.tiles[r][c]...