Cookie Clicker con HTML+CSS+Javascript (parte 2): Galletas extra por cada click

En esta unidad vamos a explicar cómo agregar una mejora al Cookie Clicker que permita ganar galletas extra con cada clic.

Imagen para activar la mejora

Al hacer click sobre esta imagen activarás la mejora de galletas extra. Puedes elegir cualquier imagen para tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificaciones del fichero «index.html»

Primero añadiremos una nueva imagen que represente una mejora que podremos comprar dentro de nuestro juego. Cuando el usuario haga clic en esta imagen, podrá comprar una mejora que le dará galletas extra por cada clic:

  • Para poder representar la mejora, utilizaremos una imagen adicional que meteremos dentro de un bloque div.
  • Al hacer clic sobre el bloque div, el jugador podrá adquirir la mejora si tiene suficientes galletas. Este proceso se llevará a cabo en la función comprarMejora('galletasExtra'), que crearemos a continuación en un fichero JavaScript. 
...
<body>
    ...
    <div onclick="comprarMejora('galletasExtra')">
      <img src="img/muchas-galletas.png" width="125">
      <div id="textoGalletasExtra"></div>
    </div>

    <script src="variables.js"></script>
    <script src="utils.js"></script>
    <script src="script.js"></script>
</body>
</html>

Modificaciones del fichero «variables.js»

En este archivo, añadiremos una propiedad nueva dentro del objeto juego para almacenar las mejoras del juego, incluyendo la cantidad de galletas extra que el jugador ganará con cada clic y el precio de esta mejora:

  • La mejora tiene un precio (5 galletas) y un contador que muestra cuántas veces ha sido comprada.
  • Dentro de juego, ahora tenemos una sección llamada mejoras, que incluye la mejora de galletas extra.
// Objeto que almacena toda la información relativa al progreso y configuración del juego
let juego = {
    galletas: 0, // Cantidad total de galletas conseguidas
    mejoras: {
        galletasExtra: { cantidad: 0, precio: 100, descripcion: "Galletas extra por cada click" }, // Mejora de galletas extras por click
    }
}

Fichero «utils.js»

Este archivo contendrá funciones auxiliares, como una que muestra mensajes al jugador. Por ejemplo, cuando compra una mejora o cuando no tiene suficientes galletas:

  • mostrarMensaje(mensaje) muestra una ventana emergente con un mensaje. Es útil para informar al jugador si ha comprado una mejora o si no tiene suficientes galletas.
// Función para mostrar mensajes por pantalla, para avisar por ejemplo de las mejoras adquiridas
function mostrarMensaje(mensaje) {
    alert(mensaje);
}

Modificaciones del fichero «script.js»

Aquí vamos a modificar las funciones que actualizan el contador de galletas y que permiten comprar mejoras:

  • Función incrementarContador(): Ahora esta función no solo aumentará el contador de galletas en 1, sino que también sumará las galletas extra si el jugador ha comprado la mejora.
  • Función comprarMejora(nombreMejora): Esta función permite al jugador comprar mejoras. Verifica si tiene suficientes galletas y, si es así, descuenta el precio, aumenta la cantidad de la mejora y muestra un mensaje de confirmación.
...

// Función para incrementar el contador de galletas cuando el jugador hace clic en la galleta
function incrementarContador() {
    juego.galletas++;  // Aumenta la cantidad de galletas
    juego.galletas += juego.mejoras.galletasExtra.cantidad;  // Suma las galletas extra si se ha comprado la mejora    
    mostrarProgreso();  // Muestra la cantidad de galletas
}

// Función para comprar una mejora
// "mejora" es el objeto que representa la mejora que el jugador intenta comprar
function comprarMejora(nombreMejora) {
    const mejora = juego.mejoras[nombreMejora];
    if (juego.galletas >= mejora.precio) {  // Verifica si el jugador tiene suficientes galletas
        juego.galletas -= mejora.precio;  // Resta el precio de las galletas
        mejora.cantidad++;  // Aumenta la cantidad de la mejora
        mostrarMensaje(`¡Tienes ${mejora.cantidad} x ${mejora.descripcion}!`);  // Muestra un mensaje de confirmación
        mostrarProgreso();  // Muestra la cantidad de galletas después de pagar la mejora
    } else {
        mostrarMensaje("¡No tienes suficientes galletas!", 'warning');  // Si no tiene galletas suficientes, muestra una advertencia
    }
}