Ensaios de um pattern de Game Loop no JavaScript

game-loop.js

(function () {
    'use strict';
    
    /*
     * ImageRect 
     */
    function ImageRect() {
        this.sx = 3584; //source x
        this.sy = 0;    //source y
        this.sw = 512;  //source width
        this.sh = 512;  //source height
    }
    
    /*
     * Character 
     */
    function Character() {
        this.sprite = new Image();
        this.sprite.src = 'assets/img/sprite.png';
        this.x = 0;
        this.y = 0;
        this.width = 512;
        this.height = 512;
        this.rect = new ImageRect();
    }

    Character.prototype.draw = function (context) {
        //Draw Character image into the given context
        context.drawImage(this.sprite, this.rect.sx, this.rect.sy, this.rect.sw, this.rect.sh, this.x, this.y, this.width, this.height);
    };
    
    Character.prototype.update = function (frame) {
        if (frame % 2 === 0) {
            if (this.rect.sx < 7680) {
                this.rect.sx += 512;
            } else {
                this.rect.sx = 4096;
            }
        }
    };
    
    /*
     * Game 
     */
    function Game() {
        this.drawables = [];
        this.updatables = [];
        this.frame = 0;
    }
    
    Game.prototype.draw = function () {
        /*
         * Cleanup Canvas
         * Limpa o canvas mesmo se tiver desenhos transformados em sua 
         */
        // Store the current transformation matrix
        this.context.save();
	
        // Use the identity matrix while clearing the canvas
        this.context.setTransform(1, 0, 0, 1, 0, 0);
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // Restore the transform
        this.context.restore();
        
        /*
         * Chamada dos métodos draw() de cada um dos objetos drawables armazenados em uma estrutura de dados do objeto Game
         */
         
        var i, l;
        //Drawables - Percorre o array e chama o método draw() específico de cada objeto
        for (i = 0, l = this.drawables.length; l; l -= 1, i += 1) {
            this.drawables[i].draw(this.context); //Método draw chamado
        }
    };
    
    Game.prototype.update = function (myGameInstance) {
        /*
         * Chamada dos métodos update() de cada um dos objetos updatables armazenados em uma estrutura de dados do objeto Game
         */
        var i, l;
        
        //Frames - Count the game frames
        myGameInstance.frame = myGameInstance.frame <= 60 ? (myGameInstance.frame + 1) : 0;
        
        //Updatables - Percorre o array e chama o método draw() específico de cada objeto
        for (i = 0, l = myGameInstance.updatables.length; l; l -= 1, i += 1) {
            myGameInstance.updatables[i].update(myGameInstance.frame); //Método draw chamado
        }
        
        myGameInstance.draw();
    };
    
    Game.prototype.init = function () {
        /*
         * Instaciação dos objetos e configurações, definição do atributo canvas e do context
         * - Criação de uma estrutura de dados para armazenar os updatables e outra para os drawables
         */
        var char            = new Character(),
            myGameInstance  = this;
        
        this.canvas    = document.getElementById("jogo");
        this.context   = this.canvas.getContext('2d');

	/*
	 * Adiciona os objetos drawables e updatables aos arrays do Game
	 * Obs: Talvez estas inserções devessem ser incorporadas em métodos do Game
	 */
        Array.prototype.push.call(this.drawables, char);
        Array.prototype.push.call(this.updatables, char);
        
        /*
         * Chamada ao método update() do objeto Game, passando a instância myGameInstance como parâmetro, 
         * detalhes do problema com this em setInterval em: https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
         */
        this.interval = setInterval(myGameInstance.update, 1000 / 60, myGameInstance);
    };
    
    var game = new Game();
    game.init();
}());