Correção dos Emails
Rayner Gomes Sousa - raynergomes@hotmail.com
Univesidade Federal do Piauí
Campus Senador Helvídio Nunes Barros
Sistemas de Informação
Ana Maria Koch - anamariakoch@yahoo.com.br
Universidade Federal do Piauí
Campus Senador Helvídio Nunes Barros
Curso de História
Princípio do Desenvolvimento de Jogos com HTML5
Autor 1*1
Autor 2 *2
Instituição 1
Instituição 2
Figura 1: Exemplos com uso do recurso de Canvas do HTML5.
Resumo
Este artigo descreve a fase inicial do estudo e avaliação da linguagem HTML versão 5 como plataforma de desenvolvimento de jogos pela Internet. Inicialmente o Grupo de Pesquisa Rede com Literatura e História (RELIH) fundamentou-se no desenvolvimento de jogos com a tecnologia proprietária Adobe Flash, porém esta tecnologia impõe um custo financeiro não atrativio para o Grupo de Pesquisa. O HTML5 é a versão mais recente do HTML e já suportadado pela grande maioria dos novos navedadores Web, porém suas pontecialidades precisam ser assimiladas e dominadas resultando assim no foco deste trabalho.
Palavras Chaves: Desenvolvimento de jogos,
HTML5, Internet.
Contato dos Autores:
1: autor 1@email.com 2: autor 2@email.com
1. Introdução
A atividade de elaboração de jogos recreativos em interface digital proposta e em andamento no Projeto
História em jogos: Brasil colônia, com participação
de dois bolsistas PIBIC/CNPq (Cf. Edital UFPI 2009/2010) tem um resultado importante obtido em 9 meses. O trabalho conjunto de um Estudante de História e um de Sistemas de informação iniciou com o estudo dos respectivos conteúdos: Brasil colonial:
expansão portuguesa 1100/1550; e programas Adobe Flash Pro CS4, Photoshop CS4 e Fireworks (para
melhoramento de imagens), ActionScript 2.0 (para desenvolvimento de games e linguagem de programação). O desenho dos jogos foi definido pela organização em séries (mapas do mundo medieval; monstros marinhos; reis/território português; instrumentos de navegação; embarcações, navegadores, fortes portugueses, especiarias e rotas
(Marco Pólo, B. Dias, F. Magalhães), indígenas no território brasileiro, capitanias, primeira ocupação de
fato, mapas do Brasil e América do período.
O produto computacional gerado pelo projeto História em jogos é um conjunto de programas utilizados na atividade de recreação, para o usuário final o interesse maior é no entretenimento, porém a forma de como os jogos é criada pode provar frustrações inesperadas. Um problema conhecido é o fato do computador do usuário não possuir os softwares necessários para a execução dos jogos. Apesar destes problemas podem ocorrer a sua dimensão é indeterminada, vários fatores sociais e econômicos levam a um perfil de configuração do computador diferente, imaginar a priori se um usuário terá os recursos computacionais essenciais é um problema que pode aniquilar a qualidade dos jogos recreativos.
Como os jogos desenvolvidos pelo projeto História em jogos: Brasil colônia utiliza como ambiente de execução os Navegadores para World
Wide Web (Web), os mesmos foram desenvolvidos
baseados na tecnologia Flash produzida pela empresa Adobe. O uso desta tecnologia apesar de ser livre os Ambientes de Desenvolvimento Integrado (Integrated
Development Enviromment - IDEs) e os programas de
compilação (geradores de código executável para a máquina), utilizados do lado do produtor de jogos são pagos, onerando a programação e consequentemente dificultando a criação dos jogos. Do lado do cliente a visualização dos jogos em Flash necessita do plugin no navegador, a instalação deste plugin é dificultada pelos seguintes pontos: (i) a maioria dos navegadores não vem com o plugin do Flash instalado devido às imposições das leis comerciais; (ii) o usuário pode não ter permissões na máquina para a instalação do plugin; (iii) a instalação do plugin pela Internet pode consumir muito tempo irritando o usuário. Do lado dos desenvolvedores o preço na compra das ferramentas de
desenvolvimento pode ser um impedimento. O grupo de trabalho do Projeto Historia em jogos: Brasil colônia, vinculado ao Laboratório de Historia em interface digital (LHID) e ao Grupo de Pesquisa Rede com Literatura e Historia (RELIH) projeta que os jogos de educacionais criados possam ser usados em Tabblets e jogos feito em Flash não são atrativos para estas novas gerações de computadores ultra-portateis por consumirem muita bateria.
Por fim, a procura e/ou a criação de novas tecnologias livres para a construção de jogos recreativos a ser editados na rede mundial de computadores se torna um objetivo atraente tanto pela atividade intelectual e acadêmica envolvida no processo quanto pela solução da questão de obediência a legislação brasileira.
Este trabalho consiste em estudar a linguagem de marcação Hypertext Markup Text Language versão
5 (HTML5), constituída para criação de páginas na
rede mundial de computadores com o recurso a animação gráfica integrado. Essa forma de programação tem como ponto importante o favorecimento da interatividade quando do acesso a páginas que apresentam esses recursos.
2. Trabalhos Relacionados
A Internet nasceu em 1969 dentro dos laboratórios da ARPA (Advanced Research Projects Agency), no início tinha o objetivo de ser uma rede de alta disponibilidade. Porém atualmente a Internet possui uma conotação mais próxima de um subproduto proveniente dela a Web. A Web é uma sub-arquitetura da Internet formada principalmente pelo protocolo HTTP (HyperText Transfer Protocol ) e a linguagem de marcação HTML. O HTML nasceu em 1991 no CERN (European Council for Nuclear Research), na suíça. Seu criador, o inglês Tim Berners-Lee, 44 anos, a concebeu unicamente como uma linguagem que serviria para interligar computadores do laboratório e outras instituições de pesquisa e exibir documentos científicos de forma simples e fácil de acessar [Tanembaum 2003].
Esta forma fácil de visualizar e trocar documentos é a razão do grande sucesso da Internet, e este ambiente é chamado simplemente de Web. A linguagem de marcação HTML evoluiu desde sua criação, passando por várias versões até chegar na versão 5. Durante sua evolução foi agromerando novas tecnlogias como o CSS, XML e incorporação do JavaScript.
Segundo Ed. Aurelio [Ed. Aurelio 2006] Evolução do HTML cosistiu nas principais fases:
• 1992 - Primeira aparição do HTML;
• 1993 - HTML+: Algumas definições da aparência, tabelas, formulários;
• 1994 - HTML 2.0: Padronização para os características principais;
• 1994 - HTML 3.0: Uma extensão do HTML+ entendido como um rascunho de padrão;
• 1995 - HTML 3.2: Netscape e Internet Explorer definem seus próprios padrões baseados nas implementações correntes;
• 1995 - JavaScript: criada por Brendan Eich da Netscape como uma extensão do HTML para o browser Navigator v2.0. JavaScript é uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados através de eventos dinâmicos que faltavam ao HTML;
• 1996 - CSS1: Em dezembro deste ano é apresentada pela primeira vez a Folha de Estilo, criada para complementar a linguagem HTML. Possuía uma formatação simples e cerca de 60 propriedades;
• 1997 - HTML 4.0: São lançados os browsers Netscape v4.0 (agosto) e Internet Explorer v4.0 (outubro) que apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinâmico. Surge então o DHTML;
• 1998 - CSS2: Em maio é lançado a segunda versão da Folha de Estilo que, além de incluir todas as propriedades do CSS1 ainda apresenta por volta de 70 novas propriedades;
• 1999 - HTML 4.01: Alguma modificações da versão anterior;
• 2000 - XHTML 1.0: É criado e consiste de uma versão XML do HTML v4.01
A evolução do HTML é fomentada pela constante necessidade da industria, comércio em recursos tecnológicos que permitam criar páginas Web cada vez mais leves, fáceis de ser construídas, com grande possibilidade de integração com o usuário, mecanismos que permitam usar menos tráfego de rede, processador e memória sem perder qualidade visual e interoperabilidade. Para os usuários a evolução do HTML deve possibilitar a criação de sites cada vez mais ricos em componentes audio-visual e com uma excelente usabalidade [W3C 2010a].
O HTML5 [W3C 2010b] surge com vários novos recursos, entre eles, e neste trabalho destaca-se o elemento Canvas. Através do Canvas há possibilidade
de criar elementos gráficos geométricos e ainda manipulalos através do JavaScript, podendo surgir jogos interativos como mostra os trabalhos a seguir.
1.
Web Mega Pong: O jogador deve vencer a máquina defendendo todas as bolas que vierem em sua direção. Com a tecla Ctrl, o internauta pode fazer com que sua plataforma dê um pequeno impulso, aumentando a velocidade e o tamanho da bolinha. Quanto maior a bolinha, maior a energia que o jogador perde caso ela não seja rebatida. Perde o jogo aquele que ficar sem energiaprimeiro. Mais detalhes em
http://info.abril.com.br/downloads/webware/w eb-mega-pong.
Figura 02: Web Pong
2. Crystal Galaxy: Com um belo visual, o game possui um único e simples comando para movimentar a nave: o mouse. Seja para se movimentar ou para atirar, o usuário deve usar unicamente seu mouse. O Crystal Galaxy possui dois modos de jogos. O primeiro é um modo arcade, o internauta deve ir percorrendo a fase, destruindo inimigos e abrindo caminho. O outro modo é de sobrevivência, onde a nave não navega por muito espaço e deve resistir aos inimigos pelo máximo de tempo possível. Disponível em: http://info.abril.com.br/downloads/webware/c rystal-galaxy
Figura 03: Crystal Galaxy
3. O HTML5 Pacman é uma reprodução do clássico jogo Pacman. Com o HTML5 ganhando cada vez mais corpo pela web, não poderia faltar o bonequinho amarelo passeando pela tela no PC com este tipo de codificação. O jogo funciona exatamente como toda versão do Pacman. Setinhas para controlar a direção enquanto foge dos fantasmas, a bolinha maior permite que o internauta coma seus inimigos e a fase termina quando todos pontos forem coletados. A única novidade, portanto, é a codificação
em HTML5
(htttp://info.abril.com.br/downloads/webware/ crystal-galaxy).
Figure 04: HTML5 PacMan
Um jogo em HTML 5 que mais chamou a atenção da comunidade é o Quake 2 (disponívem em: ). Este jogo é um clássico do Jogos em primeira pessoa muito jogado na década de 90. Pela qualidade das imagens geradas e pelo bom tempo de resposta obtido de um jogo que exige muito processamento animou vários desenvolvedores de jogos para o HTML5 (http://code.google.com/p/quake2-gwt-port).
3. Desenvolviemento de Jogos com
HTML5
3.1 Ambiente de Programação
O ambiente de programação consiste de todos os componentes necessários que possibilite a edição do código até o estágio final que é o produto utilizado, neste caso o programa de computador. Geralmente faz parte do ambiente de programação o compilador, o editor de código e as ferramentas de teste e visualição do código.
A compilação é o processo de transformar o código fonte em um código mais próximo do software responsável pela interpretação do mesmo. No caso do HTML5 não há diferenças das versões anteriores, ou seja, o código é interpretado diretamente pelo navegador Web, a consequencia é manter a tradicional portabilidade do código, escrito uma única vez este será executado em diferentes combinações de
hardwares, sistemas operacionais e navegadores.
Existem diversos editores de código para o HTML5. O código pode ser feito no mais simples dos editores de texto, entre eles: notepad no Windows ou vim, emacs, gedit no Linux. Os ambientes mais avançados encontrados na categoria de IDEs (Integrated Development Enviroment - Ambiente Integrado de Desenvolvimento) são :
• Eclipse;
• Netbeans versão 7.0 beta;
• Aptana Studio versão 3.
Todos as IDEs citadas acima são encontradas para o Windows ou Linux.
Para a visualização do produto é utilizado os navegadores web. Há dezenas de navegadores disponíveis e gratuítos na Internet entre eles:
• Firefox versão 4;
• Internet Explorer versão;
• Chrome.
4. Ambiente de Programação
4.1 Hardware e Software
O trabalho é desenvolvido utlizado-se de máquinas cujo hardware é classificado como de uso pessoal, as especificações são:
Processador Intel Core I3 Memória 4GB DDR3 1033Mhz Placa de Vídeo Integrada o processador
HD 520GB
Som Intel Corporation 5 Series/3400 Series Chipset High Definition
Tabela 01: Configuração de Hardware
O sistema operacional utlizado é o Linux Ubuntu 10.10 e o navegador web é o Chrome 10.0.648.205. Destaca-se aqui a utilização de Softwares Livres (sem custo de aquisição) afim de evitar a honeração do projeto uma vez que há recursos limitados para sua manutenção.
Merece muita atenção o navegador Chrome pelo recurso "Ferramenta para Desenvolvedor". Através desta ferramenta é possível fazer o execução passo a passo do código interpretado facilitando e muito a descoberta de erros. Alem disto, é possível visualizar a saída de avisos ou erros que geralmente é difícil de visualizar no navegador web padrão.
Figura 06: Ferramenta para Desenvolvedor
4.2 Software de Desenvolvimento
O início da aprendizagem de uma nova linguagem é importante que o desenvolvedor se familiarize com as palavras reservadas e sintaxe da linguagem. Sendo assim, nesta primeira fase priorizou-se o uso de simples editores de textos para codificação. O escolhido pela simplicidade e por ser disponível e já pré-instalado no Ubuntu 10.10 é o Gedit.
Figura 07: Editor de Texto
5. Testes
5.1 Passos para o Desenvolvimento
Após a preparação do Ambiente de Programação (seção 4), o desenvolvimento de um jogo parte do princípio do domínio da lógica de computadores e de algoritmos, a partir deste ponto o conhecimento da linguagem é fundamental. HTML 5 traz consigo todas as características das versões anteriores, ou seja, o conhecimento prévio do HTML 4 é aproveitado.
Os novos elementos do HTML 5, entre eles o Canvas que é o ponto central deste trabalho é manipulado através da linguagem JavaScript. O primeiro passo então na criação de jogos em HTML5 é o conhecimento básico do JavaScript, especificamente o domínio dos comandos de repetição, seleção e operações básicas de relação e matemáticas entre os objetos.
A codificação inicia-se apartir de um arquivo texto simples salvo com a extenão html ou htm. O código abaixo, descreve este arquivo.
<!doctype html> <html>
<head>
<meta charset="UTF-8">
<title> Primeiro Exemplo </title> </head>
<body>
<p>Examplo de Parágrafo</p> </body>
</html>
A única diferença em relação as versões anteriores e a primeira linha. o Doctype apenas diz ao navegador para renderizar segundo o novo padrão. Porém esta linha é facultativa, sua exclusão não impossibilita a inclusão dos novos elementos do HTML5.
5.2 Criação de Elementos Gráficos
Este trabalho, através dos exemplos abaixo, mostra a manipulação do Elemento Canvas incluído no HTML5. Este elemento permite a criação de qualquer desenho dentro de uma página em HTML5. Antes deste poderoso recursos a inclusão de desenhos dar-se-á por meio da tag IMG (tag imagem), porém este meio permite a inclusão de imagens pré-criadas e estáticas.
Exemplo da inclusão de um Objeto Canvas: <body>
<canvas id="canvas" width="400" height="300"> Lamento, mas seu Navegador não suporta 5:HTML5 Canvas.
</canvas>
O código acima foi extraído de uma página em HTML5. Dentro da Tag <BODY> é incluído o elemento Canvas. Sua inclusão é como qualquer outro elemento HTML. Dentro da Tag Canvas há 3 parâmetros importantes:
1. ID: O Nome pelo qual o objeto será identificado e acessado dentro do código; 2. Width: O tamanho do componente; 3. Height: A algura do componente.
Pode-se ter quantos objetos canvas for desejado, porém o ID de cada um deverá ser diferente. O parâmetro Widht e Height está associado com as dimensões 2D do componenente, neste exemplo os valores do Width e Height são em pixels.
5.3. Criação Visual de Elementos Gráficos
Os principais elementos gráficos são retângulos, círculos e retas. O código abaixo mostra a criação de um retângulo (Figura 08). <html> <head> <title> </title> <script> function draw(){ var ctx = document.getElementById('canvas'). getContext('2d'); ctx.lineWidth = 5; ctx.strokeStyle = "rgb(255,0,0)"; ctx.fillStyle = "rgb(0,0,255)"; ctx.fillRect(5,5,300,100); ctx.strokeRect(5,5,300,100); } </script></head> <body onLoad="draw()">
<canvas id="canvas" width="400" height="300"> Seu Navegador não suporta HTML5.
</canvas> </body> </html>
O código acima mostra um exemplo de como desenhar usando comandos do HTML5 um retângulo. O retângulo tem os seguintes aspectos visuais: a. fundo azul; b. borda vermelha; c. largura 300px e d. algura de 100px.
Os passos abaixo mostram como o desenho é criado pelo navegador:
1. A página é carregada pelo navegador e está sem nenhum desenho;
2. O objeto canvas é criado caso o navegador tenha suporte ao HTML5 senão a mensagem "Seu Navegador não suporta HTML 5" é apresentada;
3.
A função draw é chamada e inicia o desenho do retângulo;4.
O comando getContext retorna uma referência ao elemento "canvas";5. O comando lineWidth especifica a lagura da linha de borda do retângulo;
6. O comando strokeStyle especifica a cor da linha do retângulo;
7. O comando fillRec de fato desenha um retangulo segundo os valores do parâmetro;
8. O comando fillStroke de fato desenha o contorno do retângulo segundo os valores passado por parâmetro.
Figura 08: Retangulo em HTML5
O HTML5 tem vários comandos, que podem ser usados como descrito no exemplo acima para criar as figuras geométicas. Abaixo apresenta-se um trecho para criar um semi-circulo.
1.function draw(){ 2.var ctx =. document.getElementById ('canvas').getContext('2d'); 3. ctx.lineWidth = 5; 4. ctx.strokeStyle = "rgb(255,0,0)"; 5. ctx.fillStyle = "rgb(0,0,255)"; 6. ctx.beginPath();
7. ctx.arc(200, 200,30,0 ,Math.PI, false); 8. ctx.closePath();
9. ctx.fill(); 10 ctx.stroke(); 11. }
O código acima é uma modificação da função
draw. Neste exemplo as linhas foram enumeradas de 1
até 14, estes números não pertecem ao arquivo fonte apenas foram incluídas para facilitar a explicação. A funcionalidade das linhas são:
• linha 02: obtem a referência do objeto canvas;
• linha 03: define a espessura da borda;
• linha 04: define a cor do contorno;
• linha 05: define a cor do fundo;
• linha 06: inicia o desenho;
• linha 07: cria um círculo no ponto x igual a 200, ponto y igual a 200, com ângulo de 2 PI radiandos, e é desenhando da esquerda para direita.
Abaixo, na Figura 09, há a representação gráfica no navegador do código descrito acima.
Figura 09: Desenho de um semi-circulo
5.4 Manipulação dos Elementos Gráficos pelo Teclado
Uma vez desenhado os elementos gráficos como o retângulo ou círculo (seção 5.3), no desenvolvimento de um jogo, existe a necessidade de mexe-los pela janela gráfica. Basicamente existe duas maneiras de interagir com o objeto gráfico e fazê-lo se locomover pela janela, uma é através do teclado e a outra é através do mouse.
A locomoção de um objeto gráfico é produzido através do redesenho do elemento numa posição diferete. Trabalhando com jogos 2D a locomoção ocorre pela diferença de um dos dois eixos, o Y ordenada e o X absiça.
O código abaixo mostra o código em HTML5 para uma página ler do teclado as teclas direita, esquerda, abaixo e acima. Após uma destas teclas ser pressionadas um círculo é desenhado na janela. Inicialmente a posição de x é 0 e de y é 0. Se a tecla esquerda for pressionada o x é decrementado em uma unidade, se a tecla direita for pressionada o x é incrementado em uma unidade, se a tecla acima for pressionada o y é decrementado em uma unidade; e por fim, se a tecla abaixo for precionada o y é incrementnado. A Figura 10 mostra a associação.
Figura 10: Teclas usadas para manipulação <html> <head> <script> function bolinhas(evento) { switch (evento.which) { case 37: drawCicleRed(); break case 39: drawCicleBlue();
break case 38: drawCicleYellow(); break } } function inicializar() { document.getElementById("body"). onkeydown = function(evento){ bolinhas(evento); } } function drawCicleRed(){ var ctx = document.getElementById("tela"). getContext("2d"); ctx.beginPath(); ctx.fillStyle = "red"; ctx.strokeStyle = "red"; ctx.arc(Math.floor(800*Math.random()), Math.floor(600 * Math.random()), 10, 2 * Math.PI, false); ctx.closePath(); ctx.stroke(); ctx.fill(); } function drawCicleBlue(){ var ctx = document.getElementById("tela"). getContext("2d"); ctx.beginPath(); ctx.fillStyle = "blue"; ctx.strokeStyle = "blue"; ctx.arc(Math.floor(800*Math.random()), Math.floor(600 * Math.random()), 10, 2 * Math.PI, false); ctx.closePath(); ctx.stroke(); ctx.fill(); } function drawCicleYellow(){ var ctx = document.getElementById("tela"). getContext("2d"); ctx.beginPath(); ctx.fillStyle = "yellow"; ctx.strokeStyle = "yellow"; ctx.arc(Math.floor(800 * Math.random()), Math.floor(600 * Math.random()), 10, 2 * Math.PI, false); ctx.closePath(); ctx.stroke(); ctx.fill(); } </script></head>
<body id="body" onLoad="inicializar()"> <p>
Click nas setas do teclado para aleatoriamente aparecer bolas na tela.
</p>
<canvas id="tela" width="800" height="600"> Lamento seu Navegador nao suporta HTML5 </canvas>
</body> </html>
O ponto fundamental no código acima é o trecho: function inicializar() { document.getElementById("body"). onkeydown = function(evento){ bolinhas(evento); } }
O trecho acima associa ao evento onkeydown que representa o ato de precionar uma tecla a função
bolinhas(evento). A função bolinhas seleciona qual cor
da bolinha a ser desenhada através do valor evento que é passado por parâmetro. Se o valor for 37 então é chamado a função drawCicleRed (desenha um circulo vermelho), se o valor for 39 a função drawCicleBlue é chamada (desenha um círculo azul) e por fim, se o valor for 38 a função drawCicleYellow é chamada (desenha um circulo amarelo). Nota-se que para cada tecla há um valor inteiro associado.
Figura 11: Manipulação através do Teclado
5.5 Manipulação dos Elementos Gráficos pelo Mouse
Durante a fase inicial do projeto de desenvolvimento de jogos com HTML5 procurou-se outra maneira de interagir com o usuário, uma forma natural além do teclado é através do mouse.
A princípio os eventos do mouse manipulados são:
• captura dos valores do eixo x e eixo y (localização cartesiana do mouse);
• pressionamento do botão: direito, esquerdo ou do meio;
• soltura de um dos botões precionados.
Para demostrar a manipulação dos eventos do mouse o código abaixo é apresentado:
<html> <head> <script> var mx,my; var down=0; function drawball(){ var ctx = document.getElementById("tela"). getContext("2d"); ctx.beginPath(); ctx.fillStyle = "rgb("+Math.floor(255 * Math.random())+","+ Math.floor(255 * Math.random()) +","+ Math.floor(255 * Math.random()) +")"; ctx.strokeStyle = "rgb("+Math.floor(255 * Math.random())+","+ Math.floor(255 *
Math.random()) +","+ Math.floor(255 * Math.random()) +")";
ctx.arc( mx, my, 10, 2 * Math.PI, false); ctx.closePath(); ctx.stroke(); ctx.fill(); } function drawdown(ev){ down=1; } function drawmove(ev){ if ( ev.layerX || ev.layerX==0) { mx= ev.layerX; my = ev.layerY; }
else if (ev.offsetX || ev.offsetX==0 ) { mx = ev.offsetX; my = ev.offsetY; } if (down == 1){ drawball(); } } function drawup(){ down = 0; } function inicializar() {
var canvas1 = document.getElementById("tela"); canvas1.addEventListener("mousedown",drawdown, false); canvas1.addEventListener("mousemove",drawmove, false); canvas1.addEventListener("mouseup",drawup,fals e); } </script></head>
<body id="body" onLoad="inicializar()"> <canvas id="tela" width="800" height="600"> Lamento seu Navegador nao suporta HTML5 </canvas>
</body> </html>
A Figura 12 (abaixo) ilustra a execução do código acima após a interação do usuário com o Mouse. Para realizar este experimento o mouse é colocado em uma posição da janela e enquanto o botão esquerdo é precionado um circulo é desenhando na posição aond o ponteiro do mouse se encontra.
Figura 12: Manipulação através do Mouse
O ponto importante neste código é o segunte trecho:
function inicializar() {
var canvas1 = document.getElementById("tela");
canvas1.addEventListener("mousedown",drawdown, false); canvas1.addEventListener("mousemove",drawmove, false); canvas1.addEventListener("mouseup",drawup,fals e); }
O código acima demostra como associar um evento do mouse a uma função definida no código. O evento mousedown que representa o pressionamento do botão esquerdo é associado a função drawdown. O evento mousemove que representa o movimento do mouse é associado a função drawmove. O evento mouseup que representa o ato de soltar o botão esquerdo precionando é associado a função drawup. As funções drawdown, drawmove e drawup são funções codificadas segundo a lógica de que quando o botão esquerdo estiver pressionado um circulo é desenhado abaixo do ponteiro, movimentando o mouse um círculo seguirá o movimento do mouse.
5.6 Simulação de um oponente
É comum que num jogo o computador simule o oponente, sendo assim, há necessidade de simular o comportamento do oponente através de um código que é executado em segundo plano. O HTML5 tem suporte a multitarefa, portanto, um código pode ser executado várias vezes segundo uma lógica particular do jogo.
O código abaixo mostra como uma função pode ser invocada a cada período de tempo.
function inicializar() { setInterval( function(){ desenha()}
,50) }
Apesar da simplicidade do trecho de código acima ele é muito importante para a construção de jogos com HTML5. A função setInterval permite agendar no navegador que a função desenha() seja chamada a cada 50 milisegundos.
5.7 Lógica do Jogo - Jogo de Dados
Para finalizar a seção de testes é apresentado um código para simular um jogo de Dados, este exemplo agromera a maioria dos códigos explicados nesta seção.
O código abaixo demonstra como inserir um botão que após seu precionamento invoca a função
playdice().
<form id="jogo"
action="javascript:playdice()"> <input type="submit" value="jogar"/> </form>
A função playdice() chama o método random do objeto Math e seleciona aleotoriamente um valor entre 0 e 1. Uma vez selecionando o valor randomico é feita uma operação matemática para retornar os possíveis valores de um dado. O código abaixo mostra estes comandos:
function playdice(){ drawDice();
var numero = 1 + Math.floor(6 * Math.random() ); switch(numero){ case 1:{ draw1(); break; } case 2:{ draw2(); break; } case 3:{ draw3(); break; } case 4:{ draw4(); break; } case 5:{ draw5(); break; } case 6:{ draw6(); break; } }
Outras funções aparecem no código acima, as funções: draw1(), draw2(), draw3(), draw4(), draw5()
e draw6() desenha os lados de um dado,
respectivamente os lados 1,2,3,4,5 e 6. O resultado do código acima é a construção de uma págima como apresentada na Figura 13.
Figura 13: Jogo de Dado
6. Conclusão e Trabalhos Futuros
O Artigo, de forma resumida, apresenta algumas etapas dominadas e avaliadas quanto ao desenvolvimento de jogos em HTML5. Apesar do trabalho ter apenas alguns meses, já é dominado os procedimentos básicos para criação de jogos simples e interativos voltados afinalidade do Grupo de Pesquisa no desenvolvimento de jogos educativos com o conteúdo de História.
Inicialmente, a vantagem da edição de páginas em HTML5 é de não requer a instalação de programas de terceiros para execução dos programas.
Os ambientes de desenvolvimento são diversos e a maioria distribuída livremente. As IDEs utilizadas no desenvolvimento para o Adobe Flash ainda são de uma maturidade maior e com facilidades visuais ainda não alcançadas pelas IDEs encotradas para o desenvolvimento em HTML5. Durante a fase inicial do estudo do HTML5 foi optado por editores de texto simples para facilitar a memorização dos comandos do HTML5.
Os programas em HTML5 são interpretados pelo navegador em tempo real, geralmente este comportamento gera programas mais lentos que os compilados, porém o Quake 2 portado para HTML5 mostra que esta desvantagem não impossibilita a criação de jogos complexos em HTML5 e com boa performance.
Quanto ao suporte ao desenvolvedor, o Navegador Chrome apresentou ferramentas de produtividade eficientes e de suma importância.
O HTML5 surgio com o recurso de manipular imagens e som através de primitivas diretas do processador, assim há um aumento de performance por evitar plugins de terceiros para manipulação de imagem e som.
Os trabalhos futuros consiste na investigação de utilização dos seguintes recursos do HTML5:
• WebSocket: para criar programas com interação dos jogadores via Internet;
• Produção e manipulação de áudio;
• Procurar novas IDEs para aumentar a produtivade do desenvolvimento;
• Estudo do WebGL para criação de gráficos 3D;
• Engines para criação de Jogos.
Agradecimento
Os autores agradecem a Universidade Federal do Piauí pelo apoio na realização deste projeto através da diponibilização de sua infraestrutura física e da rede de dados.
Referências
RELIH, 2010. Disponível em:
<http://www.ufpi.br/relih/wiki/index.php/Página_Princi pal>. Acesso em: 20 abr de 2011.
Andrew. S. Tanenbaum, 2003. Redes de Computadores. Ed. Campus, 2003.
Ed. Aurelio, 2006. História do HTML. Disponível em: <http://www.htmlstaff.org/ver.php?id=1161>. Acessado em 03 abr de 2011.
W3C, 2010a, HTML5. Disponível em:
<http://www.w3.org/TR/2010/WD-html5-20100304/>. Acesso em: 27 maio de 2010.
W3C, 2010b, HTML5 Differences from HTML4, Disponível em: <http://www.w3.org/TR/2010/WD-html5-diff-20100304/>. Acesso em 27 mai. de 2010.
W3C, 2010c. HTML: The Markup Language, Disponível em: <http://www.w3.org/TR/2010/WD-html-markup-20100304/>. Acesso em 27 mai. de 2010.
W3C, 2010d. HTML Canvas 2D Context. Disponível em: <http://www.w3.org/TR/2010/WD-2dcontext-20100304/>. Acesso em 27 mai. de 2010.
