Cómo crear un módulo de aterrizaje lunar en su juego html5

Este es uno de los tipos de juegos más antiguos. La idea básica es replicar el aterrizaje en un planeta para su juego HTML5 sin atmósfera. Los astronautas del Apolo tenían una cantidad limitada de combustible para frenar una nave espacial se mueve rápidamente y llevarlo a la superficie de manera segura. Este juego es una variación de ese tema.

La esencia de un juego lunar lander es la interacción entre el empuje y la gravedad. El juego se basa principalmente en la addVector () método. Gravedad imparte un pequeño empuje hacia abajo cada cuadro, que puede ser contrarrestado por el empuje de las teclas de flecha.

El juego cuenta con cuatro imágenes lander diferentes (para proporcionar información que el usuario está aplicando empuje), que simplemente se intercambian con el setImage () método según sea necesario.

Colisiones Juego

La parte más interesante de este juego es la rutina de aterrizaje. La rutina de colisión ordinaria no es suficientemente específico para manejar este tipo de colisión, como el aterrizaje se considerará un aterrizaje seguro sólo si una serie de condiciones son verdaderas. La manera más limpia para comprobar varias condiciones se encuentra en una profunda anidado si estructura, como la siguiente:

 tLander.checkLanding = function () {if (this.falling) {if (this.y> 525) {if (this.x lt; platform.x + 10) {if (this.x> platform.x - 10) {if (this.dx lt; 0.2) {if (this.dx> -.2) {if (this.dy lt; 2) {this.setSpeed ​​(0) -this.falling = false-message = "Nice Landing!" -} Else {mensaje = "demasiada velocidad vertical" -} // end if} else {mensaje = "demasiado rápido para izquierda "-} // end if} else {mensaje =" demasiado rápido a la derecha "-} // end if} // fin 'x demasiado grande' if} // fin 'x demasiado pequeño' if} // fin ' y no lo suficientemente grande 'if} // end' se nos cayendo? if} // checkLanding final

Cuando te registres para varias condiciones a la vez, lo mejor es crear una separada si declaración para cada uno. Coloque cada si declaración dentro de la siguiente manera la parte, más profundamente anidado del código representa el éxito.

1. Determinar si estás cayendo.

   Una variable booleana llamada que cae fue creado que describe si la nave está cayendo o aterrizó. Si que cae Es verdad, la fuerza de la gravedad se apaga. Sólo tiene sentido para comprobar si hay un estado de aterrizaje si usted está actualmente clasificado.

2. Compruebe el valor de Y.

   Dado que la plataforma se coloca en un valor Y de 550, aparecerá el módulo de aterrizaje a desembarcar cuando su valor Y es mayor que 525. Estás realmente sólo se refiere a la parte inferior del módulo de aterrizaje tocar la parte superior de la plataforma. Tenga en cuenta que esta comprobación sucede dentro de la que cae comprobar. Si cualquier condición de falla, no es necesario para comprobar los otros.

3. Compruebe el valor X.

   Usted querrá el centro del módulo de aterrizaje a ser dentro de diez píxeles del centro de la plataforma, por lo que utiliza un par de anidada si declaraciones para comprobar las ubicaciones X.

4. Compruebe la velocidad horizontal.

   Para un aterrizaje seguro, la nave debe tener un dx valor entre -0,2 y 0,2. (Esto es un tanto arbitraria, pero en las pruebas, que se siente sobre la derecha.) Esto es mejor comprobar con un par de anidada si declaraciones.

5. Compruebe la velocidad vertical.

   Si todo lo demás funciona bien, compruebe que la nave no está cayendo demasiado rápido. Utilizar el dy propiedad para determinar la rapidez con que la nave está cayendo.

6. Informar mediante otro cláusulas.

   Una estructura profundamente anidado como éste muestra el valor real de la sangría adecuada y comentar. Proporcione sus comentarios en los diferentes otro cláusulas para explicar por qué el aterrizaje fue considerado un fracaso.

Consolas de texto Juego

Otra parte interesante del código es el mecanismo para la visualización de datos de texto para el usuario. La forma más fácil de hacerlo es a través de una sencilla HTML div. Usar CSS para colocar el div exactamente donde usted quiere que sea. Raramente Debe utilizar el posicionamiento absoluto en el desarrollo web normal, tiene sentido en el contexto de la creación de una etiqueta para un juego.

Tenga en cuenta que puede que tenga que ajustar la z-index propiedad en un valor alto para asegurarse de que aparece sobre el lienzo, o puede que no sea visible para el usuario. Aquí está la CSS que hace que la etiqueta se parece a la salida en la pantalla:

 #stats {position: absolute-font-family: monospace-left: 50px; top: 50px; z-index: 999 color: blanco-}

Formas de mejorar su juego

Esto es sólo un punto de partida para el juego. Muchas otras características interesantes se podrían añadir:

• Combustible: Añadir una variable combustible que se decrementa cada vez que el usuario aplica empuje. Empuje vertical debe utilizar más combustible que los ajustes horizontales. Si el nivel de combustible se pone por debajo de cero, ignorar otras entradas de empuje. Este mecanismo pone una complicación realista en el juego.

• Powerups: Añadir algunas otras características que el usuario puede ganar: combustible bono, menos intensa gravedad, una plataforma más amplia.

• Múltiples aterrizajes: Tal vez mover la pista de aterrizaje después de un aterrizaje exitoso, o haga que el usuario lleve un objeto a una segunda plataforma.

• Obstáculos: Ponga la basura espacial o edificios de la manera que se colgará el jugador al contacto.

• Cambiar el tema: La misma mecánica se puede utilizar fácilmente para un helicóptero o juego globo de aire caliente.