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 saltar para fora de um buraco, o usuário cheira-lo com um martelo, e ele vai voltar para o buraco. Este jogo é fácil de recriar, tanto para desktops e móveis tradicionais, e pode ser divertido frenético.

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 usuário clica em uma toupeira na ACIMA estado, a toupeira cai e o jogador ganha um ponto. Se a toupeira permanece até passado um limite de tempo, a toupeira cai, eo 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.

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

• Estado: A propriedade mais importante o número de moles está Estado. Esta pode ser tanto ACIMA ou BAIXA. Vários comportamentos de jogo provocar o estado para mudar.

• ACIMA e BAIXAEstes 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 estaduais devem ter o mesmo tamanho, ou o sprite aparece 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á verificado 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 uma vez que tenha aparecido. O valor padrão é de 3 segundos, mas você pode ajustar isso para fazer as toupeiras desaparecem mais rapidamente ou ficar visível mais tempo.

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 o placar.

• CheckTime (): 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 checkTime 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 () - if (randVal lt; this.popupPerc) {this.setState (UP) -} // fim do if} else {// se, verificar para ver quanto tempo temos sido uptime = this.timer.getElapsedTime () - if (time> isso. popupLength) {this.setState (DOWN) - // perder lifelives --- se (vidas lt; 0) {saveHighScore () - alert ( "Você perde") - 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 de 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. O computador mantém o controle da alta pontuação dessa máquina. O mecanismo de pontuação 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 existe uma pontuação alta, ele será definido para zero.

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

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.

 função saveHighScore () {if (visitas> HighScore) {alert ( "Nova pontuação elevada!") - localStorage.setItem ( "moleHighScore", hits) -} // fim do if} // saveHighScore final

Mesmo se o usuário deixar 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.