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 so as fases de

desenvolvimento de um jogo.

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 partir

desta URL:https://tools.google.com/dlpage/chromesxs/

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/pt-
BR/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 resultado do cdigo ser apresentado

no browser padro.

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 font-

size 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 aps visualize-o no

seu browser. Visualizao do arquivo:

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 criar a div que ser alterada pelo

cdigo JavaScript.

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 pelo
nome objeto1 para verde.

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 disponvel

dojQuery: http://code.jquery.com/jquery.min.js

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 funo ocultar(). Digite o

cdigo abaixo entre as tags < script > e
< /script >:

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 o

comando [CTRL+S] para salvar as alteraes no arquivo.

Salve este arquivo com o nome de pong.htmldentro da

pasta jogo1, que se encontra dentro de sua pasta.
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 dentro da pasta js com o nome

de pong_mouse.js.

Vamos agora vincular o arquivo pong_mouse.jsao

arquivo pong.html.

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 ao

arquivo pong_mouse.js e substitua pelo arquivo pong.js:

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 chegar no limite vertical

da div fundo ir mudar de direo.

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 essas variveis da

funo moveBatedores():

Remova tambm a referncia da varivelpaddle1 na parte de

deteco de coliso:

Agora, no escorpo global do arquivo, inicializaremos as

variveis paddle1 epaddle2. Logo abaixo
do array jogo.asteroideacrescente:

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 pontuar quando o propriedade

x da div asteroide for menor que a largura do fundo do
jogo (menor que 0).

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 o

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 bsica de um

cdigo HTML com o elemento canvas.

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/, ou o
http://tilestudio.sourceforge.net/.

No exemplo do curso, utilizamos o Tile Studio.

Caso no consiga baix-lo pelo site oficial, na pasta /arquivos-

cursos/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 a funo iniciar(), que ir chamar a

funo gameLoop().

Agora vamos criar a funo desenhaTela que ir exibir

o mapa no canvas.

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 ser executada dentro

do GameLoop do jogo. Desta forma, chame-a dentro do
mtodo gameLoop():
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 de

desenhaBandeira() que ir exibir a bandeira no canvas.

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 novo mtodo

chamado detectandoColisaoBandeira().

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 a desenhaTexto dentro

do game loop do jogo.
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 pelo elemento

< audio > os arquivos que sero executados pelo
cdigo JavaScript. Desta forma, digite o cdigo no
arquivo index.html logo aps a tag
< body >:

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 o PhoneGap. No link

http://www.phonegap.com/.

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

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: