frb.js

MathHelper = {
    e: Math.E,
    log10E: 0.4342945,
    log2E: 1.442695,
    pi: Math.PI,
    piOver2: (Math.PI / 2.0),
    piOver4: (Math.PI / 4.0),
    twoPi: (Math.PI * 2.0),
    invert: function (value) {
        return 0 - value;
    },
    clamp: function (value, min, max) {
        if (value < min) return min;
        else if (value > max) return max;
        else return value;
    },
    lerp: function(value1, value2, amount) {
        return value1 + (value2 - value1) * amount;
    },
    toDegrees: function(radians) {
        return (float)(radians * 57.295779513082320876798154814105);
    },
    toRadians: function(degrees) {
        return (float)(degrees * 0.017453292519943295769236907684886);
    }
};

/***********************
    Framework
***********************/

var frb = (function(frb) {

/* Simple JavaScript Inheritance. By John Resig http://ejohn.org/ MIT Licensed. */
(function(){var initializing=false,fnTest=/xyz/.test(function(){xyz;})?/\b_super\b/:/.*/;this.Class=function(){};Class.extend=function(prop){var _super=this.prototype;initializing=true;var prototype=new this();initializing=false;for(var name in prop){prototype[name]=typeof prop[name]=="function"&&typeof _super[name]=="function"&&fnTest.test(prop[name])?(function(name,fn){return function(){var tmp=this._super;this._super=_super[name];var ret=fn.apply(this,arguments);this._super=tmp;return ret;};})(name,prop[name]):prop[name];}
function Class(){if(!initializing&&this.init)
this.init.apply(this,arguments);}
Class.prototype=prototype;Class.prototype.constructor=Class;Class.extend=arguments.callee;return Class;};})();

Class.prototype.toJson = function() {
    return JSON.stringify(this, null, 0);
}

frb.keys = { "Backspace": 8, "Tab": 9, "Enter": 13, "Shift": 16, "Ctrl": 17, "Alt": 18, "PauseBreak": 19, "CapsLock": 20, "Esc": 27, "Space": 32, "PageUp": 33, "PageDown": 34, "End": 35, "Home": 36, "Left": 37, "Up": 38, "Right": 39, "Down": 40, "Insert": 45, "Delete": 46, "0": 48, "1": 49, "2": 50, "3": 51, "4": 52, "5": 53, "6": 54, "7": 55, "8": 56, "9": 57, "A": 65, "B": 66, "C": 67, "D": 68, "E": 69, "F": 70, "G": 71, "H": 72, "I": 73, "J": 74, "K": 75, "L": 76, "M": 77, "N": 78, "O": 79, "P": 80, "Q": 81, "R": 82, "S": 83, "T": 84, "U": 85, "V": 86, "W": 87, "X": 88, "Y": 89, "Z": 90, "Windows": 91, "RightClick": 93, "Num0": 96, "Num1": 97, "Num2": 98, "Num3": 99, "Num4": 100, "Num5": 101, "Num6": 102, "Num7": 103, "Num8": 104, "Num9": 105, "Num*": 106, "Num+": 107, "Num-": 109, "Num.": 110, "Num/": 111, "F1": 112, "F2": 113, "F3": 114, "F4": 115, "F5": 116, "F6": 117, "F7": 118, "F8": 119, "F9": 120, "F10": 121, "F11": 122, "F12": 123, "NumLock": 144, "ScrollLock": 145, "MyComputer": 182, "MyCalculator": 183, ";": 186, "=": 187, ",": 188, "-": 189, ".": 190, "/": 191, "`": 192, "[": 219, "\\": 220, "]": 221, "'": 222 };

frb.AttachableList = function() {
    this.list = new Array();
    this.length = 0;
};

frb.AttachableList.prototype.get = function(index) {
    return this.list[index];
};

frb.AttachableList.prototype.contains = function (value) {
    return this.list.indexOf(value) >= 0;
};

frb.AttachableList.prototype.removeAll = function() {
    var items = this.list.slice(0);
    for(var i=0;i<items.length;i++) {
        frb.AttachableList.removeFromAll(items[i]);
    }
};

frb.AttachableList.prototype.push = function (value) {
    this.add(value);
};

frb.AttachableList.prototype.add = function (value) {
    if (!this.contains(value)) {
        this.list.push(value);
        this.length = this.list.length;

        if (!value.listsBelongingTo) value.listsBelongingTo = new Array();
        value.listsBelongingTo.push(this);
    }
};

frb.AttachableList.prototype.pop = function () {
    if (this.length <= 0) throw "no more items to pop";

    var item = this.get(this.length-1);    

    this.remove(item);
    return item;
}

frb.AttachableList.prototype.remove = function (value) {
    var index = this.list.indexOf(value);

    if (index >= 0) {
        this.list.splice(index, 1);
        this.length = this.list.length;
        
        if (value.listsBelongingTo) {
            var listIndex = value.listsBelongingTo.indexOf(this);
            if (listIndex >= 0) {
                value.listsBelongingTo.splice(listIndex, 1);
            }
        }
    }
};

frb.AttachableList.removeFromAll = function (value) {
    if (value.listsBelongingTo) {
        var numLists = value.listsBelongingTo.length;
        for (var i = 0; i < numLists; i++) {
            if (value.listsBelongingTo[i] === undefined) continue;
            value.listsBelongingTo[i].remove(value);
        }
    }
};

frb.ResourcePool = function() {
    this.active = new frb.AttachableList();
    this.available = new frb.AttachableList();
};
frb.ResourcePool.prototype.add = function(factory) {
    var newItem = null;

    // now check and see if we can use a recycled item
    if (this.available.length > 0) {
        newItem = this.available.pop();
    }


    if (newItem === null) {
        // no recycled item available, make a new one
        newItem = factory();
    }

    this.active.add(newItem);

    return newItem;
};
frb.ResourcePool.prototype.return = function(item) {
    this.active.remove(item);
    this.available.add(item);
};

frb.TimeManager = {
    start: new Date(),
    last: new Date(),
    secondDifference: 0,
    secondDifferenceFromStart: 0,
    update: function () {
        var startMilli = this.start.getTime();
        var lastMilli = this.last.getTime();
        this.last = new Date();
        var nowMilli = this.last.getTime();
        var diff = nowMilli - lastMilli;
        var startDiff = nowMilli - startMilli;
        this.secondDifference = diff / 1000;
        this.secondDifferenceFromStart = startDiff / 1000;
    }
}

frb.PositionedObject = Class.extend({
    init: function () {
        this.x = 0;
        this.y = 0;
        this.xVelocity = 0;
        this.yVelocity = 0;
        this.xAcceleration = 0;
        this.yAcceleration = 0;
        this.zRotation = 0;
        this.zRotationAcceleration = 0;
        this.zRotationVelocity = 0;
        this.listsBelongingTo = new Array();
    },
    update: function () {
        var diff = frb.TimeManager.secondDifference;

        this.x += this.xVelocity * diff + this.xAcceleration * diff;
        this.y += this.yVelocity * diff + this.yAcceleration * diff;
        this.xVelocity += this.xAcceleration * diff;
        this.yVelocity += this.yAcceleration * diff;

        this.zRotation += this.zRotationVelocity * diff + this.zRotationAcceleration * diff;
        this.zRotationVelocity += this.zRotationAcceleration * diff;

        this.xTarget = this.x;
        this.yTarget = MathHelper.invert(this.y);

        this.alpha = MathHelper.clamp(this.alpha, 0, 1);
    },
    removeSelfFromListsBelongingTo: function () {
        frb.AttachableList.removeFromAll(this);
    }
});

frb.Camera = function(engine) {
    this.engine = engine;
    this.x = 0;
    this.y = 0;
}
frb.Camera.prototype.start = function () {
    this.engine.context.save();
    this.engine.context.translate((0 - this.x) + this.engine.graphics.width / 2, this.y + this.engine.graphics.height / 2);
};
frb.Camera.prototype.end = function () {
    this.engine.context.restore();
};

frb.InputManager = Class.extend({
    init: function(engine) {
        this.engine = engine;
    },
    mouse: {
        x: 0,
        y: 0,
        worldX: 0, 
        worldY: 0,
        leftButton: false,
        rightButton: false,
        middleButton: false,
        onCanvas: false
    },
    keyboard: {
        pressed: {},
        chars: {8:"Backspace",9:"Tab",13:"Enter",16:"Shift",17:"Ctrl",18:"Alt",19:"PauseBreak",20:"CapsLock",27:"Esc",32:"Space",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"Left",38:"Up",39:"Right",40:"Down",45:"Insert",46:"Delete",48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",65:"A",66:"B",67:"C",68:"D",69:"E",70:"F",71:"G",72:"H",73:"I",74:"J",75:"K",76:"L",77:"M",78:"N",79:"O",80:"P",81:"Q",82:"R",83:"S",84:"T",85:"U",86:"V",87:"W",88:"X",89:"Y",90:"Z",91:"Windows",93:"RightClick",96:"Num0",97:"Num1",98:"Num2",99:"Num3",100:"Num4",101:"Num5",102:"Num6",103:"Num7",104:"Num8",105:"Num9",106:"Num*",107:"Num+",109:"Num-",110:"Num.",111:"Num/",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",182:"MyComputer",183:"MyCalculator",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},
        keyDown: function (key) {
            return this.pressed[frb.keys[key]] === true;
        }
    },
    update: function () {
        // update the mouse's world coordinates
        var left = this.engine.SpriteManager.camera.x - (this.engine.graphics.width / 2);
        var top = MathHelper.invert(this.engine.SpriteManager.camera.y) - (this.engine.graphics.height / 2);
        this.mouse.worldX = left + this.mouse.x;
        this.mouse.worldY = MathHelper.invert(top + this.mouse.y);
    }
});

frb.SpriteManager = Class.extend({
    init:function(engine) {
        this.engine = engine;
        this.camera = new frb.Camera(engine);
    },
    images: {},
    sprites: new frb.AttachableList(),
    add: function (name, loadedCallback) {
        var path = name;

        // handle the case where we want a static URL
        if (name.indexOf("http") < 0) {
            path = "content/" + name;

            if (path.indexOf(".") < 0) path += ".png";
        }

        // now initialize the image
        var img;
        var isDoneLoading = false;
        if (name in this.images) {
            img = this.images[name];
            isDoneLoading = true;
        }
        else {
            img = new Image();
            img.src = path;
            img.loadEvents = new Array();
            if (loadedCallback)
                img.loadEvents.push(loadedCallback);
            img.onload = function () {
                for (var i = 0; i < img.loadEvents.length; i++) {
                    img.loadEvents[i]();
                }
            };
            this.images[name] = img;
        }

        // now create the sprite
        var sprite = new frb.Sprite(this.engine, name, img, 0, 0, loadedCallback);
        this.sprites.push(sprite);

        if (isDoneLoading) loadedCallback;

        return sprite;
    },
    addCircle: function(radius) {
        var circle = new frb.Circle(this.engine, 0, 0, radius);
        this.sprites.push(circle);

        return circle;
    },
    addLine: function(startx, starty, endx, endy) {
        var line = new frb.Line(this.engine, startx, starty, endx, endy);
        this.sprites.push(line);

        return line;
    },
    update: function () {
        this.engine.updateViewBounds();
        for (var i = 0; i < this.sprites.length; i++) {
            var sprite = this.sprites.get(i);
            sprite.update();
        }
    },
    draw: function () {
        this.camera.start();
        for (var i = 0; i < this.sprites.length; i++) {
            var sprite = this.sprites.get(i);
            sprite.draw();
        }
        this.camera.end();
    },
    reset: function() {
        this.sprites.removeAll();
    }
});

frb.Engine = Class.extend({
    init: function() {
        this.InputManager = new frb.InputManager(this);
        this.SpriteManager = new frb.SpriteManager(this);
    },
    pause: false,
    updateViewBounds: function() {
        // update the view bounds
        var left = this.SpriteManager.camera.x - (this.graphics.width / 2);
        var top = this.SpriteManager.camera.y + (this.graphics.height / 2);
        var bottom = top - this.graphics.height;
        var right = left + this.graphics.width;

        if (!this.viewBounds) this.viewBounds = {top:0, right:0, bottom: 0, left: 0 };
        this.viewBounds.top = top;
        this.viewBounds.right = right;
        this.viewBounds.bottom = bottom;
        this.viewBounds.left = left;
    }
});

frb.Line = frb.PositionedObject.extend({
    init: function(engine, startx, starty, endx, endy) {
        this.engine = engine;
        this.start = new frb.PositionedObject();
        this.start.x = startx;
        this.start.y = starty;

        this.end = new frb.PositionedObject();
        this.end.x = endx;
        this.end.y = endy;

        this.lineWidth = 2;
        this.lineColor = "black";
    },
    update: function() {
        this.start.update();
        this.end.update();
    },
    draw: function() {
        engine.context.save();

        engine.context.globalAlpha = this.alpha;

        engine.context.beginPath();
        
        engine.context.moveTo(this.start.xTarget, this.start.yTarget);
        engine.context.lineTo(this.end.xTarget, this.end.yTarget);

        engine.context.lineWidth = this.lineWidth;
        engine.context.strokeStyle = this.lineColor;

        engine.context.stroke();

        engine.context.restore();
    }
});

frb.Circle = frb.PositionedObject.extend({
    init: function(engine, x, y, radius) {
        this.engine = engine;
        this.radius = radius;

        this.width = radius * 2;
        this.height = this.width;

        this._super();

        this.x = x;
        this.y = y;

        this.alpha = 1;

        this.color = "yellow";
        this.borderColor = "red";
        this.borderWidth = 1;
    },
    draw: function () {
        engine.context.save();
        engine.context.translate(this.xTarget, this.yTarget);

        engine.context.rotate(this.zRotation);

        engine.context.globalAlpha = this.alpha;

        engine.context.beginPath();
        engine.context.arc(0, 0, this.radius, 0 , MathHelper.twoPi, false);
        
        engine.context.fillStyle = this.color;
        engine.context.fill();
        engine.context.lineWidth = this.borderWidth;
        engine.context.strokeStyle = this.borderColor;
        engine.context.stroke();


        engine.context.restore();
    }
});

frb.Sprite = frb.PositionedObject.extend({
    init: function(engine, name, img, x, y, loadedCallback) {
        this.engine = engine;
        this.name = name;
        this.img = img;
        this.width = img.width;
        this.height = img.height;

        this._super();

        this.x = x;
        this.y = y;

        this.alpha = 1;

        // now handle delayed loading
        var sprite = this;
        img.loadEvents.push(function () {
            sprite.width = img.width;
            sprite.height = img.height;
        });
    },
    draw: function () {
        engine.context.save();
        engine.context.translate(this.xTarget, this.yTarget);

        engine.context.rotate(this.zRotation);

        engine.context.globalAlpha = this.alpha;

        if (!this.textureCoordinate) {
            engine.context.drawImage(this.img, this.width / -2, this.height / -2);
        }
        else {
            // this is a sprite sheet
            var srcX = this.width * this.textureCoordinate.left;
            var srcY = this.height * this.textureCoordinate.top;
            var srcW = (this.width * this.textureCoordinate.right) - srcX;
            var srcH = (this.height * this.textureCoordinate.bottom) - srcY;

            engine.context.drawImage(this.img, 0, 0, srcW, srcH, srcW/-2, srcH/-2, srcW , srcH);
        }

        engine.context.restore();
    },
    addTextureCoordinate: function(left, right, top, bottom) {
        this.textureCoordinate = { left:left, right:right, top:top, bottom:bottom };
    }
});
frb.Emitter = function (engine){
    this.engine = engine;
    this.pool = new frb.ResourcePool();
    this.position = {x:0, y:0};
};
frb.Emitter.prototype.items = function() {
    return this.pool.active;
};
frb.Emitter.prototype.emit = function(addFunc) {
    var self = this;
    var newParticle = this.pool.add(addFunc);

    newParticle.alpha = 1;
    newParticle.x = this.position.x;
    newParticle.y = this.position.y;

    return newParticle;
};
frb.Emitter.prototype.emitSprite = function(texture) {
    return this.emit(function() {
        return this.engine.SpriteManager.add(texture)
    });
};
frb.Emitter.prototype.emitCircle = function(r) {
    var circle = this.emit(function() {
        return this.engine.SpriteManager.addCircle(r);
    });
    circle.radius = r;
    return circle;
};

/***********************
    Game initialization
***********************/
frb.start = function (options) {
    engine = new frb.Engine();
    engine.updateFunction = options.update;

    if (!options.clearColor) options.clearColor = "#6495ED";
    engine.clearColor = options.clearColor;


    function coreUpdate() {
        frb.TimeManager.update();
        engine.InputManager.update();

        if (!engine.pause) {
            if (engine.updateFunction) engine.updateFunction();
            engine.SpriteManager.update();

        }
    }

    function coreDraw() {
        engine.context.fillStyle = engine.clearColor;
        engine.context.fillRect(0, 0, engine.graphics.width, engine.graphics.height);

        engine.SpriteManager.draw();

        if (options.draw) options.draw();
    }

    // initialize the canvas

    // create the canvas, if necessary
    if (options.canvas) {
        if (jQuery && options.canvas instanceof jQuery) {
            engine.context = options.canvas.get(0).getContext("2d");
            engine.graphics = { width: options.canvas.width(), height: options.canvas.height() };
        }
        else {
            engine.context = options.canvas.getContext("2d");
            engine.graphics = { width: options.canvas.width, height: options.canvas.height };
        }
    }
    else if (document.getElementsByTagName("canvas").length > 0) {
        var canvasElement = document.getElementsByTagName("canvas").item(0);
        options.canvas = canvasElement;
        engine.context = canvasElement.getContext("2d");
        engine.graphics = { width: canvasElement.width, height: canvasElement.height };
    }
    else {
        engine.graphics = {
            width: 480,
            height: 320
        };

        var canvasElement = document.createElement("canvas");
        canvasElement.setAttribute("width", frb.graphics.width);
        canvasElement.setAttribute("height", frb.graphics.height);
        var body = document.getElementsByTagName("body").item(0);

        body.appendChild(canvasElement);

        options.canvas = canvasElement;
        engine.context = canvasElement.getContext("2d");
    }
    
    if (!engine.graphics.fps) engine.graphics.fps = 60;

    // if the user is using jQuery, start tracking input
    if ($) {
        $(function () {
            // mouse events
            $(options.canvas).mouseenter(function() {
                engine.InputManager.onCanvas = true;
            });
            $(options.canvas).mouseleave(function() {
                engine.InputManager.onCanvas = false;
            });
            $(options.canvas).mousemove(function (e) {
                var relativeXPosition = e.pageX - this.offsetLeft;
                var relativeYPosition = e.pageY - this.offsetTop;
                engine.InputManager.mouse.x = relativeXPosition;
                engine.InputManager.mouse.y = relativeYPosition;
            });
            $(options.canvas).mousedown(function (e) {
                if (e.which === 1) engine.InputManager.mouse.leftButton = true;
                if (e.which === 3) engine.InputManager.mouse.rightButton = true;
                if (e.which === 2) engine.InputManager.mouse.middleButton = true;
            });
            $(options.canvas).mouseup(function (e) {
                if (e.which === 1) engine.InputManager.mouse.leftButton = false;
                if (e.which === 3) engine.InputManager.mouse.rightButton = false;
                if (e.which === 2) engine.InputManager.mouse.middleButton = false;
            });

            // keyboard events
            $(document).keydown(function (e) {
                engine.InputManager.keyboard.pressed[e.which] = true;

                if (frb.keys["Space"] === e.which && options.disableSpaceBar) {
                    e.preventDefault();
                }
            });
            $(document).keyup(function (e) {
                engine.InputManager.keyboard.pressed[e.which] = false;
            });
        });
    }

    (function () {
        engine.updateViewBounds();

        // run the user's initialization code
        if (options.init) options.init(engine);

        // set up the game loop
        if (Worker) {
            // we have workers, let the worker drive the loop
            var worker = new Worker('frb-thread.js');

            worker.addEventListener('message', function(e) {
                coreUpdate();
                coreDraw();
            }, false);

            worker.postMessage(engine.graphics);
        }
        else {
            // no workers
            //alert ('cry');
            
            setInterval(function () {
                coreUpdate();
                coreDraw();
            }, 1000 / engine.graphics.fps);

        }
    })();

    return engine;
};

return frb;

})(frb || {});