Día: 24 de septiembre de 2024

Cookie Clicker con HTML+CSS+Javascript (parte 6): Compilando la aplicación para móvil

En esta unidad aprenderemos cómo podemos obtener la aplicación en formato «apk» para instalarla en nuestros propios dispositivos móviles.

Utilizaremos la plataforma VoltBuilder, que facilita la creación de aplicaciones nativas para Android e iOS a partir de proyectos web hechos con HTML, CSS y JavaScript. Sólo tendremos que subir un archivo zip con nuestro proyecto, y la herramienta se encargará de convertirlo en una app nativa. Además, como está disponible en la nube, no tendremos que instalar ningún tipo de software en nuestros equipos.

A continuación se enumeran los pasos que deberemos seguir para compilar nuestra aplicación y obtener el fichero de instalación «.apk».

Icono de la aplicación

Podemos utilizar el mismo icono tanto para mostrarlo en la pestaña del navegador, como para compilar e instalar nuestra aplicación en dispositivos móviles. En nuestro caso, utilizaremos la misma imagen, pero podría ser otra diferente:

Pantalla de bienvenida

La imagen que utilicemos para la pantalla de bienvenida deberá tener cierto margen alrededor, ya que se mostrará en el centro de la pantalla, y la plataforma VoltBuilder la recortará para asegurar que se muestra de manera correcta en cualquier dispositivo y orientación.

Crear fichero de configuración «config.xml»

Primero deberemos crear el archivo «config.xml» en el directorio raiz de la aplicación. A continuación se muestra un ejemplo básico (puedes cambiar el nombre, la descripción, el icono y la pantalla de bienvenida a tu gusto):

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.fernandoruizrico.clicker" xmlns="http://www.w3.org/ns/widgets" version="1.0.1">
  <name>Cookie Clicker</name>
  <description>Juego Cookie Clicker</description>

  <icon src="img/icono.png" />
  <splash src="img/pantalla-bienvenida.png" />

  <preference name="SplashScreenDelay" value="2000" />
  <preference name="AutoHideSplashScreen" value="true" />
  <preference name="AndroidWindowSplashScreenAnimatedIcon" value="img/pantalla-bienvenida.png" />
  <preference name="AndroidWindowSplashScreenBackground" value="#FFFFFF" />

  <plugin name="cordova-plugin-device" />
  <plugin name="cordova-plugin-splashscreen" />
  <plugin name="cordova-plugin-vibration" />

  <preference name="Orientation" value="portrait" /> 

  <access origin="*" />
</widget>

Comprimir la aplicación en formato «.zip»

La página web VoltBuilder necesita que le proporcionemos nuestra aplicación en formato ZIP. Por ello, deberemos comprimir toda nuestra aplicación en un solo fichero ZIP, que incluirá el fichero «config.xml», y todos los ficheros html, CSS y JavaScript. No importa el nombre que tenga el fichero comprimido.

Compilar la «.apk»

El último paso que deberemos seguir para obtener nuestra aplicación en formato «apk» será subir nuestro fichero «.zip» a la página web VoltBuilder. El proceso es muy sencillo:

  1. Acceder a la página de inicio de VoltBuilder: https://volt.build/
  2. Iniciar sesión (con tu cuenta de gmail por ejemplo) haciendo click en la opción «Login/Sign Up».
  3. Hacer click en la opción «Upload».
  4. Enviar nuestra aplicación arrastrando el fichero ZIP directamente al cuadro de «Android». También se puede hacer click sobre dicho cuadro y seleccionar nuestro fichero después.
  5. Una vez la aplicación se haya compilado, podremos descargar el fichero «.apk» generado a través de un código QR, y ya podremos instalarlo en nuestro propio móvil.

Cookie Clicker con HTML+CSS+Javascript (parte 5): Añadiendo icono y estilos

En esta parte vamos a añadir un icono al juego y aplicaremos los primeros estilos CSS. Esto nos permitirá personalizar el juego, haciéndolo visualmente más atractivo e interactivo, lo que ofrece una mejor experiencia para el jugador.

Icono de la aplicación

Puedes elegir cualquier imagen para el icono de tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificar el archivo «index.html»

Realizaremos las siguientes modificaciones sobre el fichero «index.html»:

  • Añadir un icono: El icono aparecerá en la pestaña del navegador, y posteriormente también lo utilizaremos como icono de aplicación cuando instalemos el fichero «apk» en nuestros dispositivos móviles. Utilizaremos la etiqueta <link> para enlazar el archivo de imagen.
  • Fichero con estilos CSS: Usamos un archivo externo con código CSS («style.css») para aplicar estilos a la página.
  • Clases CSS: Añadiremos las correspondientes clases para aplicar estilos específicos a cada caja. Utilizaremos el atributo class sobre cada bloque div:
    • caja-galleta: Caja que contiene la galleta sobre la que hacemos click para incrementar el contador.
    • caja-mejora: Cajas que activan cada una de las mejoras del juego.
    • caja-opciones: Caja que contendrá opciones como reiniciar el juego, o más adelante, exportar e importar el progreso.
