SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
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;
     }
 }

Más contenido relacionado

La actualidad más candente (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
 

Destacado

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
 

Destacado (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
 

Más 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
 

Más 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)
 

Último

ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
azulassessoria9
 
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
azulassessoria9
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
azulassessoria9
 

Último (20)

Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024Historia de Portugal - Quarto Ano - 2024
Historia de Portugal - Quarto Ano - 2024
 
Slides Lição 06, Central Gospel, O Anticristo, 1Tr24.pptx
Slides Lição 06, Central Gospel, O Anticristo, 1Tr24.pptxSlides Lição 06, Central Gospel, O Anticristo, 1Tr24.pptx
Slides Lição 06, Central Gospel, O Anticristo, 1Tr24.pptx
 
Acessibilidade, inclusão e valorização da diversidade
Acessibilidade, inclusão e valorização da diversidadeAcessibilidade, inclusão e valorização da diversidade
Acessibilidade, inclusão e valorização da diversidade
 
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...
 
AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022
 
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 3 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
 
tensoes-etnicas-na-europa-template-1.pptx
tensoes-etnicas-na-europa-template-1.pptxtensoes-etnicas-na-europa-template-1.pptx
tensoes-etnicas-na-europa-template-1.pptx
 
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
ATIVIDADE 2 - DESENVOLVIMENTO E APRENDIZAGEM MOTORA - 52_2024
 
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
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
 
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de LedAula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
 
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.docGUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
GUIA DE APRENDIZAGEM 2024 9º A - História 1 BI.doc
 
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
 
apostila filosofia 1 ano 1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
apostila filosofia 1 ano  1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...apostila filosofia 1 ano  1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
apostila filosofia 1 ano 1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
 
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
 
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
 
Sopa de letras | Dia da Europa 2024 (nível 2)
Sopa de letras | Dia da Europa 2024 (nível 2)Sopa de letras | Dia da Europa 2024 (nível 2)
Sopa de letras | Dia da Europa 2024 (nível 2)
 
M0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptxM0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptx
 
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
 
Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 

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; } }