Cómo crear un Lunar Lander en su juego HTML5: Dummies

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 Apollo tenían una cantidad limitada de combustible para desacelerar una nave espacial que se mueve rápidamente y llevarla a la superficie de forma segura. Este juego es una variación de ese tema.

La esencia de un juego de aterrizaje lunar es la interacción entre empuje y gravedad. El juego depende en gran medida del método addVector (). La gravedad imparte un pequeño empuje hacia abajo en cada cuadro, que puede contrarrestarse con el empuje de las teclas de flecha.

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

Colisiones del juego

La parte más interesante de este juego es la rutina de aterrizaje. La rutina de colisión normal no es lo suficientemente específica como para manejar este tipo de colisión, ya que el aterrizaje se considerará un aterrizaje seguro solo si se cumple una serie de condiciones. La forma más limpia de verificar condiciones múltiples se encuentra en una estructura profundamente anidada, como la siguiente:

tLander. checkLanding = function () {if (this. falling) {if (this. y> 525) {if (esta. x plataforma. x - 10) {if (this. dx -. 2) {if (this. dy < 2) {esto. setSpeed ​​(0); esta. cayendo = falso; message = "Nice Landing!";} else {mensaje = "demasiada velocidad vertical";} // end if} else {mensaje = "demasiado rápido hacia la izquierda";} // end if} else {mensaje = "demasiado rápido a la derecha ";} // terminar if} // terminar 'x too big' if} // terminar 'x too small' if} // terminar 'y no lo suficientemente grande' if} // end '¿estamos cayendo? 'if} // end checkLanding

Cuando comprueba varias condiciones a la vez, es mejor crear una instrucción if separada para cada una. Coloque cada instrucción if dentro de la siguiente, por lo que la parte más anidada del código representa el éxito.

1. Determina si estás cayendo.

   Se creó una variable booleana llamada caída que describe si la nave espacial está cayendo o aterrizando. Si la caída es verdadera, la fuerza de gravedad se desactiva. Solo tiene sentido verificar un estado de aterrizaje si actualmente está cayendo.

2. Compruebe el valor Y.

   Debido a que la plataforma está colocada en un valor Y de 550, el módulo de aterrizaje parecerá aterrizado cuando su valor Y sea mayor que 525. En realidad, solo le preocupa que la parte inferior del módulo de aterrizaje toque la parte superior de la plataforma. Tenga en cuenta que esta verificación ocurre dentro del cheque que cae. Si alguna condición falla, no es necesario verificar las demás.

3. Compruebe el valor X.

   Querrá que el centro del módulo de aterrizaje esté dentro de los diez píxeles del centro de la plataforma, por lo tanto, use un par de declaraciones if anidadas para verificar las ubicaciones X.

4. Verifique la velocidad horizontal.

   Para un aterrizaje seguro, la nave debe tener un valor dx entre -0. 2 y 0. 2. (Esto es un tanto arbitrario, pero al momento de las pruebas, parece correcto). Esto se verifica mejor con un par de declaraciones if anidadas.

5. Comprueba la velocidad vertical.

   Si todo lo demás funciona bien, verifique que la nave no esté cayendo demasiado rápido. Usa la propiedad dy para determinar qué tan rápido está cayendo la nave espacial.

6. Proporcione comentarios con cláusulas else.

   Una estructura profundamente anidada como esta te muestra el valor real de la sangría y los comentarios adecuados. Proporcione comentarios en las diversas cláusulas de otros para explicar por qué el aterrizaje se consideró un fracaso.

Consolas de texto de juegos

Otra parte interesante del código es el mecanismo para mostrar datos de texto al usuario. La forma más fácil de hacerlo es a través de un simple div HTML. Use CSS para colocar el div exactamente donde quiere que esté. Raramente debería 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 es posible que necesite establecer la propiedad del índice z en un valor alto para asegurarse de que aparezca sobre el lienzo, o puede que no sea visible para el usuario. Aquí está el CSS que hace que la etiqueta se vea como salida en la pantalla:

#stats {position: absolute; font-family: monoespacio; izquierda: 50px; arriba: 50px; índice z: 999; color: blanco;}

Formas de mejorar tu juego

Este es solo un punto de partida para el juego. Se podrían agregar muchas otras características interesantes:

• Combustible: Agregue una variable de combustible que se reduce cada vez que el usuario aplica el empuje. El empuje vertical debería usar más combustible que los ajustes horizontales. Si el nivel de combustible llega a cero, ignore más entradas de empuje. Este mecanismo pone una complicación realista en el juego.

• Mejoras: Agregue algunas otras características que el usuario puede ganar : combustible adicional, gravedad menos intensa, una plataforma más amplia.

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

• Obstáculos: Ponga basura espacial o edificios en el camino que bloqueará al jugador en contacto.

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