Skip to content

Instantly share code, notes, and snippets.

@allysonsouza
Last active August 29, 2015 14:04
Show Gist options
  • Save allysonsouza/3bbfeb59ffbdb5a11f64 to your computer and use it in GitHub Desktop.
Save allysonsouza/3bbfeb59ffbdb5a11f64 to your computer and use it in GitHub Desktop.
Ensaios de um pattern de Game Loop no JavaScript
(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();
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment