Día: 10 de octubre de 2024

Cookie Clicker con HTML+CSS+Javascript (parte 10): Comprando fábricas

En esta parte del proyecto, vamos a añadir al juego la posibilidad de comprar Fábricas que produzcan más galletas para nosotros cada segundo sin tener que hacer clic.

Imagen para activar la mejora

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

...
<body>
    ...
    <div class="caja-mejora" onclick="comprarMejora('fabricas')">
        <img src="img/fabrica.png" width="125">
        <div id="textoFabricas"></div>
    </div>
    ...
</body>
</html>

Modificaciones del fichero «variables.js»

Añadimos la mejora de fabricas al objeto juego, con un precio inicial de 500 galletas. Cada fábrica comprada generará 20 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: {
        ...
        fabricas: { cantidad: 0, precio: 500, descripcion: "Fábricas que producen 20 galletas por segundo" } // Mejora de Fábricas
    }
}

Modificaciones del fichero «script.js»

Para conseguir que las fábricas 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 fábrica que hayamos comprado, consigamos 20 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.fabricas.cantidad * 20;  // Suma las galletas por Fábricas
    guardarProgreso();  // Guarda el progreso automáticamente
}

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:

...
<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:

// 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:

...

// 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
}

Cookie Clicker con HTML+CSS+Javascript (parte 8): Comprando abuelas

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>
    </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
}