<!DOCTYPE html>
<html lang="es">
<head>
    ...
    <link rel="icon" type="image/png" href="img/icono.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Cookie Clicker</h1>

    <div class="caja-galleta" onclick="incrementarContador()">
        ...
    </div>

    <div class="caja-mejora" onclick="comprarMejora('galletasExtra')">
        ...
    </div>
 
    <div class="caja-opciones">
        <button onclick="reiniciarJuego()">Reiniciar el juego</button>
    </div>
 
    ...
</body>

Archivo «style.css»

Crearemos el fichero «style.css» que contendrá todos los estilos que utilizaremos para personalizar nuestro juego:

  • Estilos básicos: Centramos el contenido, aplicamos una fuente legible y hacemos que el contador de galletas destaque.
  • Estilos avanzados: Añadiremos bordes, sombras, y efectos de clic para que las cajas sean más interactivas y agradables visualmente.
body {
  text-align: center; /* Centra el contenido horizontalmente */
  font-family: Arial, sans-serif; /* Fuente básica para mantener legibilidad */
}

#contador {
  color: #991919; /* Rojo oscuro para destacar el contador, simboliza "galletas acumuladas" */
  font-weight: bold; /* El texto en negrita ayuda a que sea más legible y destaque */
  font-size: 250%; /* Tamaño grande para captar la atención del usuario */
}

/* Agrupación de estilos compartidos para cajas de galleta, mejora y opciones */
.caja-galleta, .caja-mejora, .caja-opciones {
  border-radius: 10px; /* Consistencia visual en los bordes redondeados */
  box-shadow: 2px 2px 10px; /* Sombra para simular profundidad */
  padding: 10px; /* Espacio interno suficiente para evitar que el contenido quede pegado al borde */
  margin: 20px 10px; /* Espaciado que separa visualmente las cajas, sin sobrecargar el espacio */
}

.caja-galleta {
  border: 2px solid #7837d4; /* Borde morado, un color alegre que representa el clic principal del juego */
  cursor: pointer; /* Indica que es interactivo */
}

.caja-galleta:active {
  transform: scale(0.98); /* Efecto visual de que la caja está siendo presionada */
  box-shadow: 2px 2px 5px; /* Sombra más pequeña para dar sensación de "presión" */
}

.caja-mejora {
  border: 2px solid #d4af37; /* Borde dorado para simbolizar un "logro" o mejora premium */
  cursor: pointer; /* Interactivo */
}

.caja-mejora:active {
  transform: scale(0.98); /* Efecto de clic */
  box-shadow: 2px 2px 5px; /* Sombra reducida al hacer clic */
}

.caja-opciones {
  border: 2px solid #d45e37; /* Borde naranja, un color cálido para representar acciones de configuración */
  padding: 20px; /* Mayor espacio interno para acomodar los botones y opciones de manera cómoda */
}

Cookie Clicker con HTML+CSS+Javascript (parte 4): Reiniciando el progreso del juego

En esta parte aprenderemos a reiniciar el progreso del juego. Esto permitirá que el jugador borre todo su progreso y comience desde cero si lo desea. Este enfoque enseña cómo manipular el almacenamiento local del navegador y cómo interactuar con el usuario mediante ventanas de confirmación.

Modificar el archivo «index.html»

Vamos a agregar un botón en la página que le dará al jugador la opción de reiniciar su juego. Cuando el jugador haga clic en el botón, se ejecutará la función reiniciarJuego():

...
</body>
    ...

    <div>
        <button onclick="reiniciarJuego()">Reiniciar el juego</button>
    </div>

    ...
</body>
</html>

Modificar el archivo «script.js»

Añadiremos una nueva función JavaScript que agrupará el código que se debe ejecutar cuando el usuario desee reiniciar el juego:

  • Función reiniciarJuego(): Esta función se ejecuta cuando el jugador hace clic en el botón de reiniciar. Primero, se le pregunta al jugador si realmente quiere reiniciar (usando confirm()). Si el jugador acepta, la función borra el progreso guardado en localStorage y recarga la página:
...

// Función para reiniciar el juego
function reiniciarJuego() {
    // Pregunta al usuario si realmente quiere reiniciar, y si dice que sí, borra el progreso y reinicia la página
    if (confirm("¿Estás seguro de borrar todo el progreso? (Esto no se puede deshacer)")) {
        localStorage.removeItem('juego');  // Elimina el progreso guardado
        location.reload();  // Recarga la página
    }
}