scriptonia

Oct 18 '11

Start to learn html5 canvas for #game dev

window.oivoodoo = window.oivoodoo || {};
window.oivoodoo.tower = window.oivoodoo.tower || {};
window.oivoodoo.tower.utils = window.oivoodoo.tower.utils || {};

var namespace = window.oivoodoo.tower;

namespace.Statuses = {
    START: 0,
    STOP: 1,
    PAUSE: 2
};

namespace.utils.guid = function() {
    function S4() {
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
};

namespace.utils.extend = (function() {
    var F = function() {};
    return function( P, C ) {
        F.prototype = P.prototype;
        C.prototype = new F();
        C.owner = P.prototype;
        C.prototype.constructor = C;
        return C;
    };
})();

namespace.GameObject = function( context, options ) {
    this.id = namespace.utils.guid();
    this.objects = [];
    this.context = context;

    options = options || {};

    this.x = options.x || 0;
    this.y = options.y || 0;
    this.delay = options.delay || 0;
};

namespace.GameObject.prototype.draw = function() {
    var self = this;

    for(var i = 0; i < self.objects.length; i++) {
        self.objects[i].draw();
    }
};

namespace.GameObject.prototype.update = function() {
    for(var i = 0; i < this.objects.length; i++) {
        this.objects[i].update();
    }
};

namespace.Application = namespace.utils.extend( namespace.GameObject, function( context ) {
    namespace.GameObject.call( this, context );
    
    var DRAW_INTERVAL = 1000;
    
    var self = this;

    self.initialize = function() {
        setup();

        setInterval(function( ) {
            self.draw.call( self );
        }, DRAW_INTERVAL );
    };

    function setup() {
        var box1 = new namespace.Box( self.context );
        var box2 = new namespace.Box( self.context, {
            x: 100,
            y: 100,
            delay: 1000
        } );
        var box3 = new namespace.Box( self.context, {
            x: 50,
            y: 50,
            delay: 3000
        } );

        self.objects.push( box1 );
        self.objects.push( box2 );
        self.objects.push( box3 );
    }
});

namespace.Board = namespace.utils.extend(namespace.GameObject, function( context, options ) {
    var self = this;

    namespace.GameObject.call( this, context, options );
});

namespace.Box = namespace.utils.extend(namespace.GameObject, function( context, options ) {
    namespace.GameObject.call( this, context, options );
});

namespace.Box.prototype.draw = function() {
    var self = this;

    function drawBox() {
        self.iterator = self.iterator || 0;

        self.context.save();

        self.context.translate( self.x + self.iterator, self.y + self.iterator );
        self.context.clearRect( 0, 0, 50, 50 );
        self.context.strokeStyle = 'black';
        self.context.fillStyle = 'yellow';
        self.context.lineWidth = 8;
        self.context.lineCap = "round";

        self.context.beginPath();
        self.context.moveTo( 0, 0 );
        self.context.lineTo( 0, 50 );
        self.context.lineTo( 50, 50 );
        self.context.lineTo( 50, 0 );
        self.context.lineTo( 0, 0 );
        self.context.stroke();
        
        self.context.restore();

        self.iterator += 10;
    }

    if (self.delay != 0) {
        setTimeout(function() {
            drawBox();
        }, self.delay);
    } else {
        drawBox();
    }

};

namespace.Player = function( name ) {
    var self = this;

    self.name = name;
};

View comments

Blog comments powered by Disqus