Como criar whack-a-mole em seu jogo html5

O Whack-a-mole gênero re-cria um jogo de arcade física clássica em seu jogo HTML5. No jogo original, você tem uma série de furos e um grande martelo. Como uma toupeira saia de um furo, o utilizador cheira-lo com um martelo, e volta para dentro do buraco. Este jogo é fácil de recriar tanto para desktops e móveis tradicionais, e pode ser divertido frenético.

Video: Vídeo Aula - Curso Criação de Jogos em HTML5 - Engine Construct 2 / TV Guarapa

Esta versão cria um número de moles em posições aleatórias. Cada toupeira tem dois estados: cima e para baixo. A toupeira começa no estado para baixo. Uma toupeira no estado para baixo tem uma chance aleatória de aparecendo em qualquer quadro. Uma toupeira que está atualmente se fica na tela por um tempo limitado.

Se o utilizador clica num toupeira na ACIMA estado, a toupeira gotas e o jogador ganha um ponto. Se a toupeira permanece até passado um limite de tempo, a toupeira cai, e o jogador perde uma vida.

Como construir uma toupeira em um jogo de buraco

O conceito principal deste jogo é a toupeira. É uma simples duende objeto com dois estados. Tudo a toupeira faz é realmente sobre a mudança de estados.

Video: Tutorial - Criar um jogo com javascript html 5 - parte 3

A toupeira tem algumas propriedades que o separam de um sprite normais:

• Estado: A propriedade mais importante da toupeira é Estado. Isso pode ser ACIMA ou BAIXA. Vários comportamentos de jogo fazer com que o estado mudar.

• ACIMA e BAIXA: Estes valores são tratados como constantes, e eles são usados ​​para indicar os dois estados possíveis da toupeira.

• imgUp e imgDown: Estas são as imagens que representam os dois estados. Note-se que ambas as imagens do estado deve ser o mesmo tamanho, ou o sprite aparecerá para saltar ao redor da tela quando se muda de estado.

• popupPerc: Esta propriedade indica a probabilidade de uma toupeira que é atualmente para baixo irá aparecer. O valor inicial é de 1 por cento. Lembre-se este valor será verificada 20 vezes por quadro, de modo a 1 por cento, uma toupeira para baixo irá aparecer (em média) a cada 5 segundos. Modificar este valor para alterar a dificuldade do jogo.

• popupLength: Esta propriedade indica quanto tempo uma toupeira vai ficar visível depois que ele apareceu. O valor padrão é de 3 segundos, mas você pode ajustar isso para fazer os moles desaparecem mais rapidamente ou ficar visível mais tempo.

Video: Tutorial - Criar um jogo com javascript html 5 - parte 2

Aqui estão os principais métodos do objeto mole:

• setState (estado): Define o estado para o valor do estado especificado. Unidos são armazenados como constantes (ACIMA e BAIXA). Quando o estado é alterado, a toupeira de Estado propriedade é modificada, e a imagem da toupeira é modificado para refletir o estado atual. Se o estado está definido para ACIMA, um temporizador começa, que vai ser utilizado para controlar o tempo que a toupeira é visível.

• 
  
  
  

  CheckClick (): Verifica se a toupeira está clicado. Se a toupeira é atualmente ACIMA, esconder a toupeira e incrementar a contagem.

• Verificar o tempo(): O comportamento desta função depende do estado da toupeira. Se a toupeira é atualmente para baixo, determinar aleatoriamente se ele deve aparecer. Se a toupeira é para cima, verifique se o popupLength foi excedido. Se assim for, perde uma vida e considerar terminando o jogo.

o verificar o tempo código é o código mais interessante no jogo da toupeira, então aqui é que o método:

 tMole.checkTime = function () {// se para baixo, considere popping upif (this.state == BAIXO) {randVal = Math.random () - se (randVal lt; this.popupPerc) {this.setState (UP) -} // fim do if} else {// se, verificar para ver quanto tempo temos sido uptime = this.timer.getElapsedTime () - se (tempo gt; this.popupLength) {this.setState (DOWN) - // perder lifelives --- Se (vidas lt; 0) {saveHighScore () - alerta ("Você perdeu") = -document.location.href "-} // fim do if} // fim do if} // fim do if} // checkTime final

Outras características do jogo da toupeira

Uma vez que uma única toupeira foi criado e está agindo corretamente, é fácil construir um monte deles. Como de costume, há uma matriz para lidar com um grande número de objectos do mesmo tipo. modificar o NUM_MOLES constante para alterar o número de moles no jogo.

Observe também que um joystick virtual foi adicionado se a cena registra um objeto toque. Isso fará com que a tela de toque para agir apenas como um mouse virtual, e permitirá que o jogo para ser jogado em um dispositivo sensível ao toque.

Uma característica mais interessante é o mecanismo de pontuação elevada. O computador mantém o controle do high score dessa máquina. O mecanismo de contagem alta usa um recurso relativamente novo chamado localStorage. É semelhante ao mecanismo de cookie conhecido, mas mais seguro, mais poderoso, e muito mais fácil de usar.

o getHighScore () função carrega a alta pontuação atual. Se ainda não é uma pontuação alta, ele será definido como zero.

 funcionar getHighScore () {// obter a pontuação máxima nesta máquina utilizando localStoragehighScore = parseInt (localStorage.getItem ("moleHighScore")) - console.log ("pontuação máxima: ", HighScore) -se (HighScore == "nulo"|| HighScore == null || isNaN (HighScore)) {HighScore = 0-} // final se} // getHighScore extremidade

o saveHighScore () função é chamada quando o jogo termina. Ele verifica para ver se a pontuação mais alta atual foi excedido. Se assim for, a pontuação mais alta é salvo.

 funcionar saveHighScore () {if (acessos gt; HighScore) {alert ("Novo recorde!") -localStorage.setItem ("moleHighScore", Bate) -} // end if} // saveHighScore final

Mesmo se o usuário deixa a página ou desliga o navegador, será mantida a pontuação mais alta.

o localStorage mecanismo só mantém o controle do navegador atual. Ele não pode ser usado para verificar altas pontuações globais. Isso requer programação do lado do servidor.