Desenvolva jogos com HTML5 Canvas e JavaScript

220 Pages·2014·1.05 MB·Portuguese

by  Éderson Cássio

CasadoCódigo
Introdução
Se você chegou até este livro, é porque está interessado em desenvolver jo-
gos. Aqui focarei no desenvolvimento de jogos para a web, usando a tec-
nologia Canvas, presente na especificação do HTML5 e suportada por to-
dos os maiores browsers modernos, em suas versões mais atualizadas. Pre-
tendomostrarquedesenvolverjogoséumatarefanarealidadesimples,eque
nãoexigegrandescurvasdeaprendizadoscomframeworksmonstruosos—
obásicooferecidopeloambientedonavegadoréosuficienteparacomeçar!
Tudo o que você precisará é de um browser atualizado e um bom edi-
tordetextos. EmambienteWindows,émuitocomumousodoNotepad++
(http://notepad-plus-plus.org).CasovocêuseLinux,ébemprovávelquesua
distribuição já venha com um editor que suporte coloração de sintaxe para
váriaslinguagens(GEdit,KWrite,etc.).Noentanto,eurecomendoveemente-
menteousodoBrackets(http://brackets.io),quefoiondeeucrieioscódigos.
Émultiplataforma(funcionaemWindows,Linux,MacOSX)erealizaauto-
completaremcódigoJavaScriptdeformabastanteeficiente.
Ojogoquevocêvaicriarjáestádisponívelnaweb. Vocêpodejogá-loa
qualquermomentoem:
http://gamecursos.com.br/livro/jogo
EstareisemprepresenteeatuantenoseguintegrupodoGoogleGroups,
comoformadeinteragircommeusleitores:
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
parareferênciaemcasodedúvidas):
http://github.com/EdyKnopfler/games-js/archive/master.zip
i
CasadoCódigo
Bomestudo!
ii
CasadoCódigo Sumário
Sumário
1 Fundamentos 1
1.1 IntroduçãoaoHTML5Canvas . . . . . . . . . . . . . . . . . . 3
1.2 Começandoadesenhar . . . . . . . . . . . . . . . . . . . . . . 6
1.3 AnimaçõescomrequestAnimationFrame . . . . . . . . . . . . 22
1.4 OrientaçãoaobjetoscomJavaScript . . . . . . . . . . . . . . 26
2 Oloopdeanimação 35
2.1 Introduçãoesprites . . . . . . . . . . . . . . . . . . . . . . . . 35
2.2 TesteparaaclasseAnimacao . . . . . . . . . . . . . . . . . . . 38
2.3 DesenvolvaaclasseAnimacao . . . . . . . . . . . . . . . . . . 41
2.4 ImplementeaclasseBola . . . . . . . . . . . . . . . . . . . . . 45
3 Ainteraçãocomojogador—leituraapuradadoteclado 49
3.1 EventListenerseoseventoskeydownekeyup . . . . . . . . . 50
3.2 Detectandoseumateclaestáounãopressionada . . . . . . . 55
3.3 Efetuandodisparos—detectandosomenteoprimeirokeydown 58
4 Folhasdesprites—spritesheets 69
4.1 Conceitoeabordagemutilizada . . . . . . . . . . . . . . . . . 69
4.2 Carregandoimagensefazendorecortes(clipping) . . . . . . 72
4.3 Animaçõesdesprite—aclasseSpritesheet . . . . . . . . . . 75
4.4 Controleoheróipelotecladoevejasuaanimação . . . . . . 80
iii
Sumário CasadoCódigo
5 Detecçãodecolisões 87
5.1 Colisãoentreretângulos . . . . . . . . . . . . . . . . . . . . . 87
5.2 TestedaclasseColisor . . . . . . . . . . . . . . . . . . . . . . . 90
5.3 AclasseColisor . . . . . . . . . . . . . . . . . . . . . . . . . . 93
5.4 Criandoumspritecolidível. . . . . . . . . . . . . . . . . . . . 95
5.5 Melhorandoocódigo . . . . . . . . . . . . . . . . . . . . . . . 98
6 Iniciandoodesenvolvimentodojogo 107
6.1 Animaçãodefundocomefeitoparallax . . . . . . . . . . . . 107
6.2 Controledanavenahorizontalenavertical . . . . . . . . . . 118
6.3 Efetuandodisparos . . . . . . . . . . . . . . . . . . . . . . . . 123
7 Criandoinimigos 129
7.1 Primeirotestecomnaveeinimigos . . . . . . . . . . . . . . . 130
7.2 AclasseOvni . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
7.3 Adicionandofundoemparallax . . . . . . . . . . . . . . . . . 135
7.4 Adicionandocolisão . . . . . . . . . . . . . . . . . . . . . . . . 139
7.5 Estamosexperimentandolentidão! . . . . . . . . . . . . . . . 145
7.6 Excluindoosobjetosdesnecessários. . . . . . . . . . . . . . . 151
8 Incorporeanimações,sons,pausaevidasextrasaojogo 155
8.1 Organizandoocódigo. . . . . . . . . . . . . . . . . . . . . . . 156
8.2 Animaçãocronometrada . . . . . . . . . . . . . . . . . . . . . 162
8.3 Animandoanavecomspritesheets . . . . . . . . . . . . . . . 165
8.4 Criandoexplosões . . . . . . . . . . . . . . . . . . . . . . . . . 169
8.5 Pausandoojogo . . . . . . . . . . . . . . . . . . . . . . . . . . 175
8.6 Sonsemúsicadefundo . . . . . . . . . . . . . . . . . . . . . . 179
8.7 Teladeloading . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
8.8 Vidasextras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
8.9 Pontuação(score) . . . . . . . . . . . . . . . . . . . . . . . . . 190
8.10 TeladeGameOver . . . . . . . . . . . . . . . . . . . . . . . . 192
iv
CasadoCódigo Sumário
9 Publiqueseujogoetorne-oconhecido 197
9.1 Hospede-oemumserviçogratuito . . . . . . . . . . . . . . . 197
9.2 Linkandocomasredessociais . . . . . . . . . . . . . . . . . . 203
Bibliografia 213
v

Capítulo1
Fundamentos
Aquicomeçaumafascinantejornadapelossegredosdeumatecnologiaque,
naverdade,nãopossuisegredoalgum.Trata-sedoCanvas,umadasmaravil-
hasdoHTML5.
O Canvas é uma área retangular em uma página web onde podemos
criardesenhosprogramaticamente, usandoJavaScript(alinguagemdepro-
gramaçãonormaldaspáginasHTML).Comestatecnologia,podemoscriar
trabalhosartísticos,animaçõesejogos,queéoassuntocentraldestelivro.
Com o Canvas, ao longo dos capítulos, iremos desenvolver o jogo da
figura1.1:
CasadoCódigo
Figura1.1:Jogodesenvolvidoaolongodolivro
Estelivroécompostopelosseguintescapítulos:
1.Fundamentos: nestecapítulo,aprendacomofuncionaoCanvas,como
criar animações via programação e também noções de Orientação a obje-
tos em JavaScript, para que nossos códigos se tornem mais organizados e
reaproveitáveis;
2. Oloopdeanimação: controleaanimaçãodeseusjogosdeformaefi-
ciente. Conheçaoconceitodespriteseaprendaagerenciá-losemumaani-
mação;
3. Ainteraçãocomojogador—leituraapuradadoteclado: saibacomo
capturareventosdotecladodemaneiraeficienteparajogos;
4. Folhasdesprites—spritesheets: animeoselementosdeseujogoindi-
vidualmenteusandoimagenscontendotodososquadrosdeumaanimação;
5. Detecçãodecolisões: aprendaadetectarquandooselementosdeum
jogo“tocam”unsaosoutrosnatelaeexecuteasaçõesadequadas;
6. Iniciandoodesenvolvimentodojogo: umjoguinhodenavecomeçará
atomarformausandotodososelementosaprendidosatéentão;
7. Criando inimigos: adicione verdadeira emoção ao seu jogo, dando
2
CasadoCódigo Capítulo1. Fundamentos
ao herói alguém a quem enfrentar. Usaremos intensivamente a detecção de
colisões;
8. Incorporeanimações,sons,pausaevidasextrasaojogo: comtodosos
conceitosaprendidosebemfixados,vocêverácomoéfácilestenderojogoe
adicionarnovoselementos. Aofimdocapítulo, vocêterásugestõesdemel-
horiasquevocêmesmopoderátentarrealizar,comoexercício;
9. Publique seu jogo e torne-o conhecido: um passo a passo de como
publicarseujogonawebedivulgá-lonasredessociais.
Importante:prepareiumpacotedearquivoscontendotodososcódigos,
imagens e sons utilizados. Em cada novo arquivo que criarmos, indicarei o
nomedorespectivoarquivonessepacote.Realizeseudownloadnoendereço:
http://github.com/EdyKnopfler/games-js/archive/master.zip
Antesdecomeçarmosadesenvolverumjogoemespecífico,éimportante
nos habituarmos a algumas funções da tecnologia Canvas. O que está es-
perando?Vamoscomeçaroaprendizado!
1.1 Introdução ao HTML5 Canvas
ParacriarumCanvasemumapáginaHTML,utilizamosatag <canvas>.Os
atributos widthe heightinformamalarguraeaaltura,respectivamente,
daáreadedesenho. Éimportantetambéminformarum idparapodermos
trabalharcomelenocódigoJavaScript:
<canvas id="nome_canvas" width="largura" height="altura">
</canvas>
Entre as tags de abertura e fechamento, podemos colocar alguma men-
sagemindicandoqueobrowsernãosuportaessatecnologia.Casoobrowser
asuporte,esseconteúdoéignorado:
<canvas id="meu_canvas" width="300" height="300">
Seu navegador nªo suporta o Canvas do HTML5. <br>
Procure atualizÆ-lo.
</canvas>
Osatributos widthe heightdatag <canvas>sãoobrigatórios,pois
sãoosvaloresusadosnageraçãodaimagem.OCanvaspodereceberdimen-
3