no próprio construtor:
t rtt
tstt tt
ts
Psr tr
tsrr
tstr
ts t tsrr
ts tstr
ts
126
Casa do Código
Capítulo 6. Iniciando o desenvolvimento do jogo
Para atualizar o tiro na animação, apenas o faremos subir na tela, sub-
traindo sua posição y:
tr t
ts ts
Para desenhá-lo, faremos um pequeno retângulo. Criamos um novo
atributo, cor, para que possa ser alterado a gosto:
sr t
r t tstt
ts
tt tsr
ttts ts tsrr tstr
trstr
No construtor, vamos inicializar cor com uma cor mais escura, pois a
nave ainda está em fundo branco:
s s r
tsr r
Por último, não se esqueça de colocar a referência ao arquivo tiro.js
na página HTML:
tt s trtt
srt srssrt
srt srtssrt
srt srssrt
srt srtrssrt
Divirta-se! No próximo capítulo, iremos criar inimigos para o nosso
herói.
127
6.3. Efetuando disparos
Casa do Código
Exercícios:
Se você entendeu bem os conceitos, as tarefas a seguir não deverão
ser tão difíceis assim:
Tente integrar o fundo em parallax com a nave se mexendo e ati-
rando.
Tente também atirar para os lados e para a diagonal. Isto requererá
ler o estado das teclas de direção e dar velocidade horizontal ao
tiro.
Comece a brincar e a experimentar!
128
Capítulo 7
Criando inimigos
Chegou a hora de adicionarmos um pouco de emoção verdadeira em nosso
game. De nada adianta termos um jogo e não termos quem combater, não
é mesmo? Portanto, criaremos agora os primeiros inimigos. Neste capítulo, utilizaremos bastante a classe Colisor para detectar quando os inimigos
colidirem com os tiros e com a nave.
No pacote de arquivos do livro, está presente a imagem ovni.png. Nosso
objetivo será fazer OVNIs caírem do alto da tela, em velocidades e posições x diferentes.
7.1. Primeiro teste com nave e inimigos
Casa do Código
Figura 7.1: OVNIs cairão na tela!
7.1
Primeiro teste com nave e inimigos
Como de costume, vamos começar com a página contendo o aplicativo de
teste. Veja como a quantidade de tags <script> está
crescendo! Nosso protótipo está cada vez mais perto de um jogo 100% funcional.
Figura 7.2: Cena com OVNIs e nave do herói
rq tstst
P t
t
130
Casa do Código
Capítulo 7. Criando inimigos
ttstt
srt srssrt
srt srtssrt
srt srssrt
srt srtrssrt
srt srsrssrt
srt srssrt
s ss t t
s
srt
s trrís ttrã strí
srt
t
Para começar o JavaScript, vamos carregar as imagens, pois os sprites precisarão recebê-las pelos construtores. Como são duas, usaremos uma função carregando para detectar quando elas estiverem prontas:
s
r
sr
rr
r
sr
rr
Em seguida, a criação dos objetos básicos: canvas e contexto, teclado, animação, sprite da nave e colisor. Também configuramos o disparo pela tecla Espaço. Pode parecer repetitivo, mas a ideia é essa mesmo: tornar o negócio padronizado (e dessa forma você fixa melhor os conceitos)!
131
7.1. Primeiro teste com nave e inimigos
Casa do Código
çã s ts
r s tttss
r tt sttt
r t t
r tt
r tt t
rt
r sr sr
srrt
tsrP t
trr
Agora crie as funções carregando, que monitora o carregamento das
imagens, e iniciar, chamada por carregando quando todas as imagens
estiverem prontas. Na função iniciar, posicionamos a nave, iniciamos a
animação e definimos que a cada 1000 milissegundos um novo inimigo será
criado na tela, usando a função setInterval do JavaScript:
rrt çã
r rrs
t rr
rrs
rrs r
t r
st t
st t
r
sttr
132
Casa do Código
Capítulo 7. Criando inimigos
Quem criará o inimigo é a função novoOvni. Sabendo que a imagem
possui 64x32 pixels, nós a posicionamos acima da área visível do jogo, de-scontando 32 pixels de altura. Para dar um pouco de emoção ao game, a
posição horizontal e a velocidade são definidas aleatoriamente para cada novo inimigo, com o auxílio de Math.random e Math.floor. Também é preciso
colocar o inimigo no colisor:
rçã s s
t
r tt
í á
tr tr
í
á rr s rr
trtr
st t
str tr
t
rt
srrt
133
7.2. A classe Ovni
Casa do Código
Combinando Math.random e Math.floor
O método random retorna um número aleatório fracionário, entre 0
e 1. Para gerar um número aleatório inteiro, usamos a fórmula:
t tr
rtr trtr
O método
floor descarta a parte fracionária do resultado,
arredondando-o para o inteiro de menor valor (não o mais próximo).
Padronizando a codificação
Vamos sempre adotar a seguinte sequência de codificação ao criar
novos aplicativos:
Primeiro, carregamos as imagens, pois os objetos do jogo depen-
dem delas;
Em seguida, instanciamos os objetos do game engine (animação,
teclado, colisor) e os sprites, usando as imagens quando necessário;
Por último, criamos as funções de inicialização, que só devem ex-
ecutar quando as imagens estiverem completamente carregadas.
7.2
A classe Ovni
Vamos criar a classe Ovni, inicialmente sem se preocupar com a interface de colisão. Como de costume, começamos construindo um esqueleto a partir do
que idealizamos para a classe na página HTML:
134
Casa do Código
Capítulo 7. Criando inimigos
rq s
t tt
tstt tt
ts
ts
ts
ts
rtt
tr t
sr t
Se o objetivo é fazer o inimigo descer pela tela, o método atualizar