Desenvolvimento de jogos com HTML5

O HTML 5 uma nova plataforma para o desenvolvimento de jogos

online e com potencial para ser uma das mais utilizadas para o
desenvolvimento de jogos, pois esta linguagem compatvel com a
maioria dos browsers existentes em computadores, tablets e
smartphones, incluindo iPads e iPhones.

Utilizando o HTML 5 juntamente com as folhas de estilos CSS e

o JavaScript possvel desenvolver jogos de uma forma rpida,
compatvel com diversas plataformas, incluindo dispositivos mveis
(como j descrito acima), o que no possvel com plataformas como
Adobe Flash, onde necessrio realizar adaptaes para que o
mesmo jogo seja executado em diferentes dispositivos.
Mais antes de iniciar a aprendizagem do HTML 5 importante
saber quais so os profissionais envolvidos no desenvolvimento de
jogos e quais as etapas presentes neste desenvolvimento.
O
que

um
Jogo?
Um jogo uma atividade ldica (toda e qualquer ao que tem
como objetivo produzir prazer quando executada) composta por
uma srie de aes e decises, limitado por regras e pelo universo
do jogo, que resultam em uma condio final. J os jogos digitais,
as regras e o universo do jogo so m apresentados por meios
eletrnicos e controlados por um programa digital. As aes do
jogador, suas decises, escolhas e oportunidades compem a
"alma do jogo".

Antes de iniciar o desenvolvimento de um jogo, vamos conhecer

quais so os profissionais envolvidos neste desenvolvimento.
Profissionais envolvidos na criao de jogos
Alm de uma plataforma de desenvolvimento de jogos so
necessrios profissionais de vrias reas para a criao do jogo.
Entre eles podemos destacar:

Produtores: so os responsveis por supervisionar o

desenvolvimento de um jogo. Os produtores so responsveis
em dar vida ideia inicial de um jogo.
Game Designers: Os profissionais responsveis desta rea
so os responsveis pela criao e participam da concepo
de ideias para o desenvolvimento. Dentro da criao de um
jogo existem vrios tipos de Designers, como por exemplo:
Character Designer: Responsvel pela criao dos
personagens do jogo.
Game Designer: o responsvel pela jogabilidade, ambiente
e histria durante a produo do jogo.
Object Designer: o responsvel pela criao dos
elementos do cenrio, personagens e como eles iro se
interagir entre si.
Level Designer: o responsvel pela criao dos desafios,
puzzles (quebra-cabeas) e claro o desenvolvimento das
fases do jogo.
Sound Designer: o responsvel pela criao dos sons e as
msicas executadas no jogo.
Modeladores 3D: Criam e modelam em 3D todos os
personagens do cenrio, da animao, criam texturas,
iluminao, dentre tantas outras que envolvam imagem. Neste
curso apenas criaremos jogos utilizando imagens em 2
dimenses, no sendo necessrio conhecimento de
ferramentas 3D.
Programadores: so os responsveis por desenvolver toda a
lgica do jogo e criar o cdigo que ir fazer funcionar a fsica
do jogo.
Programador
de
fsica
do
jogo: dedica-se
ao
desenvolvimento da fsica que o jogo ir utilizar,
estabelecendo regras que simularo a gravidade.
Programador de inteligncia artificial: So os responsveis
por desenvolver toda a lgica existente por detrs de cada
ao que feita durante o jogo.

Programadores de grficos: So os responsveis por no

deixar jogo lento quando, por exemplo, h muitos inimigos na
tela, o que exige uma grande capacidade de processamento,
s vezes superior ao que o console ou computador suportam.
So os responsveis por otimizar a maneira como os grficos
sero apresentados na tela.
Testadores: so os responsveis por analisar tecnicamente o
jogo com o objetivo de indicar falhas em seu desenvolvimento.
O foco deste curso o desenvolvimento de jogos em HTML5,
sendo assim, iremos focar o curso no conhecimento da
linguagem HTML5. As imagens, o roteiro do jogo e os demais
elementos presentes no jogo j esto prontos, bastando
apenas desenvolver, ou seja, entraremos na fase de produo
do jogo.
Vamos ento conhecer quais
desenvolvimento de um jogo.

so

as

fases

de

Etapas na produo de um jogo

Agora que voc j conhece os profissionais envolvidos na
criao de um jogo, vamos agora conhecer as etapas da
produo de um jogo.
Pr-produo: A pr-produo de um jogo envolve
elementos de concepo de ideia, regras de negcios e
documentao do projeto. Para que um jogo comece a ser
produzido, as ideias precisam ser criadas e aprovadas pelos
editores e desenvolvedores da empresa.
Produo: Nesse estgio de produo os programadores
trabalham para desenvolver a lgica do jogo, bem como os
sistemas de clculo, de fsica etc. Os artistas se concentram
na produo de personagens, hoje em dia todos modelados
em 3D. Engenheiros de som desenvolvem os efeitos sonoros
e os compositores a trilha sonora do jogo.
Ps-Produo: nesta fase em que os testadores trabalham
testando o jogo busca no s de bugs (erros), mas tambm
testando a jogabilidade, desempenho computacional das
plataformas com o jogo e tudo o mais. Aps a realizao de
todos os testes e a obteno de garantia que o jogo est

totalmente pronto, a logstica de distribuio e venda

