En esta parte del proyecto, vamos a añadir al juego la posibilidad de comprar Abuelas que cocinen varias galletas para nosotros cada segundo. De esta forma podremos conseguir incrementar nuestra cantidad de galletas sin tener que hacer clic.
Imagen para activar la mejora
Al pulsar sobre esta imagen activarás la mejora de las abuelas. 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 abuelas pulsando sobre la imagen. Por cada abuela que adquiera el jugador, se generarán más galletas automáticamente por segundo:
... <body> ... <div class="caja-mejora" onclick="comprarMejora('abuelas')"> <img src="img/abuela.png" width="150"> <div id="textoAbuelas"></div> <progress id="progresoAbuelas" value="0"></progress> </div> ... </body> </html>
Modificaciones del fichero «variables.js»
Añadimos la mejora de abuelas al objeto juego
, con un precio inicial de 300 galletas. Cada abuela comprada generará 5 galletas 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: { ... abuelas: { cantidad: 0, precio: 300, descripcion: "Abuelas que cocinan 5 galletas por segundo" }, // Mejora de Abuelas } }
Modificaciones del fichero «script.js»
Para conseguir que las abuelas cocinen y produzcan galletas sin que tengamos que hacer clic, deberemos incrementar la cantidad de galletas de forma automática cada segundo. Para ello ya disponemos de la función «producirAutomaticamente()», que creamos en la unidad anterior, dentro del fichero «script.js». Añadiendo una sola línea a esta función podremos conseguir que por cada abuela que hayamos comprado, consigamos 5 galletas más de forma automática cada segundo:
... // 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.abuelas.cantidad * 5; // Suma las galletas por Abuelas guardarProgreso(); // Guarda el progreso automáticamente }