Cómo crear whack-a-mole en su juego html5

El género de golpe-a-mole recrea un juego de arcade clásico física en su juego HTML5. En el juego original, tiene una serie de agujeros y un gran martillo. Como un lunar se sale de un agujero, el usuario golpea con un martillo, y se remonta en el agujero. Este juego es fácil de recrear tanto para computadoras de escritorio y móviles tradicionales, y puede ser divertido frenético.

Esta versión crea un número de moles en posiciones aleatorias. Cada lunar tiene dos estados: arriba y abajo. El topo comienza en el estado hacia abajo. Un lunar en el estado abajo Ocasión aleatoria de aparecer en cualquier marco. Un lunar que se encuentra actualmente a estancias de hasta por un tiempo limitado.

Si el usuario hace clic en un lunar en el ARRIBA estado, el lunar cae y el jugador gana un punto. Si el lunar se queda hasta más allá de un límite de tiempo, el lunar cae, y el jugador pierde una vida.

¿Cómo construir un lunar en un juego agujero

El concepto principal de este juego es el topo. Es un simple Sprite objeto con dos estados. Todo el topo hace es realmente sobre el cambio de estados.

El topo tiene algunas propiedades que lo separan de un sprite normales:

• estado: La propiedad más importante del lunar es estado. Esto puede ser ya sea ARRIBA o ABAJO. Diversas conductas de juego hacen que el estado cambie.

• ARRIBA y ABAJO: Estos valores son tratados como constantes, y se utilizan para indicar los dos estados posibles de la mole.

• imgUp y imgDown: Estas son las imágenes que representan los dos estados. Tenga en cuenta que las dos imágenes de los estados deben ser del mismo tamaño, o el sprite aparecerán a saltar alrededor de la pantalla cuando se cambia de estado.

• popupPerc: Esta propiedad indica la probabilidad de un lunar que está actualmente abajo aparecerá. El valor inicial es 1 por ciento. Recuerde que este valor será revisado 20 veces por trama, por lo que en un 1 por ciento, un lunar abajo aparecerá (en promedio) cada 5 segundos. Modificar este valor para cambiar la dificultad del juego.

• popupLength: Esta propiedad indica cuánto tiempo un lunar permanecerá visible una vez que ha aparecido. El valor por defecto es de 3 segundos, pero se puede ajustar esto para hacer los lunares desaparecen más rápidamente o permanecer visible por más tiempo.

Estas son las principales métodos del objeto mol:

• setstate (estado): Establece el estado para el valor de estado especificado. Unidos se almacenan como constantes (ARRIBA y ABAJO). Cuando se cambia el estado, de los molares estado propiedad se modificó, y la imagen del lunar se modifica para reflejar el estado actual. Si el estado se establece en ARRIBA, un temporizador comienza, que se utiliza para realizar un seguimiento de cuánto tiempo el topo es visible.

• CheckClick (): Comprueba si el lunar se hace clic en la actualidad. Si el lunar está actualmente ARRIBA, ocultar el mole y incrementar la puntuación.

• Checktime (): El comportamiento de esta función depende del estado de la mole. Si el lunar está actualmente abajo, determinará aleatoriamente si debe aparecer. Si el lunar está para arriba, comprobar para ver si el popupLength Se ha sobrepasado. Si es así, perderá una vida y considerar que termina el juego.

los checktime código es el código más interesantes en el juego mole, así que aquí es que el método:

 tMole.checkTime = function () {// si abajo, considere hacer estallar upif (this.state == ABAJO) {randVal = Math.random () - si (randVal lt; this.popupPerc) {this.setState (UP) -} // end if} else {// si, compruebe para ver cuánto tiempo hemos estado uptime = this.timer.getElapsedTime () - si (hora> esto. popupLength) {this.setState (ABAJO) - // Pierde una lifelives --- Si (vidas lt; 0) {saveHighScore () - alert ("Usted pierde") - document.location.href = "" -} // end if} // end if} // end if} // checktime final

Otras características del juego topo

Una vez que un único lunar ha sido creado y está actuando correctamente, es fácil construir una gran cantidad de ellos. Como de costumbre, hay una gran variedad de manejar un gran número de objetos del mismo tipo. Modifique la NUM_MOLES constante para cambiar el número de moles en el juego.

También tenga en cuenta que un joystick virtual se ha añadido si la escena se registra un objeto táctil. Esto hará que la pantalla táctil para actuar como un ratón virtual, y permitirá el juego para ser jugado en un dispositivo táctil.

Una de las características más interesantes es el mecanismo de puntuación más alta. El equipo realiza un seguimiento de la puntuación más alta en ese equipo en particular. El mecanismo de puntuación más alta utiliza una característica relativamente nueva llamada almacen local. Es similar al mecanismo de galletas muy conocido, pero más seguro, más potente y más fácil de usar.

los getHighScore () función de carga la alta puntuación actual. Si todavía no existe una alta puntuación, se pone a cero.

 getHighScore function () {// obtener la puntuación más alta en esta máquina utilizando localStoragehighScore = parseInt (localStorage.getItem ("moleHighScore")) - console.log ("Record:", puntuación más alta), si (== Máxima puntuación de "nulo" | | HighScore == null || isNaN (puntuación más alta)) {puntuación más alta = 0-} // end if} // fin getHighScore

los saveHighScore () función es llamada cuando el juego termina. Se comprueba si se ha superado la puntuación más alta actual. Si es así, se guarda el nuevo récord de puntuación.

 función saveHighScore () {if (accesos> puntuación más alta) {alert ("Nueva puntuación más alta!") - localStorage.setItem ("moleHighScore", hits) -} // end if} // saveHighScore final

Incluso si el usuario sale de la página o se apaga el navegador, se mantendrá la puntuación más alta.

los almacen local mecanismo sólo rastrea el navegador actual. No se puede utilizar para comprobar altas puntuaciones globales. Esto requiere de programación del lado del servidor.