acionada para que o jogo seja vendido.
Ambiente de trabalho
Agora que conhecemos as etapas na produo de um jogo,
vamos preparar o ambiente de trabalho para a produo de
um jogo emHTML5.
Para a criao de cdigos HTML5, CSS e JavaScript no so
necessrios instalao de nenhum aplicativo especfico,
pode-se at utilizar o bloco de notas do Windows, mas para
um desenvolvimento mais preciso, e para que se possa
realizar testes de maneira mais confivel, iremos utilizar neste
curso os seguintes aplicativos.
Notepad++
Notepad++ um software livre (como em "liberdade de
expresso" e tambm como em "cerveja grtis") editor de
cdigo fonte e substituio bloco de notas que suporta vrias
lnguas. Em execuo no ambiente MS Windows, o seu uso
regido pela licena GPL.
Com base na poderosa edio componente Scintilla,
Notepad++ escrito em C++ e usa puro Win32 API eSTL,
que garante uma maior velocidade de execuo e menor
tamanho do programa.
Para abrir o programa, clique no menu Iniciar, escolha Todos os
Programas, selecione a pasta Notepad++ e por fim clique sobre
Notepad++.

Editor Notepad++ aparece na tela.

Caso seu computador no possua o Notepad ++, voc pode baix-lo

a partir da URL: http://notepad-plus-plus.org
Google Chrome Canary e Mozilla Firefox
O Google Chrome Canary um browser que tem como finalidade
funcionar como teste de desenvolvimento, pois ele apresenta
funcionalidades que ainda no foram aplicadas na verso estvel
para o pblico geral. Em outras palavras, ele uma verso para
desenvolvedores, ele hoje uma verso que ser estvel num
futuro prximo (dias ou meses). A diferena dessa verso em
relao verso estvel (pblica) o maior suporte s APIs e
funcionalidades do HTML5.
Voc
pode
baixa-lo
a
desta URL:https://tools.google.com/dlpage/chromesxs/

partir

O Mozilla Firefox, ao lado do Chrome, um dos navegadores

mais populares da internet e tambm totalmente compatvel com
os principais recursos do CSS3.

Voc pode baixa-lo a partir desta URL:http://www.mozilla.org/ptBR/firefox/fx/

Agora que j temos os programas necessrios, vamos conhecer os
conceitos bsicos da linguagem HTML5.
Conhecimentos bsicos sobre HTML5, CSS e JavaScript
No desenvolvimento de jogos ou qualquer aplicativo utilizando
o HTML5, alguns mitos de desenvolvimento devem ser explicados.
A estrutura de desenvolvimento de um aplicativoHTML5 segue as
seguintes caractersticas:

HTML5 - Marcao.
CSS - Formatao.
JavaScript - Comportamento.

O que isso quer dizer? Ao se criar um jogo ou aplicativo

utilizando HTML5, o HTML5 somente ser responsvel pela
exibio dos elementos no browser, como imagens, textos,
execuo de sons, exibio de vdeos etc.
Para realizar a formatao desses objetos iremos utilizar o CSS e
para criar comportamentos e funes, ou seja, a programao do
aplicativo, utilizaremos o Java Script. O HTML5 no apresenta
mtodos e funes para deteco de comportamentos, isso deve
ser feito em JavaScript.

O que o HTML5 trouxe de novo so as novas possibilidades para

que o Javascript controle os elementos criados no cdigo. Ento
vamos agora conhecer um pouco de cada uma dessas linguagens.
Vamos agora relembrar os conceitos bsicos de cada uma das
linguagens que sero utilizadas neste curso.
HTML 5
O HTML5 o novo padro da linguagem de marcao de
hipertextos (HTML). Apesar de o HTML5 ainda estar em fase de
desenvolvimento, a maioria de seus novos recursos j podem ser

utilizados em browsers modernos como o Google Chrome, Mozilla

Firefox, Safari etc.
O que h de novo no HTML5 e quais as vantagens de sua
utilizao:

Elemento para desenho 2D.

Elementos < audio > e < video > para reproduo de mdias.
Suporte para armazenamento local.
Novos elementos semnticos: < article >,
< header >, < foot >, < section >, etc.
Novos controles de formulrios, como calendrios, data, hora,
pesquisa, telefone etc.

Vamos
agora
criar
uma
estrutura
bsica
de
um
cdigoHTML5 no Notepad++ instalado anteriormente. Abra-o, caso
ainda no esteja.
Clique no menu Arquivo e depois em Novo:

Como vamos trabalhar com a linguagem HTML, precisamos

informar ao Notepad++, a linguagem que iremos trabalhar, para
isto, clique no menu Linguagem, selecione a letra H e clique
em HTML.

Defina para o arquivo aberto a seguinte marcao HTML:

exemplo1.html
Esta a estrutura bsica de uma pgina em HTML5. Vamos
entender suas principais partes seguir.

O Doctype
O Doctype deve ser sempre a primeira linha de cdigo do
documento antes da tag HTML:

O Doctype indica para o navegador e para outros meios qual a

especificao de cdigo utilizada, que nesse caso, HTML5. Isso
determina a forma com que o meio de acesso (navegador, leitor de
tela e etc) ir renderizar o cdigo lido.
O Doctype no uma tag do HTML, mas uma instruo para que o
browser tenha informaes sobre qual verso de cdigo a
marcao foi escrita.
O elemento HTML

Uma marcao (cdigo) HTML uma srie de elementos em rvore

onde alguns elementos so filhos de outros e assim por diante
(DOM). O elemento principal dessa grande rvore sempre o .

O atributo "lang" necessrio para identificar qual a linguagem

principal do documento.
Vamos agora salvar este arquivo. Clique no menu Arquivo em
seguida selecione a opo Salvar. Para o local de gravao,
escolha a Sua Pasta. Crie uma pasta com o nome de jogo1, dentro
de sua pasta. Salve o arquivo com o nome deexemplo1.html na
pasta jogo1, recm-criada:
Vamos agora testar o funcionamento do cdigo diretamente no
browser. Clique no menu Executar do NotePad++ e escolha a
opo, Launch in Chrome.
Observe que o
no browser padro.

resultado

do

cdigo

ser

apresentado

Vamos
agora
aplicar
um
formato
ao
seletor
< h1 > utilizado no cdigo HTML utilizando as folhas de estilo CSS.
Folhas de estilo CSS

CSS a abreviao do termo em ingls Cascading Style Sheet que

traduzido para o portugus como folhas de estilo em cascata.
O CSS tem por finalidade indicar como uma determinada marcao
em HTML/XML deve ser exibido, como por exemplo, cor, tamanho,
posio, etc.
Segundo a W3C (World Wide Web Consortium) que um consrcio
internacional de pessoas e empresas e rgos governamentais que
visa desenvolver padres para a criao e a interpretao de
contedos para a Web, CSS pode ser definida da seguinte maneira:
"CSS um mecanismo simples para adicionar estilos, por exemplo,
fontes, cores, espaamentos aos documentos web".
Vamos conhecer a estrutura bsica de uma regra CSS.

Anatomia de uma regra CSS

Na imagem abaixo tempos uma regra bsica da anatomia de um
cdigo CSS, que deve ser composta pelo seletor e a declarao
que ser atribuda a esse seletor, composta por propriedade e valor:

Seletor: Alvo da regra CSS. Elemento ou grupo de elementos

que recebero os estilos definidos na regra.
Declarao: Parmetros de estilizao.
Propriedade: Define qual ser a caracterstica do seletor a
ser utilizada.

Valor: a qualidade ou a quantificao da propriedade.

O cdigo CSS deve ser escrito entre as tags < style > e< /style
> do cdigo HTML. Vamos alterar as propriedades CSS do seletor <
h1 >.
No
exemplo
acima
alteramos
as
propriedades
fontsize para 30px e a propriedade color para blue. Vamos agora
alterar as propriedades para o seletor div identificado com o nome
"objeto1".
Salve o arquivo no Notepad++, logo
seu browser. Visualizao do arquivo:

aps

visualize-o

no

Pressione [CTRL+S] (para salvar) e teste o funcionamento do

cdigo:

Observe que a formatao do seletor < h1 >foi alterada e a div

objeto1 foi formatada e posicionada respeitando as propriedades
indicadas.
JavaScript
JavaScript uma linguagem de programao com recursos
embutidos para acessar partes de um documento HTML, incluindo
estilos CSS dentro dos elementos. Um documento HTML pode
conter cdigo JavaScript dentro do elemento < script >. Vamos
realizar um exemplo simples, vamos exibir a data atual por um
cdigo JavaScript.
Pressione [CTRL+S] para salvar as alteraes no documento. Abra
o arquivo no Browser e visualize o resultado apresentado:

O mtodo document.write escreve qualquer informao no

documento, neste exemplo indicamos a informao que deveria ser
escrito era a data e hora atual obtidas pela funo Date().
Caso queira escrever uma mensagem no documento pelo
mtodo document.write obrigatrio o uso das aspas como o
exemplo abaixo:
No utilize aspas para exibir valores numricos, funes e contedo
de variveis. Vamos agora alterar propriedades CSS pelo
cdigo Javascript.
Funes JavaScript definidas pelo programador
O JavaScript possui muitas funes e mtodos embutidos, mas
no possui tudo o que voc poderia precisar no desenvolvimento de
um aplicativo e principalmente de um jogo, por isso possvel criar
funes especificas.
Inicialmente vamos
cdigo JavaScript.

criar

a div que

ser

alterada

pelo

Como exemplo vamos criar uma funo que ir alterar a

propriedade background-color da div objeto1. Exclua a linha de
cdigo com o mtodo document.writer e digite o cdigo abaixo:
Observe que criamos uma funo com o nome de mudar Cor que
pelo
mtodo
document.getElmentByid ir
alterar
a

propriedade backgroundColor da div identificada

nome objeto1 para verde.

pelo

Agora vamos criar um boto ir executar essa funo.

Pressione [CTRL+S] para salvar as alteraes no documento e
execute-o:

jQuery
Quando se trata da complexidade de programar jogos, o ideal que
se tente simplificar e facilitar a utilizao do cdigo. Para isso,
existem
hoje FrameWorks
JavaScript que
ajudam
o
desenvolvedor a abstrair uma grande quantidade de cdigo, como
por
exemplo,
resolver
problemas
de
compatibilidade
entre browsers entre outras funes.
O jQuery hoje um dos FrameWorks mais utilizados para o
desenvolvimento de jogos e de outros demais aplicativos utilizando
o HTML5.
Link
para
a
ltima
verso
estvel
dojQuery: http://code.jquery.com/jquery.min.js

disponvel

Temos duas opes:

Usar essa URL de um servidor externo (Google Code) nos

exemplos.

Baixar esse arquivo jquery.min.js e colocar localmente em

uma pasta para usarmos.

Para este curso, vamos escolher a primeira opo, vamos usar

essa URL direta do jQuery que est hospedado no Google Code.
Antes, crie um boto que ir chamar uma funo com o nome
de ocultar(). Digite o cdigo abaixo aps a tag < input > criada
anteriormente:
Vamos
agora
criar
a
cdigo
abaixo
entre
< /script >:

funo ocultar().
Digite
as tags <
script
>

o
e

Observe que agora o cdigo foi simplificado de tal forma que

apenas precisamos utilizar o caractere $ e indicar o nome do objeto
a ser modificado e a propriedade que ser utilizada.
Mas para usar esta forma simplificada devemos informar no cdigo
que iremos utilizar o framework jQuery. Digite o cdigo abaixo aps
a tag < /title > antes de < style >:
Pressione [CTRL+S] para salvar as alteraes no documento. Veja
o resultado final do documento:

Nada impede que voc crie uma pasta, por exemplo,

chamada js dentro da pasta jogo1 e salve o arquivo do jQuery l, e
ao chama-lo usando a tag < script >:

Isso vai ficar a seu critrio. Abra o arquivo no Browser e visualize o

resultado apresentado. Observe que ao clicar no boto "Ocultar
div" adiv ser oculta.
Agora que j revimos alguns conceitos bsicos de HTML,
JavaScript e CSS vamos dar inicio ao primeiro jogo.
Documento do Projeto do Jogo
Embora muitas pessoas saltem esta etapa no desenvolvimento de
jogos, ela uma parte essencial do processo do desenvolvimento
de um jogo. O documento do jogo determina por escrito todo o
rascunho do jogo, descrevendo as peas que devero se juntar
para formar o game, incluindo:

Resumo do tema ou enredo;

Lista de locaes ou ambientes que o jogo ir conter;
Rascunhos de mapas, puzzles a serem solucionados;
Elenco de personagens, storyboard com as animaes entre
outras informaes.

claro que os tipos e a quantidade de informaes que esse

documento ir conter dependem do tamanho e da complexidade do
jogo.
Observao: O incio deste jogo ser desenvolvimento utilizando
exclusivamente JavaScript e CSS. Nas unidades que se seguem
iremos complement-lo com recursos do HTML5, com o udio e
armazenamento local, por exemplo. importante criar esse primeiro
exemplo para que voc conhea os principais recursos de
desenvolvimento de jogos, como deteco de teclas, deteco da
posio do mouse, identificaes de colises, etc.

Vamos ento ao documento deste Projeto:

Nome
do
jogo: Pong.
Tema: Jogo para 2 jogadores onde a misso dos jogadores
rebater um asteroide:

Fazendo com que o seu adversrio no alcance o asteroide e assim

acumular pontos. Ser somado 1 ponto quando o asteroide atingir a
rea de pontuao:

Os jogadores iro controlar os rebatedores:

Pelas seguintes teclas:

Jogador 1:

W - movimenta o rebater para cima.

S - movimenta o rebater para baixo.

Jogador 2:

Seta para cima - movimenta o rebatedor para cima.

Seta para baixo - movimenta o rebatedor para baixo.

O jogo se passar no espao, portanto iremos utilizar como imagem

de fundo uma imagem espacial:

Observe que esse documento, apesar de bem simples, facilita o

entendimento do programador para um desenvolvimento mais
rpido, e tambm evita possvel erros de entendimento de como
ser a mecnica do jogo.
Com base neste documento vamos dar incio ao desenvolvimento
do jogo.

Criando o Jogo
Abra o aplicativo Notepad++ e crie um novo documento, clicando
em Arquivo e depois em Novo. Digite a estrutura bsica de um
cdigo HTML como indicado baixo: pong.html
Iremos iniciar o desenvolvimento do jogo criando o cdigo CSS que
ir formatar e posicionar as divs que sero utilizadas no jogo.
Vamos iniciar criando uma div com o tamanho de 600pixels de
largura por 400 pixels de altura que ir receber a imagem de fundo
do jogo. Iremos chamar essa div de fundo.
Abaixo da div fundo iremos indicar a formatao de uma div com o
nome de asteroide.
Agora, iremos criar uma classe com o nome de paddle que ir
posicionar os batedores laterais que sero controlados pelos
jogadores.
Para finalizar o posicionamento dos elementos do jogo vamos criar
uma div com o nome depaddle2 que ir posicionar o rebatedor da
direita.
Com o cdigo CSS indicamos o posicionamento e a formatao dos
objetos, vamos agora, criar o cdigo HTML que ir criar os objetos.
Observe que todas as divs criadas esto posicionadas dentro de
uma div container chamada de fundo.
Antes de visualizar o resultado do jogo, copie a pasta pong que se
encontra em \arquivos-cursos\html5, para Sua pasta, nela esto
os arquivos de imagens e sons que sero utilizados neste jogo.
Vamos
agora
visualizar
o
resultado.
Pressione
comando [CTRL+S] para salvar as alteraes no arquivo.

Salve este arquivo com o nome de pong.htmldentro

pasta jogo1, que se encontra dentro de sua pasta.

da

Abra o arquivo pong.html no Chrome e veja o resultado:

A partir do prximo tpico iremos criar o cdigo JavaScript que ir

alterar a posio das divspaddle1 e paddle2 quando as teclas de
movimentao do jogo forem pressionadas pelos jogadores.
Capturando as teclas pressionadas
Com base no documento do jogo criado na aula anterior iremos
agora
capturar
as
teclas
que
sero
pressionadas
pelo jogador1 para movimentar o batedor.
A criao de uma funo que captura as teclas pressionadas pelo
jogador uma das funes mais importantes no desenvolvimento
de um jogo. Sabemos pelo documento do jogo que o jogador1 ir
pressionar as teclas W e S para movimentar o batedor. O
JavaScript identifica a tecla pressionada pelo seu valor
Decimal (DEC) na tabela ASCCII, que pode ser consultada
no link: http://www.asciitable.com/
Aps identificar a tecla que jogador1 ir pressionar, devemos
indicar qual ser o comportamento a ser executado. Quando
ojogador1 pressionar
a
tecla W (cdigo
decimal
87)
a divpaddle1 ser movimentada -5 pixels no eixo Y. Caso
ojogador1 pressione
a
tecla S (cdigo
decimal
83)
a divpaddle1 ser movimentada +5 pixels no eixo Y.
Com base nessas informaes a primeira coisa a fazer criar uma
varivel com os cdigos decimais de cada tecla que ser capturada.
Diferentemente no exemplo criado na unidade anterior, nesta
unidade iremos criar um arquivo especfico para o
cdigo JavaScript.
Abra o aplicativo Notepad++ e crie um novo documento em
branco. Digite nele apenas o cdigo JavaScript abaixo: pong.js.
Dentro da pasta jogo1, crie uma pasta chamada js e salve esse
arquivo desta pasta js com o nome de pong.js.

A pasta jogo1 ficar com essa estrutura:

Agora vamos criar uma funo que ir identificar se as

teclas W ou S sero pressionadas.

Utilizamos a estrutura condicional switch para identificarmos

quando as teclas forem pressionadas. Quando o usurio digitar "W"
o
elemento paddle1 ter
sua
propriedade top alterada,
incrementada
em 5.
Quando
apertar
"S"
ter
a
propriedade top decrementada em 5.
Pressione [CTRL+S] para salvar as alteraes no arquivo. Abra o
exemplo no navegador e pressione as teclas "W" e "S".
Capturando eventos de mouse
Vamos supor que no documento de desenvolvimento deste jogo ao
invs de estar descrito que os rebatedores sero controlados pelas
teclas do teclado, os rebatedores devero ser controlados pelo
mouse. Neste caso, devemos capturar as posies Y do ponteiro do
mouse e alterar a posio da propriedade top da div #paddle1.
Vamos criar um novo arquivo JavaScript onde iremos criar um
evento, que ir capturar a posio Y do ponteiro do mouse.
Crie um novo arquivo em branco no Notepad.
Iremos agora criar um evento com o nome de coordenadas e
iremos criar uma nova varivel com o nome de y.
Existem diferenas entre capturar a posio do ponteiro do mouse
entre o Google Chrome e entre o Mozilla Firefox. Para que este
jogo possa funcionar corretamente nestes dois tipos de browsers,
fizemos essa verificao:

Indicamos que a propriedade top da div#paddle1 dever ser

atualizada de acordo com a posio do eixo Y do mouse
menos 80unidades que a altura total da div #paddle1. Desta fora, o
ponto de referncia para a movimentao da div#paddle1 estar
posicionado no topo da div:

Observe que finalizamos a funo e indicamos que caso o mouse

se movimente no browser a funo coordenadas ser executada:

Salve este arquivo

de pong_mouse.js.

Vamos
agora
arquivo pong.html.

dentro

vincular

da

pasta js com

nome

arquivo pong_mouse.jsao

Abra o arquivo pong.html e substitua o arquivo pong.js pelo

arquivo pong_mouse.js:
Pressione [CTRL+S] para salvar as alteraes no arquivo. Abra o
arquivo no navegador e veja o resultado.

Criando a movimentao do segundo jogador

Nesta unidade iremos voltar a seguir o documento do jogo. Observe
que no documento do jogo, o jogador2 ir movimentar o rebatedor
pelas setas de direo.
Quando o jogador2 pressionar a seta para cima do teclado,
a div paddle2 ir se movimentar -5 pixels no eixo Y. Quando
o jogador2 pressionar a seta para baixo do teclado a div padlle2 ir
se movimentar +5 pixels no eixo Y.
Abra
o
arquivo pong.html e
remova
a
referncia
arquivo pong_mouse.js e substitua pelo arquivo pong.js:

ao

Pressione [CTRL+S] para salvar as alteraes no arquivo. Abra o

arquivo pong.js.
Na varivel TECLA indicaremos os cdigos para a seta para cima
(38) e seta para baixo (40). Agora ela ter essa implementao:

Tambm vamos acrescentar a ao para o elemento Paddle2. O

cdigo completo de pong.js
Uma observao muito importante relacionada ao novo cdigo:
Armazenaremos a referncia dos elementos em variveis:

E depois as usamos. Ganhamos em performance ao fazer isso, pois

o JavaScript s precisa procurar na rvore DOM pelos elementos
apenas uma vez. Se tivssemos feito assim (no precisava alterar o
cdigo):
Iria funcionar normalmente. Mas ficaria um cdigo deselegante e de
difcil
alterao.
Alm
disso,
a
cada $("#paddle2") e$("#paddle1") o JavaScript teria
que
pesquisar o elemento na rvore DOM, o que decrementa a
performance (apesar dela ser imperceptvel para este pequeno
projeto).
Game Loop
O Game Loop o loop principal do jogo, em alguns casos,
chamado de seu corao. Ele responsvel pelo funcionamento do
jogo. Em um exemplo clssico, um jogo consiste de uma sequncia
de pegar a entrada do usurio, atualizar o estado do jogo, aplicar a
lgica, os efeitos sonoros e mostrar o jogo. Essa sequncia feita
atravs do game loop. Em um pseudo cdigo, essa ao seria
executada:

Enquanto o jogo estiver rolando o lao ser executado e as

funes tambm:

Sero chamadas. Em ler_entrada() so executadas as aes de

leitura dos dispositivos de entrada, como:teclado, mouse. J
em atualizar_jogo() a lgica do jogo aplicada em conjunto com
os dados lidos dos dispositivos de entrada. Normalmente nessa

funo que se verifica se o usurio perdeu ou ganhou o jogo e onde

a varivel jogo_rodando atualizada, seno o jogo ficaria
executando infinitamente. E em desenhar_jogo(), o jogo
redesenhado
de
acordo
com
as
novas
informaes
de atualizar_jogo().
Melhorando a jogabilidade
Jogabilidade termo utilizado para indicar a interao que o
jogador tem com o jogo e que descreve a facilidade na qual o jogo
pode ser jogado.
Alm de exibir as imagens na maior velocidade possvel, um jogo
precisa tambm dar resposta aos comandos do jogador. Para
passar a sensao de tempo real, o jogo precisa atualizar a tela o
mais rpido possvel e processar os comandos do jogador no
mesmo ritmo. Para realizar estas tarefas ao mesmo tempo vamos
criar um loop principal que simplesmente um loop onde os
eventos de teclado e/ou mouse so capturados e revertidos em
uma ao em um menor tempo possvel.
Iremos ento melhorar a jogabilidade tornando o jogo mais divertido
ao jogador criando um game loop.
Vamos criar um novo arquivo javascript com o nome
depong2.js que ir melhorar consideravelmente a jogabilidade, e
resolver este problema de teclas pressionadas.
Abra o Notepad e crie um arquivo em branco. Salve este arquivo
com o nome de pong2.jsdentro da sua pasta no diretrio js. Abra o
arquivo pong.html e substitua o arquivo pong.js por pong2.js.
Inicialmente vamos criar novamente a varivel TECLA com os
cdigos de captura de teclas.
Agora, vamos precisar de uma nova varivel que ir armazenar a
tecla pressionada pelos jogadores. Vamos chamar esta varivel de
jogo. Digite o cdigo abaixo:
Agora vamos ao cdigo do game loop.
Funo setInterval

A funo setInterval() nativa do JavaScript e utilizada para

indicar a unidade de tempo que um determinado evento ir
acontecer. Neste jogo iremos criar uma varivel que ir chamar uma
funo com o nome de loop a cada 30 milissegundos.
Desta forma, teremos um temporizador que ir movimentar os
batedores quando as teclas forem pressionadas. Funcionando no
nosso caso, como o Game Loop clssico.
Observe que a varivel jogo.pressionou somente ser verdadeira
(true) quando a tecla for pressionada (keydown), e quando a tecla
no estiver mais sendo pressionada (keyup) o valor da
varivel jogo.pressionou ser falso (false).
Agora vamos criar a funo loop() que deixar o jogo em loop. A
resposta ao teclado pressionado ser executada pela
funo moveBatedores(). Tambm criaremos.
Observe que a lgica foi alterada. Antes, implementvamos as
aes executadas pela funo moveBatedores() dentro do
eventokeydown(). Agora, nos eventos keydown() e keyup()apenas
capturamos as teclas que esto sendo pressionadas e as
atualizamos no array jogo.pressionou.
A funo loop() executada a cada 30 milissegundos:

E ela executa o mtodo moveBatedores():

E este mtodo verifica a tecla pressionada (a partir

doarray jogo.pressionou) no momento e decide se vai reposicionar
o paddle1 ou paddle2.

Em resumo: Neste momento, o jogo faz a mesma coisa que fazia

antes, mas com uma alterao de metodologia. Agora usamos
o gameloop.
Movimentando o asteroide dentro do game loop
Iremos utilizar o mesmo temporizador criado para movimentar os
batedores (o game loop) para movimentar o asteroide a cada 30
milissegundos.
Inicialmente iremos criar uma varivel que ir conter os valores da
velocidade, posies x e y do asteroide e a direo atual da sua
movimentao no eixo x e no eixo Y.
O prximo passo criar a funomoveAsteroide().
Inicialmente nesta funo iremos criar variveis que iro identificar a
largura e a altura total da div fundo e, criaremos tambm, uma
varivel como nome de asteroide que ter o contedo da varivel
jogo.asteroide.
Crie-a depois da funo moveBatedores():
Para criar a movimentao da div asteroide somamos ao eixo x da
varivel asteroide o
valor
da
varivel asteroide.velocidade *asteroide.direcaoX.
Efetuando
este mesmo processo ao eixo y. Lembre-se que esse procedimento
ser executado a cada 30 milissegundos criando a movimentao
da div no eixo x e no eixo y.
Neste
primeiro
momento,
as
variveis FundoAltura e
FundoLargura no sero utilizadas. Mas depois elas sero.
Vamos
agora
testar
o
funcionamento
do
cdigo.
Pressione [CTRL+S] para salvar as alteraes e execute o
arquivo pong.html.
Observe que a div asteroide ir se movimentar no eixo x e no
eixo y. Pressione a tecla F5 para reiniciar o efeito. Observe que a
movimentao ainda no respeita os limites do jogo (a div #fundo).
Antes de criar os limites do jogo vamos rever como possvel
identificar possveis erros no cdigo do jogo.

Visualizando possveis erros no cdigo

Ao desenvolver um jogo ou qualquer aplicativo, durante o seu
desenvolvimento podem ocorrer erros no cdigo. Para visualizar
estes erros, caso o jogo no apresente o resultado esperado. Para
emular um erros, altere temporariamente o nome da
funo moveAsteroide() para moveAsteroideTESTE(). Isso vai
gerar erro.
Agora, clique com o boto direito do mouse sobre qualquer local
da pgina no Chrome e selecione a opo Inspecionar elemento:
Abrir uma rea na parte inferior do navegador, clique na
aba Console e veja um descritivo de que existe um erro:

O erro especfico. Cad a funo moveAsteroide()? Ela no

existe, ns a renomeamos para moveAsteroideTESTE().

E em seguida, clique sobre o script pong2.js.

Ele ser aberto e nos ser informado o local do erro:

Usar o console durante o desenvolvimento sempre importante,
para evitar que algum erro passe em branco.
Refaa a alterao, altere a funo moveAsteroideTESTE() para o
seu nome correto: moveAsteroide(). Salve as alteraes. Agora
vamos voltar para o jogo.
Criando os limites de movimentao do asteroide
Agora, vamos limitar a movimentao do asteroide dentro
da div fundo. Iremos mudar a direo do asteroide caso ele
chegue nos limites horizontais e verticais do fundo do jogo.
Na funo moveAsteroide() aps a linha:

asteroide.y += asteroide.velocidade * asteroide.direcaoY;

Observe que caso o valor de y da varivel asteroide seja maior que
o valor da varivel FundoAltura, ser alterado o valor da varivel
asteroide.direcaoY para -1.
Pressione [CTRL+S] para salvar as alteraes e execute o
arquivo pong.html.
Observe que a div asteroide ao
da div fundo ir mudar de direo.

chegar

no

limite

vertical

Vamos agora limitar a movimentao da div asteroide quando a

mesma chegar ao final da div fundo do lado direito.
Observe que, identificamos que caso o valor da propriedade x da
varivel asteroide seja maior que o valor da largura da div fundo,
o valor da varivel asteroide.direcaoX ser alterado para -1.
Salve as alteraes e execute o arquivopong.html. Observe que
a div asteroide ao chegar no limite horizontal da div fundo mudar
a sua direo.
Vamos agora criar os demais limites de movimentao.
Criando os demais limites de movimentao
Criando os demais limites de movimentao. Salve as alteraes e
execute o arquivopong.html. Observe que agora a movimentao
da div asteroide ficou limitada ao tamanho da div fundo.
No prximo tpico iremos identificar as colises com os batedores
dos jogadores.
Detectando colises
A deteco de colises em jogos nada mais do que identificar a
interseco de dois objetos diferentes. A deteco de colises
uma das funes mais importantes no desenvolvimento de jogos, as
funes de deteco de colises so utilizadas para identificar a
coliso e chamar uma resposta a esta coliso.

Para identificar a coliso utilizaremos valores do eixo Xe Y do

primeiro objeto e iremos comparar com os valores X e Y do
segundo objeto. Caso esses valores sejam iguais (ou prximos em
alguns casos) a deteco da coliso realizada.
Neste jogo em desenvolvimento iremos identificar a coliso
da div #paddle1 (controlada
pelo
jogador
1)
e
da div #paddle2 (controlada pelo jogador 2) com a div#asteroide.
Inicialmente vamos criar a deteco da coliso do batedor do
jogador 1 (div #paddle1) com o asteroide(div #asteroide). Para
isso
vamos
verificar
se
a div#paddle1 est
sobreposta
a div #asteroide mudando assim a sua direo. Criaremos uma
varivel com o nome de paddle1X que ir conter a
posio left da divpaddle1 (valor obtido pela propriedade left) mais
a largura da div paddle1 (valor obtido pela propriedade width):

Desta forma ser possvel identificar o valor de x do batedor do

jogador 1:

Criaremos outra varivel com o nome depaddle1YBaixo que ir

conter o valor da propriedade top da div #paddle1 mais a altura
da div paddle1 (valor obtido pela propriedade height).

Desta forma ser possvel identificar o valor de y da parte inferior

do batedor do jogador 1:

Criaremos
tambm,
outra
varivel
com
o
nome
de paddle1YTopo que ir conter somente o valor da
propriedade top da div #paddle1. Desta forma ser possvel
identificar o valor de y na parte superior do batedor:

Com esses valores possvel identificar se o valor de xe

de y da div asteroide o mesmo das reas indicadas no batedor
do jogador 1.
Decretando coliso com o jogador 1
Vamos entender o cdigo que foi criado para identificar a coliso.
Observe que inicialmente foram criadas as variveis indicadas no
inicio desta unidade:

Depois verificado se o valor da propriedade de x da

varivel asteroide menor que o valor da varivel paddle1X. Isso
indicar que a div asteroide est posicionada no mesmo local
do paddle1.

Caso essa condio seja verdadeira ser verificado se o valor

de y da div asteroide menor ou igual a varivel paddle1YBaixo e
maior ou igual a varivel paddle1YTopo.

Isso ir verificar se o valor de y da div asteroide est entre a altura

da div paddle1confirmando a coliso. Caso esse condio for
verdadeira
ser
alterado
o
valor
da
varivel
asteroide.direcaoX para 1.

Agora, vamos fazer uma pequena refatorao. Observe que na

parte
que
detectamos
a
coliso,
selecionamos
o
elemento #paddle1:

E na funo moveBatedores() tambm o selecionamos:

Se essas variveis paddle1 e paddle2 so utilizadas globalmente

no arquivo, em mais de uma funo, por que no a tiramos do
escopo local da funo moveBatedores() e colocamos no escopo

global, antes das funes? Assim, selecionamos esses elementos

apenas uma vez no incio da execuo e ganhamos em
performance.
Faamos
isso,
remova
funo moveBatedores():

essas

variveis

da

Remova tambm a referncia da varivelpaddle1 na parte de

deteco de coliso:

Agora, no escorpo global do

variveis paddle1 epaddle2.
do array jogo.asteroideacrescente:

arquivo, inicializaremos as
Logo
abaixo

Por enquanto elas foram apenas inicializadas. Vamos armazenar

nelas as referncias dos elementos apenas quando a pgina for
carregada. E isso feito l em baixo, dentro da funo especial
do jQuery que indica que a pgina foi devidamente carregada:

O cdigo ficou melhor. Agora vamos partir para a deteco de

coliso com o jogador 2.
Detectando coliso com o jogador 2
Observe que neste cdigo a varivel paddle2Xfoi subtrado o
valor 51 unidades:
Utilizamos esse valor para que seja subtrada a largura
da div asteroide, para que a coliso seja detectada no local correto.

Salve as alteraes e execute o arquivopong.html. Observe que

agora a coliso com a div paddle2 identificada.
Textos dinmicos
Nesta unidade iremos criar textos dinmicos para exibir a
pontuao dos jogadores. Os jogadores iro pontuar sempre que
a div asteroide ultrapassar a div do jogador (paddle1 oupaddle2).
No exemplo abaixo o jogador 1 ir pontuar:

Inicialmente iremos criar uma nova div no arquivo pong.html aps

a div fundo com o nome de pontuacao.
Vamos agora editar o arquivo pong2.js.
Inicialmente vamos criar uma varivel com o nome de
pontuacao que ir receber os pontos do jogador1 e dojogador2.
O jogador
1 ir
pontuar
quando
o
propriedade
x da div asteroide for maior que a largura do fundo do jogo.
Salve as alteraes no cdigo e execute o arquivo pong.html.
Observe que a pontuao ser exibida:

Vamos agora, exibir a pontuao do jogador 2.

Exibindo a pontuao do segundo jogador
O jogador
2 ir
x da div asteroide for
jogo (menor que 0).

pontuar
quando
o
propriedade
menor que a largura do fundo do

Altere o if:

Salve as alteraes no cdigo e execute o arquivo pong.html.

Observe que a pontuao dos dois jogadores sero exibidas.
Elemento udio
Nesta unidade iremos utilizar o elemento audio do HTML5 para
executar sons no jogo. Utilizando-o juntamente com recursos do
JavaScript para referenciar e executar arquivos de udio, vamos
inserir uma msica de fundo para o jogo e executar sons quando o
asteroide entrar em coliso com os batedores do jogador1 e
do jogador2. Uma observao importante quando for utilizar
arquivos de udio que os diferentes tipos de navegadores no
executam todos os formatos de udio, utilize sempre arquivos no
formato MP3 ou OGG, que so executados sem problemas nos
navegadores Chrome, Firefox e Safari.
O elemento < audio > possui alguns atributos que devem ser
observados. Veja o exemplo abaixo:

Autoplay: a
propriedade autoplay indica
que
arquivomusica.mp3 deve ser executado automaticamente.

Controls: Se este atributo controls estiver presente, o navegador

oferecer controles para permitir que o usurio controle a
reproduo do udio, incluindo volume, procura e pausar/continuar.

Loop : Faz com que o udio repita automaticamente.

Preload: O atributo preload usado em elementos udio para
carregar arquivos grandes. Caso o valor deste atributo seja
verdadeiro, o arquivo de som ser pr-carregado antes de sua
execuo evitando possveis atrasos em sua execuo.
Vamos inicialmente indicar pelo elemento < audio > os arquivos
que sero executados pelo cdigo JavaScript.
Caso voc execute o arquivo, voc ir observar que os arquivos de
sons no sero executados, pois, no utilizamos a
propriedade autoplay. Iremos indicar a execuo desses arquivos
atravs do arquivo JavaScript.
Abra o arquivo pong2.js. Inicialmente vamos criar uma varivel
para controlar a execuo do som.
Agora vamos executar esse som, sempre que os batedores
dos jogadores 1 e 2 entrarem em coliso com o asteroide, na
funo moveAsteroide(). Na rea onde existem os ifs que
verificam colises, acrescente:
Salve as alteraes. Execute o arquivopong.html e verifique o
resultado. Observe que agora o som e executado toda vez que o
asteroide entrar em coliso com os batedores dos jogadores 1 e 2.
Uma msica ficou em looping (em repetio) no "fundo". Isso,
graas ao atributo "loop" do elemento "audio":

Criando uma condio de fim de jogo

Nesta unidade iremos criar uma condio que ir indicar quando o
jogo ser finalizado. Iremos finalizar o jogo quando o primeiro
jogador atingir 5 pontos. Para isso devemos sempre verificar a
varivel de pontuao de cada jogador e quando atingir 5

pontos iremos executar uma funo chamada de GameOver( ) que

ir pausar a msica, exibir uma mensagem de fim de
jogo e reiniciar o jogo.
Abra o arquivo pong2.js. Digite o cdigo que executar gameOver(
) abaixo da funomoveAsteroid( ) aps a pontuao dojogador2,
antes do comentrio: Detectando as colises.
O cdigo acima nos diz que, quando ojogador1 ou jogador2 tiver 5
pontos, a funo gameOve( ) executada.
Agora vamos criar a funo gameOver( ). Essa funo ir pausar a
msica de fundo, ir indicar quem ganhou o jogo e ir reiniciar o
jogo quando o boto OK for pressionado.
Digite o cdigo para criar a funo GameOver( ):
Salve as alteraes. Execute o jogo e veja o resultado quando
algum jogador tiver conseguido 5 pontos.
Armazenamento Local
Iremos utilizar os recursos de armazenamento local do HTML5 para
exibir o ltimo placar do jogo mesmo que a pgina do site seja
atualizada ou fechada. Desta forma quando o jogo for reiniciado
sero exibidos para o jogador o ltimo placar. Iremos tambm exibir
a data e hora da ltima partida realizada.
Os dados armazenados utilizando esse recurso so armazenados
em forma de cookies e podem ser armazenados at 4 GB de
informao. Lembrando que as informaes armazenadas
no browser Google Chrome, por exemplo, no estaro disponveis
em outro browser como o Mozilla Firefox. Para utilizar este recurso
iremos utilizar o comando localStore, utilizando a propriedade
localStore.setItem para indicar o item que ser armazenado e a
propriedade localStorage.getIt em para obter o item salvo.
Inicialmente vamos criar as divs onde os dados sero exibidos ao
jogador. Digite o cdigo no arquivo pong.html aps o fechamento
da div pontuao pela tag < /div >

Salve
as
alteraes
no
arquivo.
Agora
na
funo GameOver() vamos utilizar o comando localStore para
armazenar os dados obtidos pela partida realizada.
Altere a funo gameOver() e tambm acrescente acima dela a
funo infoGame().
Agora, na funo, acrescente.
Ou seja, mesmo que o usurio feche o navegador, ao abri-lo
posteriormente, os dados do ltimo jogo sero escritos na tela.
Canvas
Inicialmente produzido pela Apple para o navegador Safari, o
elemento < canvas > utilizado para delimitar uma rea do browser
onde a mesma ir receber imagens, ou renderizao de grficos
como: linhas, crculos, retngulos, etc., que podem ser criados
atravs de script. Nesta unidade iremos conhecer os principais
recursos deste elemento.
Abra o Notepad e crie um documento em branco. Digite para ele a
estrutura bsica de um cdigo HTML. canvas1.html
Observe que no cdigo acima definimos o elementos "canvas"
pela tag < canvas > com o nome de "meuCanvas" definindo o seu
tamanho em 600px de largura por 400px de altura.
Aps definir o elemento canvas, dentro do cdigo JavaScript,
possvel desenhar retngulos, caminhos (Paths) que incluam
segmentos de linhas e arcos, posicionar arquivos de imagem
sobre canvas, etc. possvel tambm criar preenchimentos dentro
de retngulos e caminhos. Para desenhar um objeto sobre
o canvas necessrio indicar as coordenadas do seu
posicionamento.
Na figura abaixo mostra o layout de um objeto canvas no tamanho
de 600px por 400px, os nmeros indicam as coordenadas de
cantos e do meio do objeto canvas:

Elemento Canvas
Vamos agora criar um cdigo JavaScript que criar os elementos
necessrios para a criao de objetos no canvas.
Dentro da tag < script > no < head > do documento, acrescente o
cdigo JavaScript.
Observe que foram criadas duas variveis, uma com o nome
de canvas e outra com o nome decontext. A varivel canvas ser
utilizada para indicar a rea do canvas no browser. Observe que
indicamos no cdigo HTML o tamanho de 600 pixels de largura
por 400 pixels de altura:

Na varivel context indicamos que sero utilizados recursos de

renderizao em 2 dimenses. Vamos agora desenhar uma linha.
Desenhando uma linha
Altere o cdigo JavaScript dado anteriormente.
Em execuo no navegador:

A linha abaixo: Define o ponto inicial da linha no canvas.

A linha abaixo: Define o ponto final da linha no canvas.

Esta linha, desenha a linha.

Desenhando um retngulo
Vamos substituir o cdigo que criou a linha por um cdigo que
criar um retngulo.
Em execuo:

A linha em seguida, inicia o caminho de renderizao.

A linha abaixo, cria um retngulo indicando a posio x, y inicial e

valores para a largura (width) e para a altura do objeto (height).
Desta fora este objeto ter a largura de 200 pixels e a altura de 100
pixels.

A linha abaixo, define a cor de preenchimento. Em seguida esse

preenchimento renderizado:

Indica a largura do contorno:

A cor do contorno:

Renderiza o contorno:

Criando um crculo
Para desenhar um crculo com HTML5 Canvas, podemos criar
um arco usando
o
mtodo arc()e
definir
o ngulo
inicial como 0 e ngulo final com a frmula matemtica 2 * PI.

Substitua o cdigo utilizado para criar o retngulo.

Em execuo:

Operaes com imagens e textos usando Canvas

Crie um novo arquivo. Digite a estrutura
cdigo HTML com o elemento canvas.

bsica

de

um

Salve o arquivo com o nome de canvas2.html.

Exibindo imagens no canvas
Primeiro copie a pasta canvas do arquivos-cursos\html5 para sua
pasta e coloque o arquivo canvas2.html na mesma pasta.

Para exibir uma imagem usando HTML5Canvas, utilizado o

mtodo drawImage()que requer um objeto de imagem e um ponto
de destino identificado pelas coordenadas x e y.

Altere o script do arquivo.

Em execuo:

Trabalhando com textos

Vamos agora criar um texto que ir aparecer aps a imagem ser
renderizada. Vamos utilizar o mtodo fillText dentro da funo
imagem.onload:
Em execuo:

Onde primeiro, indicamos o estilo da fonte o tamanho e tipo da

fonte.

A cor da fonte:

E por ltimo definimos o texto e sua posio.

Criando uma animao utilizando uma imagem mapeada

Com uma imagem mapeada, relativamente simples criar uma
animao baseada em clulas. Esta tcnica envolve a troca rpida
das imagens para simular uma animao.

Para utilizar uma imagem mapeada, antes necessrio cri-la, no

exemplo abaixo a imagem foi criada utilizando o Adobe
Photoshop, utilizando como tamanho de cada clula 32
pixels de largura por 32 pixels de altura:

Totalizando 8 clulas de largura por 3 clulas de altura

Desta forma podemos identificar cada um dos quadrantes da
imagem (clulas) da seguinte forma:

Crie um documento em branco no Notepad. Digite a estrutura

bsica de um cdigo HTML. (canvas3.html)
Crie tambm um arquivo chamado canvas3.js, que onde
colocaremos os scripts do exemplo. Vamos agora executar uma
funo assim que a janela do browser for carregada.
Agora vamos criar a funo canvasApl().

Observe que no cdigo acima criamos os elementos principais

do canvas e carregamos imagem tanks.png.
Agora vamos indicar quais quadrantes (clulas) da imagem
mapeada sero utilizados na animao.
Digite o cdigo no incio do arquivo.
Observe que criamos uma varivel do tipo Array que ir receber a
posio das imagens que sero utilizados na animao.

Observe que foi criada tambm uma varivel com o nome

de frameIndex que contm o valor de controle do ndice da Array.
Vamos criar mais 3 variveis que iro possuir o valor do ngulo de
rotao da animao do tank e de seu posicionamento no canvas.
Digite o cdigo no incio do arquivo. (canvas.js)
Agora vamos criar uma funo com o nome de desenhaTela() que
ir renderizar o canvas e exibir a animao.
Digite o cdigo.
Para finalizar, acrescente estas funes no arquivo.
Execute o exemplo:

Criando uma animao utilizando uma imagem mapeada

Observe que foi indicado a cor do fundo do canvas:

O seu posicionamento:

E utilizamos a propriedade setTransform:

Para redefinir a matriz de transformaoHTML5 Canvas para seu

estado padro, utilizando os valores 1,0,0,1,0,0. Deve-se redefinir
a matriz de transformao sempre que o canvas estiver dentro de
um loop.
Como o objeto ser girado dentro do canvas, alteramos o seu
ponto de referncia da matriz para o centro da imagem:

Como o quadrante da imagem mapeada possui o tamanho de 32

pixels, movemos o ponto central na metade desse valor:16 pixels.
Em seguida indicamos quais quadrantes sero exibidos na
animao:

Estamos usando o frameIndex da matriz animationFrames para

calcular a clula da imagem mapeada que ser exibida na tela.
Primeiro, necessrio encontrar o valor de x e de y do canto
superior esquerdo de cada quadrante.
Para encontrar o valor de x criamos uma varivel como nome
de sourceX que ir conter o valor do(frameIndex % nmero de
colunas da imagem) * largura da imagem.
O operador mdulo (%) retorna o resto de uma diviso, por
exemplo, o primeiro quadrante est posicionada no valor 0 da
varivel frameIndex sendo assim o clculo ficar: 0 % 8 onde o
resultado 0, multiplicado por 32se ter o resultado 0 indicando o
valor de x do primeiro quadrante.
No segundo quadrante o valor do frameIndex ser 1, sendo assim
o clculo ser 1 % 8 onde o resultado ser1, multiplicado
pode 32 se ter o resultado 32 indicado o valor de x do segundo
quadrante, e assim por diante.

Para encontrar o valor da posio do eixo y dividimos o valor

do frameIndex por 8 e multiplicar pelo tamanho do quadrante.
Agora usamos o mtodo drawImage():

Para exibir cada uma das clulas no canvas. Iremos tambm

atualizar o valor do frameIndex:

Assim exibindo cada um dos quadrantes da animao.

Criando um level com imagens mapeadas
Nesta unidade vamos criar um fundo do jogo utilizando os conceitos
aprendidos na unidade anterior. Criaremos uma imagem de fundo
do jogo utilizando os conceitos de imagem mapeada.
Iremos utilizar os quadrantes 0, 20 e 21 para definir a imagem de
fundo. O fundo do jogo ser formado por 10 quadrantes de 32px na
sua largura e 10 quadrantes de 32px na sua altura.

Iremos indicar os quadrantes da seguinte forma:

Obtendo o seguinte resultado:

Abra o Notepad++ e crie um arquivo chamadocanvas4.html.

Agora, crie o arquivo canvas4.js, executar uma funo assim que a
janela do browser for carregada.
Agora vamos criar a funo canvasApl(). Digite o cdigo.
Vamos agora criar algumas variveis. Digite o cdigo.
As variveis abaixo, indicaro o total de quadrantes para a largura e
para a altura.

J a varivel Mapa, ir conter as coordenadas dos quadrantes que

sero utilizados:

Observe que utilizamos os mesmos recursos aprendidos no captulo

anterior para preencher o canvas com os quadrantes da
imagemtanks.png.

Canvas Game
Nesta unidade daremos incio ao desenvolvimento de um novo jogo.
Criaremos o jogo com base no documento de jogo abaixo.
Nome do jogo: Tank!

Tema: Jogo para 1 jogador onde o jogador ir controlar um tanque

tendo como objetivo recolher um nmero maior de bandeiras do que
o tanque controlado pelo computador.
Esse jogo poder ser jogado on-line via browser e tambm em
dispositivos mveis Android em forma de aplicativo.
Tanto a verso on-line quanto a verso em forma de aplicativo ter
o seguinte layout:

Controles: Para dificultar o jogo, o jogador apenas poder girar o

tanque em sentido horrio. A cada clique ou toque na rea do jogo
o tanque ir girar 45 em sentido horrio.
Fim de jogo: O jogo ser finalizado quando o jogador ou o
computador recolher o nmero de 10 bandeiras.
Iremos dar incio ao desenvolvimento deste jogo pelo seu layout.
Criando Layout do jogo
Crie uma pasta como o nome de Tank dentro de sua pasta e
descompacte o arquivotank.zip em seu interior. Esse arquivo
encontra-se em /arquivos-cursos/html5.

Observe que uma srie de pastas sero criadas:

Crie um novo arquivo HTML no Notepad.

Salve este arquivo com o nome de index.htmldentro da pasta tank.
Agora, crie um novo arquivo vazio e salve-o dentro da
pasta css com o nome de:estilos.css.
Vamos iniciar o cdigo CSS do jogo indicando o arquivo de fonte
que ser utilizado no ttulo do jogo. Iremos utilizar o
arquivo BRAESIDE.ttf salvo na pasta fonte.
Vamos agora indicar a imagem que ser utilizada como fundo.
Digite o cdigo no arquivo CSS.
Para finalizar o cdigo CSS vamos indicar a formatao para
a div #fundo.
Salve as alteraes no arquivo. Execute o arquivo index.html. Veja
que a estrutura do jogo foi criada:

Criando o mapa do jogo

Neste tpico criaremos o arquivo tank.js e inicialmente iremos
construir o mapa do jogo utilizando uma imagem mapeada.
Crie um novo arquivo.
Salve este arquivo com o nome de tank.js na pasta js.
Agora iremos criar um evento que ser executado quando a janela
do browser for carregada.
Na funo canvasApl criaremos o canvas dentro da div #fundo,
alm de criar e atribuir os valores inicias para o desenho do mapa.
Mapas mais complexos
Para a criao de mapas mais complexos voc pode utilizar alguns
programas que facilitam a construo de levels utilizando imagens

mapeadas.
Como
o http://www.mapeditor.org/,
http://tilestudio.sourceforge.net/.

ou

No exemplo do curso, utilizamos o Tile Studio.

Caso no consiga baix-lo pelo site oficial, na pasta /arquivoscursos/html5, temos ele zipado com o nome de ts.zip.

Aps criar o mapa, pode-se obter uma srie de tipos de arquivo

onde e possvel utilizar o mapa gerado:

Carregando os objetos
Agora vamos criar
funo gameLoop().
Agora vamos criar
o mapa no canvas.

funo iniciar(),
a

que

ir

funo desenhaTela que

chamar
ir

exibir

Salvar as alteraes no arquivo tank.js.

Execute o arquivo index.html e visualize o resultado. Observe que
o mapa foi gerado na div#fundo:

Desenhando o primeiro Tanque

Vamos agora criar o cdigo que ir exibir o tanque que ser
controlado pelo jogador no canvas.
Inicialmente vamos criar as variveis que sero utilizadas
pelo tanque1. No inicio do arquivo tank.js:
Observe
que
foram
criadas
duas
variveis
com
valores randmicos entre 0 e 400. Essas duas variveis sero
utilizadas para o posicionamento aleatrio do tanque1 no mapa.
Vamos agora criar a funo desenhaTank1().
A
funo desenhaTank deve
do GameLoop do jogo. Desta
mtodo gameLoop():

ser
forma,

executada
dentro
chame-a dentro do

Salve as alteraes no arquivo tank.js.

Execute o arquivo index.html e veja o resultado.

Observe que cada vez que a pgina atualizada o tanque1 ser

exibido em um local aleatrio do mapa.
Criando a movimentao do Tanque1
A direo da movimentao do tanque1 ser definida pelo jogador
atravs do clique no mapa. Desta forma vamos criar um evento que
ir identificar o clique na rea do mapa do jogo.

O que ser executado na funo eventoClick()?

Criaremos uma varivel com o nome de direcao, que ir conter o
valor inicial de 1. Toda vez que a rea do mapa for clicada, ser

somado uma unidade a esta varivel, at ela receber o valor

mximo 4. Quando o mapa for clicado pela quinta vez o seu valor
ser reiniciado para 1.
Desta maneira esta varivel ir conter a direo que o
tanque1 dever se movimentar.

Vamos incialmente criar a funoeventoClick().

Agora vamos criar a varivel direcao. Digite-a no comeo do
arquivo.
Agora
para
movimentar
o tanque1,
vamos
criar
a
funo atualizarTanque1, onde criaremos o cdigo que ir
movimentar o tanque1 de acordo com o valor da varivel direcao.
Alm de indicar a direo que o tanque1 dever se movimentar,
tambm devemos girar a imagem de acordo com a direo da
movimentao.
Salve o arquivo, execute o arquivo index.html e veja o resultado.
Observe que quando o jogador clicar na rea do mapa a
movimentao do tanque ser alterada em sentido horrio.
Limitando a movimentao do Tanque1
Vamos agora limitar a movimentao dotanque1 dentro da rea
do canvas, evitando que o tanque saia da rea de visualizao do
jogador.
Iremos realizar esta operao alterando o valor da varivel
movimentao da seguinte forma:

Desta forma, modifique o cdigo da funoatualizarTanque1().

Salve as alteraes no arquivo tank.js.
Execute a aplicao e observe que caso o tanque chegue nos
limites
do canvas a
sua
movimentao
ser
alterada
automaticamente:
Desenhando o Tanque2 (inimigo)
Para desenhar o tanque2 que ser controlado pelo computador
vamos iniciar criando as variveis necessrias.
Dentro do mtodo canvasApl, digite o cdigo .
Vamos agora criar a funo que ir desenhar o tanque inimigo.
Digite o cdigo para criar uma funo com o nome de
desenhaInimigo().
Agora vamos executar essa funo dentro do GameLoop do jogo.
Salve
as
alteraes
no
arquivo tank.js.
Execute
o
arquivo index.html e veja o resultado. Observe que o tanque
inimigo ser exibido em um local aleatrio toda vez que a pgina for
atualizada.

Agora vamos criar a funo que ir exibir abandeira em uma

posio aleatria no mapa.
Desenhando a bandeira
Inicialmente vamos criar as variveis necessrias para a criao da
bandeira.
Dentro do mtodo canvasApl, digite o cdigo.
Vamos agora criar uma funo com o nome
desenhaBandeira() que ir exibir a bandeira no canvas.

de

Digite o cdigo para criar a funo.

Agora vamos executar essa funo dentro do Game Loop do jogo.
Salve
as
alteraes
no
arquivo tank.js.
Execute
o
arquivo index.html e veja o resultado. Observe que a bandeira ser
exibida em um local aleatrio toda vez que a pgina for atualizada.

Inteligncia Artificial
Inteligncia Artificial, ou simplesmente IA, o que controla e
orienta oponentes computadorizados para proporcionar desafios ao
jogador.
Nesta unidade iremos criar a inteligncia artificial que ir controlar o
tanque inimigo. Ser uma IA rudimentar que apenas ir fazer com
que o tanque inimigo chegue de uma forma que seja o mais rpido
possvel onde est a bandeira. Iremos criar esse comportamento
fazendo um comparativo dos valores de x e y do tanque2 com os
valores de x e y da bandeira, fazendo com que otanque2 se
movimente at o local da bandeira.
Para isso, vamos criar o mtodo atualizarInimigo().
Observe que caso o valor da posio x dotanque2 for maior que a
posio x da bandeira, o valor de x do tanque2 ser subtrado,
fazendo
com
que
o tanque2 fique
na
mesma
posio x da bandeira.

Caso o valor de y do tanque2 for menor que o valor

de y da bandeira, o valor de y dotanque2 ser somado, fazendo
que fique na mesma posio y da bandeira, e assim por diante.

Vamos chamar essa funo no game loop.

Salve as alteraes no arquivo tank.js.
Execute o arquivo index.html e veja o resultado. Observe que
o tanque inimigo ir se movimentar automaticamente at a posio
da bandeira:
Detectando colises da bandeira com o tanque inimigo
Neste tpico vamos detectar a coliso do tanque inimigo com
a bandeira, fazendo com que a bandeira seja reposicionada em um
novo local.
Para
isso,
vamos
criar
um
chamado detectandoColisaoBandeira().

novo

mtodo

Como o tanque2 movimentado 1 unidade cada vez dentro do

eixo x e do eixo y, podemos comparar se o valor de x e y dele o
mesmo valor de x e y da bandeira, detectando assim a coliso.

Agora vamos chamar esse mtodo dentro do game loop.

Salve as alteraes no arquivo tank.js.
Execute o arquivo index.html e veja o resultado. Observe que
a bandeira ser exibida em uma nova posio quando o tanque
inimigo entrar em coliso com ela.
Detectando colises da bandeira com o tanque 1
Para o tanque1, no podemos utilizar o mesmo sistema de coliso
que usamos com o tanque inimigo, pois o tanque1 no se

movimenta 1 unidade cada vez nos eixos x e y e sim 2unidades,

desta forma os valores de x e y do tanque1nunca sero iguais aos
valores x e y da bandeira.
Para detectar a coliso iremos fazer um comparativo de
x e y do tanque1 somados a sua largura e altura (32 pixels) com
os valores de x e y da bandeira. Para que a rea de coliso seja
mais prxima da imagem da bandeira iremos somar apenas 16
unidades na comparao ao invs de 32 unidades.
Desta forma, o nosso mtodo de coliso ser modificado.
Salve as alteraes no arquivo tank.js.
Execute o arquivo index.html e veja o resultado. Observe que
a bandeira ser exibida em uma nova posio quando
otanque1 entrar em coliso com ela.

Pontuao e comportamento de fim de jogo

Para exibir a pontuao no canvas vamos criar uma nova funo
com o nome de desenhaTexto():
Vamos criar as variveis pontosjog e pontoscomp:
Agora vamos somar a varivel pontosjog toda vez que
o tanque1 entrar em coliso com abandeira e somar a
varivel pontoscomp toda vez que o tanque inimigo entrar em
coliso com a bandeira. Desta forma, vamos modificar o mtodo
dectandoColisaoBandeira().
V amos agora criar uma funo com o nome de gameOver() que ir
detectar
o
fim
do
jogo.
Quando
o jogador1 ou
o computador atingir10 pontos ser o vencedor.
Digite os comandos para criar a funo gameOver():
Insira agora a funo gameOver e
do game loop do jogo.

desenhaTexto dentro

Salve
as
alteraes
no
arquivo tank.js.
Execute
o
arquivo index.html e veja o resultado. Que uma mensagem ser
exibida quando o primeiro jogador atingir 10 pontos, em seguida, o
jogo ser reiniciado.

Executando sons
Inicialmente
vamos
indicar
< audio > os arquivos que
cdigo JavaScript.
Desta
forma,
arquivo index.html
logo
< body >:

pelo
elemento
sero executados pelo
digite
o
cdigo
no
aps
a tag

No arquivo tank.js inicialmente vamos as variveis que iro

manipular os sons:
E dentro do mtodo canvasApl, vamos vincul-las aos elementos
da pgina.

No caso, da varivel som, ela executar o som, sempre que houver

uma coliso com abandeira, por isso, vamos modificar o mtodo de
coliso e dentro dos ifs executar o som.
E para a msica de fundo, vamos parar a sua execuo, quando um
jogador ganhar o jogo. Portanto, altere a funo gameOver().
Salve as alteraes.
Execute o arquivo index.html e verifique o resultado. Observe que
agora um som de fundo executado, e toda vez que uma coliso
com a bandeira encontrada, outro som tambm executado.
Convertendo o jogo em um aplicativo para dispositivo mvel
Este jogo caso ele esteja hospedado em um servidor na internet ele
pode ser executado em qualquer dispositivo mvel (desde que
tenha resoluo suficiente para exibir o jogo) via browser.
Outra possibilidade criar um aplicativo que ser instalado no
dispositivo
mvel
e
o
jogo
poder
ser
executado
independentemente de uma conexo com a internet. Nesta unidade
vamos gerar um aplicativo mvel utilizando o PhoneGap.
O PhoneGap
um framework de
desenvolvimento
mvel
produzido pela empresa Nitobi, comprada recentemente Adobe
Systems. O PhoneGap converte em aplicativos nativo para iPad
(iOS), Android,Windows 8 entre outros, arquivos criados em
JavaScript, HTML5 e CSS3. Desta forma um mesmo projeto pode
ser distribudo para diversos sistemas operacionais utilizando
apenas uma fonte de cdigo.
Antes de convertermos o jogo em aplicativo mvel, devemos criar
um arquivo XML que ter todas as informaes sobre o aplicativo,
como verso, cone a ser utilizado, propriedade do aplicativo, etc.
Inicie o NotePad e crie um novo arquivo. Salve este arquivo na
pasta tank com o nome de config.xml.
Observe que foram indicados o nome do aplicativo pela tag < name
>, o caminho do cone que ser utilizado pelo aplicativo pela tag <

icon > entre outras especificaes. Entre elas a execuo do

aplicativo em tela cheia indicada pela linha de comando:

Pressione [CTRL+S] para salvar o arquivo. Vamos agora

compactar todos os arquivos utilizados no jogo em um arquivo
do ZIP (no utilize o formato RAR) para que seja gerado o
aplicativo pelo PhoneGap.
Selecione todos os arquivos da pasta tank e os compacte em um
arquivo com o nome detank.zip como indicado na imagem abaixo:

Vamos
agora
utilizar
http://www.phonegap.com/.

o PhoneGap.

Desa a barra de rolagem e clique em "Try Now":

No link

Para
utilizar
o PhoneGap
necessrio
uma
conta
na Adobe chamada de Adobe ID ou se registrar no Gtihub. Neste
exemplo iremos utilizar o Adobe ID.
Clique no boto ...with Adobe ID:

Caso voc no tenha um registro da Adobe, d um clique no

boto Create an Adobe ID:

Observe que um formulrio de registro ser exibido. Preencha este

formulrio com os seus dados e clique no boto Create.
Para ter acesso a verso em Portugus deste formulrio acesse o
link:https://www.adobe.com/cfusion/member
ship/index.cfm?loc=pt_br&nl=1.
Abra o PhoneGAp utilizando o Adobe ID. Observe que a seguinte
tela ser exibida:

D um clique no boto Upload a .zip file. Selecione o

arquivo tank.zip criado anteriormente. Observe que as informaes
indicadas no arquivo config.xml sero exibidas:

D um clique o boto Ready to build:

Aguarde os aplicativos serem gerados. Para desenvolver aplicativos

para iOS (iPad, iPhone etc.) necessrio possuir um nmero de
certificao de desenvolvedor fornecido pela Apple, por isso neste
exemplo o aplicativo iOS no ser gerado.
D um clique sobre o cone do sistema operacional Android:

Observe que o arquivo .apk poder ser baixado:

possvel tambm baixar o aplicativo diretamente no dispositivo

mvel
utilizando QR
Code gerado
automaticamente
pelo
PhoneGap.
Veja nas imagens abaixo o jogo instalado como aplicativo e sendo
executado em um Table Nexus 7 (Android 4):

Em execuo no Tablet: