SlideShare une entreprise Scribd logo
1  sur  6
Télécharger pour lire hors ligne
JavaScript:
"Okay, Houston, we've had a problem here."
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 14, 14-11-2011
Exercício Prático 14

 Este exercício tem como objetivo criar um jogo de tiro aos patos.

 O tiro é dado por uma mira que o jogador pode mover com o rato. Os patos
 têm 3 cores distintas e percorrem o espaço de jogo movimentando-se na
 horizontal, partindo de uma posição vertical aleatória.

 O objetivo do jogador é conseguir clicar nos patos utilizando a mira. Por cada
 tiro certeiro são atribuídos pontos que dependem da cor do pato abatido.

 Se um pato sai fora da área de jogo ou é abatido pelo utilizador então será
 colocado em jogo um novo pato da mesma cor, numa nova posição vertical.

 O jogo termina após 20 segundos.
Ecrã de entrada
Ecrã de jogo
Rotinas principais

• Inicializar o jogo

• Movimentar os patos

• Mover a mira

• Disparar a arma

• Finalizar o jogo



• Atribuir velocidade aleatória por cada instância de um pato

• Aumentar velocidade do jogo por intervalos de tempo

• Forçar “modo caçadeira”
Posição do cursor (sem scroll no browser)

 onmousemove="moverMira(event)"


 function moverMira(evt){
     if (window.event) {
         var cursorX = window.event.x;
         var cursorY = window.event.y;
     }
     else {
         var cursorX = evt.clientX
         var cursorY = evt.clientY;
     }
 }

Contenu connexe

Tendances (10)

Tangram
TangramTangram
Tangram
 
Manual do jogo
Manual do jogoManual do jogo
Manual do jogo
 
Futebol
FutebolFutebol
Futebol
 
Atividades pre
Atividades preAtividades pre
Atividades pre
 
Regulamento futebol virtual JOP
Regulamento futebol virtual JOPRegulamento futebol virtual JOP
Regulamento futebol virtual JOP
 
Act quinta da veiga
Act quinta da veigaAct quinta da veiga
Act quinta da veiga
 
Jogos populares
Jogos popularesJogos populares
Jogos populares
 
Plano de aula ed. física
Plano de aula ed. físicaPlano de aula ed. física
Plano de aula ed. física
 
ExpressãO E EducaçãO FíSico
ExpressãO E EducaçãO FíSicoExpressãO E EducaçãO FíSico
ExpressãO E EducaçãO FíSico
 
Treino
TreinoTreino
Treino
 

En vedette

SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
Carlos Santos
 

En vedette (10)

Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO CampusRepensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
 
A technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus projectA technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus project
 
SAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning EnvironmentSAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning Environment
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
 
10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer Experience10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer Experience
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media Plan
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 

Plus de Carlos Santos

AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunos
Carlos Santos
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
Carlos Santos
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificação
Carlos Santos
 
T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)
Carlos Santos
 
T15_T16_LM3: Mais objetos do Javascript (2013-2014)
T15_T16_LM3: Mais objetos do Javascript (2013-2014)T15_T16_LM3: Mais objetos do Javascript (2013-2014)
T15_T16_LM3: Mais objetos do Javascript (2013-2014)
Carlos Santos
 
T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)
Carlos Santos
 
T13_LM3: Arrays (2013-2014)
T13_LM3: Arrays (2013-2014)T13_LM3: Arrays (2013-2014)
T13_LM3: Arrays (2013-2014)
Carlos Santos
 
T12_LM3: Arrays (2013-2014)
T12_LM3: Arrays (2013-2014)T12_LM3: Arrays (2013-2014)
T12_LM3: Arrays (2013-2014)
Carlos Santos
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)
Carlos Santos
 

Plus de Carlos Santos (20)

Is AI the Spice of our future?
Is AI the Spice of our future?Is AI the Spice of our future?
Is AI the Spice of our future?
 
Mentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantesMentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantes
 
1º Encontro Científico TCEdu
1º Encontro Científico TCEdu1º Encontro Científico TCEdu
1º Encontro Científico TCEdu
 
Tecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicialTecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicial
 
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunosAVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
 
AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunos
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
 
Tecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho práticoTecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho prático
 
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCARepensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificação
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
 
T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)
 
T15_T16_LM3: Mais objetos do Javascript (2013-2014)
T15_T16_LM3: Mais objetos do Javascript (2013-2014)T15_T16_LM3: Mais objetos do Javascript (2013-2014)
T15_T16_LM3: Mais objetos do Javascript (2013-2014)
 
T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)T14_LM3: Animação (2013-2014)
T14_LM3: Animação (2013-2014)
 
T13_LM3: Arrays (2013-2014)
T13_LM3: Arrays (2013-2014)T13_LM3: Arrays (2013-2014)
T13_LM3: Arrays (2013-2014)
 
T12_LM3: Arrays (2013-2014)
T12_LM3: Arrays (2013-2014)T12_LM3: Arrays (2013-2014)
T12_LM3: Arrays (2013-2014)
 
Web APIs
Web APIsWeb APIs
Web APIs
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)
 

Dernier

Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
TailsonSantos1
 
Revolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesRevolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividades
FabianeMartins35
 
Aula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptxAula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptx
andrenespoli3
 
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffffSSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
NarlaAquino
 
8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito
tatianehilda
 

Dernier (20)

Seminário Biologia e desenvolvimento da matrinxa.pptx
Seminário Biologia e desenvolvimento da matrinxa.pptxSeminário Biologia e desenvolvimento da matrinxa.pptx
Seminário Biologia e desenvolvimento da matrinxa.pptx
 
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdfRecomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
Recomposiçao em matematica 1 ano 2024 - ESTUDANTE 1ª série.pdf
 
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
 
Revolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesRevolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividades
 
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
 
LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...
LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...
LISTA DE EXERCICIOS envolveto grandezas e medidas e notação cientifica 1 ANO ...
 
Aula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIXAula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIX
 
Aula de jornada de trabalho - reforma.ppt
Aula de jornada de trabalho - reforma.pptAula de jornada de trabalho - reforma.ppt
Aula de jornada de trabalho - reforma.ppt
 
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPlano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
 
Camadas da terra -Litosfera conteúdo 6º ano
Camadas da terra -Litosfera  conteúdo 6º anoCamadas da terra -Litosfera  conteúdo 6º ano
Camadas da terra -Litosfera conteúdo 6º ano
 
About Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de HotéisAbout Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de Hotéis
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx
 
Aula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptxAula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptx
 
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffffSSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptx
 
8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito
 
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia TecnologiaPROJETO DE EXTENSÃO I - Radiologia Tecnologia
PROJETO DE EXTENSÃO I - Radiologia Tecnologia
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
 
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...E a chuva ...  (Livro pedagógico para ser usado na educação infantil e trabal...
E a chuva ... (Livro pedagógico para ser usado na educação infantil e trabal...
 

LabMM3 - Aula teórica 14

  • 1. JavaScript: "Okay, Houston, we've had a problem here." Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 14, 14-11-2011
  • 2. Exercício Prático 14 Este exercício tem como objetivo criar um jogo de tiro aos patos. O tiro é dado por uma mira que o jogador pode mover com o rato. Os patos têm 3 cores distintas e percorrem o espaço de jogo movimentando-se na horizontal, partindo de uma posição vertical aleatória. O objetivo do jogador é conseguir clicar nos patos utilizando a mira. Por cada tiro certeiro são atribuídos pontos que dependem da cor do pato abatido. Se um pato sai fora da área de jogo ou é abatido pelo utilizador então será colocado em jogo um novo pato da mesma cor, numa nova posição vertical. O jogo termina após 20 segundos.
  • 5. Rotinas principais • Inicializar o jogo • Movimentar os patos • Mover a mira • Disparar a arma • Finalizar o jogo • Atribuir velocidade aleatória por cada instância de um pato • Aumentar velocidade do jogo por intervalos de tempo • Forçar “modo caçadeira”
  • 6. Posição do cursor (sem scroll no browser) onmousemove="moverMira(event)" function moverMira(evt){ if (window.event) { var cursorX = window.event.x; var cursorY = window.event.y; } else { var cursorX = evt.clientX var cursorY = evt.clientY; } }