Cómo crear golpe-a-mole en su juego html5
El género de golpe-a-mole vuelve a crear un juego de arcade física clásica en su juego HTML5. En el juego original, que tiene una serie de agujeros y un martillo grande. Como un topo 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 ordenadores de sobremesa y móviles tradicionales, y puede ser divertido frenético.
Esta versión crea un número de moles en posiciones aleatorias. Cada mol tiene dos estados: arriba y abajo. El topo comienza en el estado hacia abajo. Un lunar en el estado Abajo tiene una posibilidad aleatoria de aparecer en cualquier marco. Un lunar que es actualmente hasta se queda hasta por un tiempo limitado.
Video: Como hacer mas de 100 golpes- Claves estratégicas para arruinar tu vuelta
Si el usuario hace clic en un topo en el ARRIBA estado, el topo gotas y el jugador gana un punto. Si el topo se queda hasta más allá de un límite de tiempo, el topo cae, y el jugador pierde una vida.
¿Cómo construir un topo en un juego orificio
El concepto principal de este juego es el topo. Es un simple Duende objeto con dos estados. Todo el topo hace es realmente sobre el cambio de estados.
Video: Bienvenida a Cómo crear tu primer juego en HTML5 paso a paso y desde cero V2.0
El topo tiene algunas propiedades que lo separan de un sprite normal:
estado: La propiedad más importante del lunar es estado. Esto puede ser tanto ARRIBA o ABAJO. Diversos comportamientos de juego hacen que el estado cambie.
ARRIBA y ABAJO: Estos valores se tratan 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 aparecerá el sprite para saltar alrededor de la pantalla cuando se cambia de estado.
popupPerc: Esta propiedad indica la probabilidad de que un lunar es actualmente abajo aparecerá. El valor inicial es 1 por ciento. Recuerde que este valor será controlada 20 veces por trama, así que al 1 por ciento, un lunar abajo emergerá (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 al valor de estado especificado. Estados son almacenados como constantes (ARRIBA y ABAJO). Cuando se cambia el estado, de los molares estado la propiedad es modificada, 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 es actualmente ARRIBA, ocultar el topo y el incremento en el marcador.
Hora de revision(): El comportamiento de esta función depende del estado del topo. Si el lunar está actualmente abajo, determina al azar si se debe saltar. Si el topo se ha terminado, comprobar para ver si el popupLength se ha excedido. Si es así, pierde una vida y considerar terminar el juego.
los hora de revision código es el código más interesante en el juego topo, así que aquí es que el método:
tMole.checkTime = function () {// si abajo, considere la posibilidad de hacer estallar upif (this.state == ABAJO) {randVal = Math.random () - Si (randVal lt; this.popupPerc) {this.setState (UP) -} // fin de if} else {// si, compruebe para ver cuánto tiempo hemos estado tiempo de actividad = this.timer.getElapsedTime () - Si (hora gt; this.popupLength) {this.setState (ABAJO) - // perder lifelives --- Si (vidas lt; 0) {saveHighScore () - Alerta ("Tú pierdes") -document.location.href = "-} // fin de if} // fin de if} // fin de if} // fin checktimeOtras 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. Modificar el NUM_MOLES constante para cambiar el número de moles en el juego.
También tenga en cuenta que un joystick virtual ha sido 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á que el juego sea 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 esa máquina en particular. El mecanismo de puntuación más alta utiliza una característica relativamente nueva llamada almacenamiento local. Es similar al mecanismo de la cookie conocida, pero más seguro, más potente, y mucho más fácil de usar.
los getHighScore () función carga la puntuación máxima actual. Si todavía no existe una alta puntuación, se pone a cero.
funcionar getHighScore () {// obtener la puntuación más alta en esta máquina utilizando localStoragehighScore = parseInt (localStorage.getItem ("moleHighScore")) - console.log ("puntuación más alta: ", Puntuación más alta) -Si (HighScore == "nulo"|| puntuación más alta == null || isNaN (puntuación más alta)) {HighScore = 0-} // fin if} // getHighScore finallos saveHighScore () función es llamada cuando el juego termina. Se comprueba si se ha superado la puntuación máxima actual. Si es así, la nueva puntuación se guarda.
Video: Crear juegos en HTML5
funcionar saveHighScore () {if (golpes gt; puntuación más alta) {alert ("¡Nuevo record!") -localStorage.setItem ("moleHighScore", Golpea) -} // end if} // fin saveHighScoreIncluso si el usuario abandona la página o se apaga el navegador, se mantendrá la puntuación más alta.
los almacenamiento local mecanismo sólo realiza un seguimiento del navegador actual. No se puede utilizar para comprobar altas puntuaciones globales. Esto requiere la programación del lado del servidor.