Esta es la segunda parte del making off de Hold the Cloud, puedes leer la primera aquí.
A partir del prototipo, el sábado estuve probando en Chromium y Firefox, así como en un Galaxy Ace, además de añadir un par de cosas como detallo a continuación:
Añadidos
-
Estilo: añadidos progresivos en el estilo: fuentes, colores, fondos, etc.
-
Puntuación: En un principio sólo había 13 niveles y sólo consistía en aguantar hasta el último. En cuanto a la puntuación, dudé en introducirlo ya que no deseaba recargarlo de muchas cosas y complicarlo innecesariamente. El tweet de @privatejerson me ayudó a entender que sería un aliciente para la jugabilidad, de hecho, después la gente se ha guiado por los puntos que había conseguido. Por cierto, el máximo que he visto son 27953.
Algunas curiosidades
El juego tiene algunas cosas curiosas:
-
Touch event en tabletas y smartphones. Al principio de lanzar los eventos, los invocaba desde DIV#sky que es el contenedor de la nube, todo el cielo. Pero esto, al menos en un Galaxy Ace, se comportaba como un enlace: al pulsar se subía el navegador y no daba buena sensación. Lo solucioné poniendo la invocación en el BODY, así cualquier toque en pantalla valdría y no producía ese comportamiento.
-
Cálculo de puntos por altura. Esto creo que no quedó claro al 100%: la mejor puntuación se da cuando lo mantienes en el centro. Cuanto más** arriba o abajo** esté la nube menos puntos. ¿Cómo lo hice? Pincha en cada punto/enlace para ver las líneas resaltadas.
- Establecimiento del rango de puntos por porcentaje de altura. Entre el 0%-35% y 76%-100% 0 puntos, 36%-44% y 56-75% 1 punto, etc.
- El porcentaje de acierto se calcula en la función getPointsFromAccuraty(), basándome en la altura del punto central de la nube y la altura del cielo. Mira la invocación en esta línea.
- Con el porcentaje calculado, la función busca en el rango de puntos definidos en el punto 1 y devuelve los puntos correspondientes.
- ¡Ya está!
-
Juego de fondo azul y blanco. Forma parte de la optimización, que es el siguiente punto. Realmente, es algo básico de HTML y CSS. El código lo tenéis en las primeras 6 líneas del fichero de estilo CSS. Se indica que el fondo del HTML es blanco, para que se funda con las nubes en la parte inferior. Por otro lado, el fondo del BODY es azul (#4e9dff). Recuerda que el HTML es el contenedor y el BODY el contenido.
-
Vibración en ascenso. Cuando el jugador pulsa, además de incrementar la coordenada Y de la nube para que suba, se cambia la posición X con un pequeño intervalo aleatorio. Esto da un efecto de vibración.
Optimización
El juego llegó a ocupar 23kb, lo que significa que sobraba más de la mitad y en realidad, la mayoría era de imágenes (fondo y nube). El domingo fue el día de las pruebas y de las siguientes optimizaciones para salvar espacio y llegar al objetivo:
- Javascript: escribí unas funciones para acortar otras nativas de Javascript. Esto no hubiera sido necesario con jQuery u otro framework, pero al no poder utilizarlos por espacio, realice estas pequeñas funciones. Aquí radica la importancia de conocer un lenguaje más que los frameworks.
- Nube: la primera era una imagen con muchos colores y muy chula, pero que ocupaba muchísimo. Hay que recordar que la competición no permitía compresión de PNG autoextraíbles, así que decidí convertirlo a escala de grises. La imagen perdió mucho atractivo, así que decidí hacer la nube yo mismo en tonos grises. Le añadí la expresión ^^ para que no quedara muy sosa, pero no sé si lo conseguí :-p
- Fondo: en un primer momento coloqué el fondo azul con las nubes abajo y el fondo del HTML en blanco. Tras darme cuenta y poner poker face, eliminé el fondo azul del fondo y dejar sólo al patrón de nubes e hice lo que expliqué en el punto anterior de curiosidades.
¿El resultado?
Por supuesto, si tienes alguna duda deja un comentario aquí mismo y si realizas alguna modificación, puedes aportarlo haciendo fork & push en GitHub o contáctame.
