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 ejecuteproducirAutomaticamente()
cada segundo. Para ello utilizaremos la función nativa de JavaScriptsetInterval
.
... // 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();