function Fundo(context, imagem) {
this.context = context;
this.imagem = imagem;
this.velocidade = 0;
this.posicaoEmenda = 0;
}
Fundo.prototype = {
atualizar: function() {
// Atualizar a posição de emenda
this.posicaoEmenda += this.velocidade;
// Emenda passou da posição
if (this.posicaoEmenda > this.imagem.height)
this.posicaoEmenda = 0;
},
desenhar: function() {
var img = this.imagem; // Para facilitar a escrita :D
// Primeira cópia
var posicaoY = this.posicaoEmenda - img.height;
this.context.drawImage(img, 0, posicaoY, img.width, img.height);
// Segunda cópia
posicaoY = this.posicaoEmenda;
this.context.drawImage(img, 0, posicaoY, img.width, img.height);
}
}
------------------------------------------------------------------------------------------------------
teste-fundo.html
<!DOCTYPE html>
<html>
<head>
<title>Fundos rolando em Parallax</title>
<script src="animacao.js"></script>
<script src="fundo.js"></script>
</head>
<body>
<canvas id="canvas_fundo" width="500" height="500"></canvas>
<script>
var imgEspaco = new Image();
imgEspaco.src = 'img/fundo-espaco.png';
var imgEstrelas = new Image();
imgEstrelas.src = 'img/fundo-estrelas.png';
var imgNuvens = new Image();
imgNuvens.src = 'img/fundo-nuvens.png';
var carregadas = 0;
var total = 3;
imgEspaco.onload = carregando;
imgEstrelas.onload = carregando;
imgNuvens.onload = carregando;
function carregando() {
carregadas++;
if (carregadas == total) iniciar();
}
function iniciar() {
var canvas = document.getElementById('canvas_fundo');
var context = canvas.getContext('2d');
// Passo o context e a imagem para os objetos Fundo
var fundoEspaco = new Fundo(context, imgEspaco);
var fundoEstrelas = new Fundo(context, imgEstrelas);
var fundoNuvens = new Fundo(context, imgNuvens);
// Cada um a uma velocidade diferente
fundoEspaco.velocidade = 3;
fundoEstrelas.velocidade = 7;
fundoNuvens.velocidade = 10;
var animacao = new Animacao(context);
animacao.novoSprite(fundoEspaco);
animacao.novoSprite(fundoEstrelas);
animacao.novoSprite(fundoNuvens);
animacao.ligar();
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------
animacao.js
function Animacao(context) {
this.context = context;
this.sprites = [];
this.ligado = false;
}
Animacao.prototype = {
novoSprite: function(sprite) {
this.sprites.push(sprite);
sprite.animacao = this;
},
ligar: function() {
this.ligado = true;
this.proximoFrame();
},
desligar: function() {
this.ligado = false;
},
proximoFrame: function() {
// Posso continuar?
if ( ! this.ligado ) return;
// A cada ciclo, limpamos a tela ou desenhamos um fundo
this.limparTela();
// Atualizamos o estado dos sprites
for (var i in this.sprites)
this.sprites[i].atualizar();
// Desenhamos os sprites
for (var i in this.sprites)
this.sprites[i].desenhar();
// Chamamos o próximo ciclo
var animacao = this;
requestAnimationFrame(function() {
animacao.proximoFrame();
});
},
limparTela: function() {
var ctx = this.context;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
}
Nenhum comentário:
Postar um comentário