Cookie Clicker con HTML+CSS+Javascript (parte 7): Auto clickers

En esta parte del proyecto, vamos a añadir una mejora conocida como Auto Clicker, que permite al jugador ganar galletas automáticamente cada segundo sin tener que hacer click.

Imagen para activar la mejora

Al pulsar sobre esta imagen activarás la mejora de clicks automáticos. 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»

Vamos a añadir un div adicional a nuestro código html para poder activar la mejora. De esta forma, el jugador podrá comprar Auto Clickers pulsando sobre la imagen. Por cada Auto Clicker que adquiera el jugador, se generará una galleta automáticamente por segundo:

...
<body>
    ...
    <div class="caja-mejora" onclick="comprarMejora('autoClickers')">
        <img src="img/mano.png" width="100">
        <div id="textoAutoClickers"></div>
    </div> 
    ...
</body>
</html>

Modificaciones del fichero «variables.js»

Añadimos la mejora de Auto Clickers al objeto juego, con un precio inicial de 200 galletas. Cada Auto Clicker comprado generará una galleta por segundo:

// 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: {
        ...
        autoClickers: { cantidad: 0, precio: 200, descripcion: "Auto click cada segundo" }, // Mejora de AutoClicker
    }
}

// Variable global para controlar el intervalo de la producción automática
let intervalo = null;

Modificaciones del fichero «script.js»

Deberemos crear una nueva función de JavaScript dentro del fichero «script.js», y la ejecutaremos automáticamente cada segundo:

  • Función reiniciarJuego(): Esta función se encargaba de reiniciar el progreso del juego. Ahora además deberá encargarse de cancelar el intervalo de producción de galletas automáticamente. Para ello deberemos añadir la siguiente línea:
    • clearInterval(intervalo); // Detiene la producción automática de galletas
  • Función producirAutomaticamente(): Esta función se ejecuta cada segundo y añade galletas según la cantidad de Auto Clickers comprados.
  • Inicialización: En la función inicializar(), deberemos configurar un intervalo que ejecute producirAutomaticamente() cada segundo. Para ello utilizaremos la función nativa de JavaScript setInterval.
...

// Función para reiniciar el juego: ¡Sólo debemos añadir la línea con la llamada a 'clearInterval()'!
function reiniciarJuego() {
    // Pregunta al usuario si realmente quiere reiniciar, y si dice que sí, borra el progreso y reinicia la página
    if (confirm("...")) {
        clearInterval(intervalo);  // Detiene la producción automática de galletas
        localStorage.removeItem('juego');  // Elimina el progreso guardado
        location.reload();  // Recarga la página
    }
}

...

// Función para producir galletas automáticamente
// Se ejecuta cada segundo y suma galletas según las mejoras compradas
function producirAutomaticamente() {
    juego.galletas += juego.mejoras.autoClickers.cantidad;  // Suma las galletas por AutoClicker
    guardarProgreso();  // Guarda el progreso automáticamente
}

// Función para inicializar el juego
function inicializar() {
    cargarProgreso();  // Carga el progreso guardado al iniciar el juego
    intervalo = setInterval(producirAutomaticamente, 1000);  // Cada segundo, produce galletas automáticamente
}

inicializar();