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".
so
as
fases
de
partir
HTML5 - Marcao.
CSS - Formatao.
JavaScript - Comportamento.
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:
O Doctype
O Doctype deve ser sempre a primeira linha de cdigo do
documento antes da tag HTML:
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
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
criar
a div que
ser
alterada
pelo
pelo
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
funo ocultar().
Digite
as tags <
script
>
o
e
Jogador 2:
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.
da
Vamos
agora
arquivo pong.html.
dentro
vincular
da
pasta js com
nome
arquivo pong_mouse.jsao
ao
chegar
no
limite
vertical
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:
essas
variveis
da
arquivo, inicializaremos as
Logo
abaixo
pontuar
quando
o
propriedade
menor que a largura do fundo do
Altere o if:
Autoplay: a
propriedade autoplay indica
que
arquivomusica.mp3 deve ser executado automaticamente.
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:
Desenhando um retngulo
Vamos substituir o cdigo que criou a linha por um cdigo que
criar um retngulo.
Em execuo:
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.
bsica
de
um
A cor da fonte:
O seu posicionamento:
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!
mapeadas.
Como
o http://www.mapeditor.org/,
http://tilestudio.sourceforge.net/.
ou
Carregando os objetos
Agora vamos criar
funo gameLoop().
Agora vamos criar
o mapa no canvas.
funo iniciar(),
a
que
ir
chamar
ir
exibir
ser
forma,
executada
dentro
chame-a dentro do
de
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.
novo
mtodo
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
Vamos
agora
utilizar
http://www.phonegap.com/.
o PhoneGap.
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:
Em execuo no Tablet: