Sumário
9
Publique seu jogo e torne-o conhecido
197
9.1
Hospede-o em um serviço gratuito . . . . . . . . . . . . . . .
197
9.2
Linkando com as redes sociais . . . . . . . . . . . . . . . . . .
203
Bibliografia
213
v
Capítulo 1
Fundamentos
Aqui começa uma fascinante jornada pelos segredos de uma tecnologia que,
na verdade, não possui segredo algum. Trata-se do Canvas, uma das maravil-has do HTML5.
O Canvas é uma área retangular em uma página web onde podemos
criar desenhos programaticamente, usando JavaScript (a linguagem de pro-
gramação normal das páginas HTML). Com esta tecnologia, podemos criar
trabalhos artísticos, animações e jogos, que é o assunto central deste livro.
Com o Canvas, ao longo dos capítulos, iremos desenvolver o jogo da
figura 1.1:
Casa do Código
Figura 1.1: Jogo desenvolvido ao longo do livro
Este livro é composto pelos seguintes capítulos:
1. Fundamentos: neste capítulo, aprenda como funciona o Canvas, 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. O loop de animação: controle a animação de seus jogos de forma efi-
ciente. Conheça o conceito de sprites e aprenda a gerenciá-los em uma ani-mação;
3. A interação com o jogador leitura apurada do teclado: saiba como
capturar eventos do teclado de maneira eficiente para jogos;
4. Folhas de sprites spritesheets: anime os elementos de seu jogo indi-
vidualmente usando imagens contendo todos os quadros de uma animação;
5. Detecção de colisões: aprenda a detectar quando os elementos de um
jogo tocam uns aos outros na tela e execute as ações adequadas;
6. Iniciando o desenvolvimento do jogo: um joguinho de nave começará
a tomar forma usando todos os elementos aprendidos até então;
7. Criando inimigos:
adicione verdadeira emoção ao seu jogo, dando
2
Casa do Código
Capítulo 1. Fundamentos
ao herói alguém a quem enfrentar. Usaremos intensivamente a detecção de
colisões;
8. Incorpore animações, sons, pausa e vidas extras ao jogo: com todos os
conceitos aprendidos e bem fixados, você verá como é fácil estender o jogo e adicionar novos elementos. Ao fim do capítulo, você terá sugestões de melhorias que você mesmo poderá tentar realizar, como exercício;
9. Publique seu jogo e torne-o conhecido:
um passo a passo de como
publicar seu jogo na web e divulgá-lo nas redes sociais.
Importante: preparei um pacote
de arquivos contendo todos os códigos, imagens e sons utilizados. Em cada novo arquivo que criarmos, indicarei o nome do respectivo arquivo nesse pacote. Realize seu download no endereço: http://github.com/EdyKnopfler/games-js/archive/master.zip
Antes de começarmos a desenvolver um jogo em específico, é importante
nos habituarmos a algumas funções da tecnologia Canvas. O que está es-
perando? Vamos começar o aprendizado!
1.1
Introdução ao HTML5 Canvas
Para criar um Canvas em uma página HTML, utilizamos a tag <canvas>. Os atributos width e height informam a largura e a altura, respectivamente,
da área de desenho. É importante também informar um id para podermos
trabalhar com ele no código JavaScript:
s s trr ttr
s
Entre as tags de abertura e fechamento, podemos colocar alguma men-
sagem indicando que o browser não suporta essa tecnologia. Caso o browser a suporte, esse conteúdo é ignorado:
s s t t
r ã srt s r
Prr tá
s
Os atributos width e height da tag <canvas> são obrigatórios, pois
são os valores usados na geração da imagem. O Canvas pode receber dimen-
3
1.1. Introdução ao HTML5 Canvas
Casa do Código
sões diferentes via CSS, no entanto, seu processamento sempre será feito usando as dimensões informadas na tag. Se as dimensões no CSS forem difer-
entes, o browser amplia ou reduz a imagem gerada para deixá-la de acordo
com a folha de estilo.
Dado um Canvas com dimensões 100x100 pixels:
s s t ts
A seguinte formatação CSS fará a imagem ser ampliada:
s
t
t
Contexto gráfico
Para desenhar no Canvas, é preciso executar um script após ele ter sido
carregado. Neste script, obteremos o contexto gráfico, que é o objeto que realiza de fato as tarefas de desenho no Canvas.
Uma maneira é criar uma tag <script> após a tag <canvas>:
P t
t
ttPrss s ós ttt
s s t ts
srt
q trs tt rá trrs
s
srt
t
4
Casa do Código
Capítulo 1. Fundamentos
Também é muito comum desenharmos em eventos que ocorrem após a
página ter sido carregada. Isto é útil caso queiramos colocar os scripts na seção <head> do documento HTML:
P t
t
ttPrss s sçã tt
srt
t
q trrs s
srt
s s t ts
t
No código, nós referenciamos o Canvas e obtemos o contexto gráfico. O
Canvas é referenciado como qualquer elemento em uma página; o contexto
é obtido pelo método getContext do Canvas. Como parâmetro, passamos
uma string identificando o contexto desejado. Neste livro, usaremos o contexto 2d (d em minúsculo!):
s s t ts
srt
r s
r s ttts
t tt rá
r tt sttt
srt
5
1.2. Começando a desenhar
Casa do Código