Casa do Código
Introdução
Se você chegou até este livro, é porque está interessado em desenvolver jogos. Aqui focarei no desenvolvimento de jogos para a web, usando a tec-
nologia Canvas, presente na especificação do HTML5 e suportada por todos os maiores browsers modernos, em suas versões mais atualizadas. Pre-
tendo mostrar que desenvolver jogos é uma tarefa na realidade simples, e que não exige grandes curvas de aprendizados com frameworks monstruosos
o básico oferecido pelo ambiente do navegador é o suficiente para começar!
Tudo o que você precisará é de um browser atualizado e um bom edi-
tor de textos. Em ambiente Windows, é muito comum o uso do Notepad++
(http://notepad-plus-plus.org) . Caso você use Linux, é bem provável que sua distribuição já venha com um editor que suporte coloração de sintaxe para várias linguagens (GEdit, KWrite, etc.). No entanto, eu recomendo veemente-mente o uso do Brackets (http://brackets.io) , que foi onde eu criei os códigos.
É multiplataforma (funciona em Windows, Linux, Mac OS X) e realiza auto-
completar em código JavaScript de forma bastante eficiente.
O jogo que você vai criar já está disponível na web. Você pode jogá-lo a
qualquer momento em:
http://gamecursos.com.br/livro/jogo
Estarei sempre presente e atuante no seguinte grupo do Google Groups,
como forma de interagir com meus leitores:
http://groups.google.com/forum/#!forum/livro-jogos-html5-canvas
Por fim, todos os códigos e imagens estão disponíveis em (embora eu
aconselhe você a digitar os códigos e usar os prontos no download apenas
para referência em caso de dúvidas):
http://github.com/EdyKnopfler/games-js/archive/master.zip
i
Casa do Código
Bom estudo!
ii
Casa do Código
Sumário
Sumário
1
Fundamentos
1
1.1
Introdução ao HTML5 Canvas . . . . . . . . . . . . . . . . . .
3
1.2
Começando a desenhar . . . . . . . . . . . . . . . . . . . . . .
6
1.3
Animações com requestAnimationFrame . . . . . . . . . . . .
22
1.4
Orientação a objetos com JavaScript
. . . . . . . . . . . . . .
26
2
O loop de animação
35
2.1
Introdução e sprites . . . . . . . . . . . . . . . . . . . . . . . .
35
2.2
Teste para a classe Animacao . . . . . . . . . . . . . . . . . . .
38
2.3
Desenvolva a classe Animacao . . . . . . . . . . . . . . . . . .
41
2.4
Implemente a classe Bola . . . . . . . . . . . . . . . . . . . . .
45
3
A interação com o jogador leitura apurada do teclado
49
3.1
EventListeners e os eventos keydown e keyup . . . . . . . . .
50
3.2
Detectando se uma tecla está ou não pressionada . . . . . . .
55
3.3
Efetuando disparos detectando somente o primeiro keydown 58
4
Folhas de sprites spritesheets
69
4.1
Conceito e abordagem utilizada . . . . . . . . . . . . . . . . .
69
4.2
Carregando imagens e fazendo recortes (clipping) . . . . . .
72
4.3
Animações de sprite a classe Spritesheet
. . . . . . . . . .
75
4.4
Controle o herói pelo teclado e veja sua animação
. . . . . .
80
iii
Sumário
Casa do Código
5
Detecção de colisões
87
5.1
Colisão entre retângulos . . . . . . . . . . . . . . . . . . . . .
87
5.2
Teste da classe Colisor . . . . . . . . . . . . . . . . . . . . . . .
90
5.3
A classe Colisor . . . . . . . . . . . . . . . . . . . . . . . . . .
93
5.4
Criando um sprite colidível . . . . . . . . . . . . . . . . . . . .
95
5.5
Melhorando o código . . . . . . . . . . . . . . . . . . . . . . .
98
6
Iniciando o desenvolvimento do jogo
107
6.1
Animação de fundo com efeito parallax . . . . . . . . . . . .
107
6.2
Controle da nave na horizontal e na vertical . . . . . .
. . . .
118
6.3
Efetuando disparos
. . . . . . . . . . . . . . . . . . . . . . . .
123
7
Criando inimigos
129
7.1
Primeiro teste com nave e inimigos . . . . . . . . . . . . . . .
130
7.2
A classe Ovni . . . . . . . . . . . . . . . . . . . . . . . . . . . .
134
7.3
Adicionando fundo em parallax . . . . . . . . . . . . . . . . .
135
7.4
Adicionando colisão . . . . . . . . . . . . . . . . . . . . . . . .
139
7.5
Estamos experimentando lentidão! . . . . . . . . . . . . . . .
145
7.6
Excluindo os objetos desnecessários . . . . . . . . . . . . . . .
151
8
Incorpore animações, sons, pausa e vidas extras ao jogo
155
8.1
Organizando o código . . . . . . . . . . . . . . . . . . . . . . .
156
8.2
Animação cronometrada . . . . . . . . . . . . . . . . . . . . .
162
8.3
Animando a nave com spritesheets . . . . . . . . . . . . . . .
165
8.4
Criando explosões . . . . . . . . . . . . . . . . . . . . . . . . .
169
8.5
Pausando o jogo . . . . . . . . . . . . . . . . . . . . . . . . . .
175
8.6
Sons e música de fundo . . . . . . . . . . . . . . . . . . . . . .
179
8.7
Tela de loading . . . . . . . . . . . . . . . . . . . . . . . . . . .
181
8.8
Vidas extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
186
8.9
Pontuação (score) . . . . . . . . . . . . . . . . . . . . . . . . .
190
8.10 Tela de Game Over
. . . . . . . . . . . . . . . . . . . . . . . .
192
iv
Casa do Código