Game Engine

by wio_dude

HTML

<img id="sprite-sheet" src="http://i.imgur.com/GHOLQZY.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: none;
}

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

JavaScript

(function(){
    function Frame1(obj) {
        this.x = obj.x;
        this.y = obj.y;
        this.width = obj.width;
        this.height = obj.height;
    }
    
    function Frame4(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    
    function Frame() {
        if (arguments.length === 4) {
            Frame4.apply(this, arguments);
        } else if (arguments.length === 1) {
            if (arguments[0] instanceof Array) {
                Frame4.apply(this, arguments[0]);
            } else {
                Frame1.apply(this, arguments);
            }
        }
    }
    
    Frame.prototype.toArray = function() {
        return [this.x, this.y, this.width, this.height];
    };
    
    
    window.Frame = Frame;
}());

(function() {
    function Point1(obj) {
        this.x = obj.x;
        this.y = obj.y;
    }
    
    function Point2(x,y) {
        this.x = x;
        this.y = y;
    }
    
    function Point() {
        if (arguments.length === 2) {
            Point2.apply(this, arguments);
        } else if (arguments.length === 1) {
            if (arguments[0] instanceof Array) {
                Point2.apply(this, arguments[0]);
            } else {
                Point1.apply(this, arguments);
            }
        }
        
    }
    
    Point.prototype.toArray = function() {
        return [this.x, this.y];
    };
    
    window.Point = Point;
}());




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 =...