Jogo em Javascript com HTML5

1. Jogo em Javascript com HTML5
Trabalho da Cadeira DAW/MOSS 2010/2011
João Alves <jpralves@gmail.com>

2. Jogo em Javascript com HTML5
 Daddy’s Nightmare é um jogo que foi
desenvolvido em Javascript e que faz uso das
novas funcionalidades do HTML5
nomeadamente o canvas, localstorage e audio.
Deverá funcionar em qualquer browser que
suporte HTML5.

3. 12-Jul-2011 João Alves <jpralves@gmail.com> 3
O HTML5
 O HTML5 é a quinta versão da linguagem HTML. Esta
nova versão traz consigo importantes mudanças
quanto ao papel do HTML no mundo da WEB,
trazendo novas funcionalidades como semântica e
acessibilidade, com novos recursos antes só
possíveis por meio de outras tecnologias, e trazendo
uma importante convergência dentre todos os novos
browsers de internet, tornando-o mais universal.

4. 12-Jul-2011 João Alves <jpralves@gmail.com> 4
O HTML5
 Para este projecto em particular foi necessário
recorrer aos seguintes objectos novos:
 Canvas – permite o desenho de gráficos em tempo
real;
 Localstorage – permite guardar dados de forma
persistente do lado do cliente;
 Audio – cria um standard para reproduzir audio.

5. 12-Jul-2011 João Alves <jpralves@gmail.com> 5
O Jogo
 Para o jogo são criados 3 objectos canvas que representam os
três locais onde é preciso “renderizar” elementos:
 Menu inicial (titlectx):
 Imagem estática;
 Texto;
 Boneco a movimentar-se;
 Barra Lateral da pontuação (pontosctx):
 Texto;
 Imagens.
 Area de Jogo (bonecoctx):
 Imagens;
 Captura do rato.

6. 12-Jul-2011 João Alves <jpralves@gmail.com> 6
O Jogo
 O objectivo do jogo é satisfazer as necessidades
alimentares dos bebés, usando para isso o leite materno
armazenado no frigorífico. Antes de se poder dar o leite ao
bebé ele tem que ser aquecido no micro-ondas.
 Os bebés vão tendo um grau de insatisfação que é
medido por barras que são apresentadas junto à imagem
do bebé.
 O jogador perde uma vida quando um dos bebés atinge o
ponto de saturação e deixa de aguentar a fome.
 O jogador pode movimentar-se usando o rato para fazer o
drag-and-drop do pai ou através das teclas direccionais.

7. 12-Jul-2011 João Alves <jpralves@gmail.com> 7
Ciclo de funcionamento do jogo
 Iniciar()
 Preparação dos canvas;
 Ler o HighScore se existir;
 Preparar o audio;
 ExecutaIntro():
 Ciclo theIntro até tecla Enter ou rato
 ExecutaJogo():
 Esconde o canvas do titulo;
 Mostra o canvas do Jogo;
 InitJogo();
 Inicializa a pontuação, vidas, etc.
 CicloJogo() até perder as vidas ou carregar na tecla ESC (Abortar);

8. 12-Jul-2011 João Alves <jpralves@gmail.com> 8
Jogando o Jogo
 Demo
 Link: http://jpralves.net/dn/

9. 12-Jul-2011 João Alves <jpralves@gmail.com> 9
Links Úteis
 Dive Into HTML5 - http://diveintohtml5.org/
 dean.edwards.name/packer/ - http://dean.edwards.name/packer/
 JSLint - http://www.jslint.com/
 JSHint - http://jshint.com/
 THE HTML5 TEST - http://html5test.com/
 W3C - http://dev.w3.org/html5/spec/Overview.html
 Html5demos - http://html5demos.com/

10. 12-Jul-2011 João Alves <jpralves@gmail.com> 10
Jogo em Javascript com HTML5
 Q&A
João Alves
E-mail: jpralves@gmail.com
Web: http://jpralves.net/