Jogo em Javascript com HTML5
Trabalho da Cadeira DAW/MOSS 2010/2011
João Alves <jpralves@gmail.com>
Jogo em Javascript com HTML5
 Daddy’s Nightmare é um jogo que foi
desenvolvido em Javascript e que faz uso das
novas func...
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...
12-Jul-2011 João Alves <jpralves@gmail.com> 4
O HTML5
 Para este projecto em particular foi necessário
recorrer aos segui...
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 l...
12-Jul-2011 João Alves <jpralves@gmail.com> 6
O Jogo
 O objectivo do jogo é satisfazer as necessidades
alimentares dos be...
12-Jul-2011 João Alves <jpralves@gmail.com> 7
Ciclo de funcionamento do jogo
 Iniciar()
 Preparação dos canvas;
 Ler o ...
12-Jul-2011 João Alves <jpralves@gmail.com> 8
Jogando o Jogo
 Demo
 Link: http://jpralves.net/dn/
12-Jul-2011 João Alves <jpralves@gmail.com> 9
Links Úteis
 Dive Into HTML5 - http://diveintohtml5.org/
 dean.edwards.nam...
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
We...
Próximos SlideShares
Carregando em…5
×

Jogo em Javascript com HTML5

1.128 visualizações

Publicada em

Jogo em Javascript com HTML5

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.128
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Jogo em Javascript com HTML5

  1. 1. Jogo em Javascript com HTML5 Trabalho da Cadeira DAW/MOSS 2010/2011 João Alves <jpralves@gmail.com>
  2. 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. 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. 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. 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. 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. 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. 8. 12-Jul-2011 João Alves <jpralves@gmail.com> 8 Jogando o Jogo  Demo  Link: http://jpralves.net/dn/
  9. 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. 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/

×