<!DOCTYPE html>
<html>
<head>
<title>Nave, inimigos e fundo</title>
<script src="animacao.js"></script>
<script src="teclado.js"></script>
<script src="nave.js"></script>
<script src="tiro.js"></script>
<script src="colisor.js"></script>
<script src="ovni.js"></script>
<script src="fundo.js"></script>
</head>
<body>
<canvas id="canvas_inimigos" width="500" height="500"></canvas>
<script>
// Imagens
var imgEspaco = new Image();
imgEspaco.src = 'img/fundo-espaco.png';
imgEspaco.onload = carregando;
var imgEstrelas = new Image();
imgEstrelas.src = 'img/fundo-estrelas.png';
imgEstrelas.onload = carregando;
var imgNuvens = new Image();
imgNuvens.src = 'img/fundo-nuvens.png';
imgNuvens.onload = carregando;
var imgNave = new Image();
imgNave.src = 'img/nave.png';
imgNave.onload = carregando;
var imgOvni = new Image();
imgOvni.src = 'img/ovni.png';
imgOvni.onload = carregando;
// Inicialização dos objetos
// Primeiro os objetos do game engine
var canvas = document.getElementById('canvas_inimigos');
var context = canvas.getContext('2d');
var teclado = new Teclado(document);
var animacao = new Animacao(context);
// Em seguida as imagens de fundo
var fundo1 = new Fundo(context, imgEspaco);
fundo1.velocidade = 3;
animacao.novoSprite(fundo1);
var fundo2 = new Fundo(context, imgEstrelas);
fundo2.velocidade = 3;
animacao.novoSprite(fundo2);
var fundo3 = new Fundo(context, imgNuvens);
fundo3.velocidade = 10;
animacao.novoSprite(fundo3);
// Depois do fundo, a nave e outros sprites
var nave = new Nave(context, teclado, imgNave);
animacao.novoSprite(nave);
var colisor = new Colisor();
colisor.novoSprite(nave);
teclado.disparou(ESPACO, function() {
nave.atirar();
});
// Carregamento e inicialização
var carregadas = 0;
var total = 5;
function carregando() {
carregadas++;
if (carregadas == total) iniciar();
}
function iniciar() {
nave.x = canvas.width / 2 - imgNave.width / 2;
nave.y = canvas.height - imgNave.height;
nave.velocidade = 5;
animacao.ligar();
setInterval(novoOvni, 1000);
}
// Criação dos inimigos
function novoOvni() {
var ovni = new Ovni(context, imgOvni);
// Mínimo: 5; máximo: 20
ovni.velocidade =
Math.floor( 5 + Math.random() * (20 - 5 + 1) );
// Mínimo: 0; máximo: largura do canvas - largura do ovni
ovni.x =
Math.floor(Math.random() *
(canvas.width - imgOvni.width + 1) );
// Descontar a altura
ovni.y = -imgOvni.height;
animacao.novoSprite(ovni);
colisor.novoSprite(ovni);
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------
fundo.js
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);
}
}
Nenhum comentário:
Postar um comentário