Cookie Clicker con HTML+CSS+Javascript (parte 9): Comprando granjas

En esta parte del proyecto vamos a añadir al juego la posibilidad de comprar Granjas. De esta forma podremos conseguir más galletas cada segundo sin tener que hacer clic.

Imagen para activar la mejora

Al pulsar sobre esta imagen activarás la mejora de las granjas. 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 granjas pulsando sobre la imagen. Por cada granja que adquiera el jugador, se generarán más galletas automáticamente:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
...
<body>
...
<div class="caja-mejora" onclick="comprarMejora('granjas')">
<img src="img/granja.png" width="125">
<div id="textoGranjas"></div>
</div>
...
</body>
</html>
... <body> ... <div class="caja-mejora" onclick="comprarMejora('granjas')"> <img src="img/granja.png" width="125"> <div id="textoGranjas"></div> </div> ... </body> </html>
...
<body>
    ...
    <div class="caja-mejora" onclick="comprarMejora('granjas')">
        <img src="img/granja.png" width="125">
        <div id="textoGranjas"></div>
    </div>
    ...
</body>
</html>

Modificaciones del fichero «variables.js»

Añadimos la mejora de granjas al objeto juego, con un precio inicial de 400 galletas por cada granja que compremos. Cada una de ellas generará 10 galletas por segundo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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: {
...
granjas: { cantidad: 0, precio: 400, descripcion: "Granjas que producen 10 galletas por segundo" }, // Mejora de Granjas
}
}
// 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: { ... granjas: { cantidad: 0, precio: 400, descripcion: "Granjas que producen 10 galletas por segundo" }, // Mejora de Granjas } }
// 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: {
        ...
        granjas: { cantidad: 0, precio: 400, descripcion: "Granjas que producen 10 galletas por segundo" }, // Mejora de Granjas
    }
}

Modificaciones del fichero «script.js»

Para conseguir que las granjas 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 una unidad anterior, dentro del fichero «script.js». Añadiendo una sola línea a esta función podremos conseguir que por cada granja que hayamos comprado, consigamos 10 galletas más de forma automática cada segundo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
...
// 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.granjas.cantidad * 10; // Suma las galletas por Granjas
guardarProgreso(); // Guarda el progreso automáticamente
}
... // 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.granjas.cantidad * 10; // Suma las galletas por Granjas guardarProgreso(); // Guarda el progreso automáticamente }
...

// 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.granjas.cantidad * 10;  // Suma las galletas por Granjas
    guardarProgreso();  // Guarda el progreso automáticamente
}