Blog

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
}

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();

Cookie Clicker con HTML+CSS+Javascript (parte 6): Compilando la aplicación para móvil

En esta unidad aprenderemos cómo podemos obtener la aplicación en formato «apk» para instalarla en nuestros propios dispositivos móviles.

Utilizaremos la plataforma VoltBuilder, que facilita la creación de aplicaciones nativas para Android e iOS a partir de proyectos web hechos con HTML, CSS y JavaScript. Sólo tendremos que subir un archivo zip con nuestro proyecto, y la herramienta se encargará de convertirlo en una app nativa. Además, como está disponible en la nube, no tendremos que instalar ningún tipo de software en nuestros equipos.

A continuación se enumeran los pasos que deberemos seguir para compilar nuestra aplicación y obtener el fichero de instalación «.apk».

Icono de la aplicación

Podemos utilizar el mismo icono tanto para mostrarlo en la pestaña del navegador, como para compilar e instalar nuestra aplicación en dispositivos móviles. En nuestro caso, utilizaremos la misma imagen, pero podría ser otra diferente:

Pantalla de bienvenida

La imagen que utilicemos para la pantalla de bienvenida deberá tener cierto margen alrededor, ya que se mostrará en el centro de la pantalla, y la plataforma VoltBuilder la recortará para asegurar que se muestra de manera correcta en cualquier dispositivo y orientación.

Crear fichero de configuración «config.xml»

Primero deberemos crear el archivo «config.xml» en el directorio raiz de la aplicación. A continuación se muestra un ejemplo básico (puedes cambiar el nombre, la descripción, el icono y la pantalla de bienvenida a tu gusto):

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.fernandoruizrico.clicker" xmlns="http://www.w3.org/ns/widgets" version="1.0.1">
  <name>Cookie Clicker</name>
  <description>Juego Cookie Clicker</description>

  <icon src="img/icono.png" />
  <splash src="img/pantalla-bienvenida.png" />

  <preference name="SplashScreenDelay" value="2000" />
  <preference name="AutoHideSplashScreen" value="true" />
  <preference name="AndroidWindowSplashScreenAnimatedIcon" value="img/pantalla-bienvenida.png" />
  <preference name="AndroidWindowSplashScreenBackground" value="#FFFFFF" />

  <plugin name="cordova-plugin-device" />
  <plugin name="cordova-plugin-splashscreen" />
  <plugin name="cordova-plugin-vibration" />

  <preference name="Orientation" value="portrait" /> 

  <access origin="*" />
</widget>

Comprimir la aplicación en formato «.zip»

La página web VoltBuilder necesita que le proporcionemos nuestra aplicación en formato ZIP. Por ello, deberemos comprimir toda nuestra aplicación en un solo fichero ZIP, que incluirá el fichero «config.xml», y todos los ficheros html, CSS y JavaScript. No importa el nombre que tenga el fichero comprimido.

Compilar la «.apk»

El último paso que deberemos seguir para obtener nuestra aplicación en formato «apk» será subir nuestro fichero «.zip» a la página web VoltBuilder. El proceso es muy sencillo:

  1. Acceder a la página de inicio de VoltBuilder: https://volt.build/
  2. Iniciar sesión (con tu cuenta de gmail por ejemplo) haciendo click en la opción «Login/Sign Up».
  3. Hacer click en la opción «Upload».
  4. Enviar nuestra aplicación arrastrando el fichero ZIP directamente al cuadro de «Android». También se puede hacer click sobre dicho cuadro y seleccionar nuestro fichero después.
  5. Una vez la aplicación se haya compilado, podremos descargar el fichero «.apk» generado a través de un código QR, y ya podremos instalarlo en nuestro propio móvil.

Cookie Clicker con HTML+CSS+Javascript (parte 5): Añadiendo icono y estilos

En esta parte vamos a añadir un icono al juego y aplicaremos los primeros estilos CSS. Esto nos permitirá personalizar el juego, haciéndolo visualmente más atractivo e interactivo, lo que ofrece una mejor experiencia para el jugador.

Icono de la aplicación

Puedes elegir cualquier imagen para el icono de tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificar el archivo «index.html»

Realizaremos las siguientes modificaciones sobre el fichero «index.html»:

  • Añadir un icono: El icono aparecerá en la pestaña del navegador, y posteriormente también lo utilizaremos como icono de aplicación cuando instalemos el fichero «apk» en nuestros dispositivos móviles. Utilizaremos la etiqueta <link> para enlazar el archivo de imagen.
  • Fichero con estilos CSS: Usamos un archivo externo con código CSS («style.css») para aplicar estilos a la página.
  • Clases CSS: Añadiremos las correspondientes clases para aplicar estilos específicos a cada caja. Utilizaremos el atributo class sobre cada bloque div:
    • caja-galleta: Caja que contiene la galleta sobre la que hacemos click para incrementar el contador.
    • caja-mejora: Cajas que activan cada una de las mejoras del juego.
    • caja-opciones: Caja que contendrá opciones como reiniciar el juego, o más adelante, exportar e importar el progreso.
<!DOCTYPE html>
<html lang="es">
<head>
    ...
    <link rel="icon" type="image/png" href="img/icono.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Cookie Clicker</h1>

    <div class="caja-galleta" onclick="incrementarContador()">
        ...
    </div>

    <div class="caja-mejora" onclick="comprarMejora('galletasExtra')">
        ...
    </div>
 
    <div class="caja-opciones">
        <button onclick="reiniciarJuego()">Reiniciar el juego</button>
    </div>
 
    ...
</body>

Archivo «style.css»

Crearemos el fichero «style.css» que contendrá todos los estilos que utilizaremos para personalizar nuestro juego:

  • Estilos básicos: Centramos el contenido, aplicamos una fuente legible y hacemos que el contador de galletas destaque.
  • Estilos avanzados: Añadiremos bordes, sombras, y efectos de clic para que las cajas sean más interactivas y agradables visualmente.
body {
  text-align: center; /* Centra el contenido horizontalmente */
  font-family: Arial, sans-serif; /* Fuente básica para mantener legibilidad */
}

#contador {
  color: #991919; /* Rojo oscuro para destacar el contador, simboliza "galletas acumuladas" */
  font-weight: bold; /* El texto en negrita ayuda a que sea más legible y destaque */
  font-size: 250%; /* Tamaño grande para captar la atención del usuario */
}

/* Agrupación de estilos compartidos para cajas de galleta, mejora y opciones */
.caja-galleta, .caja-mejora, .caja-opciones {
  border-radius: 10px; /* Consistencia visual en los bordes redondeados */
  box-shadow: 2px 2px 10px; /* Sombra para simular profundidad */
  padding: 10px; /* Espacio interno suficiente para evitar que el contenido quede pegado al borde */
  margin: 20px 10px; /* Espaciado que separa visualmente las cajas, sin sobrecargar el espacio */
}

.caja-galleta {
  border: 2px solid #7837d4; /* Borde morado, un color alegre que representa el clic principal del juego */
  cursor: pointer; /* Indica que es interactivo */
}

.caja-galleta:active {
  transform: scale(0.98); /* Efecto visual de que la caja está siendo presionada */
  box-shadow: 2px 2px 5px; /* Sombra más pequeña para dar sensación de "presión" */
}

.caja-mejora {
  border: 2px solid #d4af37; /* Borde dorado para simbolizar un "logro" o mejora premium */
  cursor: pointer; /* Interactivo */
}

.caja-mejora:active {
  transform: scale(0.98); /* Efecto de clic */
  box-shadow: 2px 2px 5px; /* Sombra reducida al hacer clic */
}

.caja-opciones {
  border: 2px solid #d45e37; /* Borde naranja, un color cálido para representar acciones de configuración */
  padding: 20px; /* Mayor espacio interno para acomodar los botones y opciones de manera cómoda */
}

Cookie Clicker con HTML+CSS+Javascript (parte 4): Reiniciando el progreso del juego

En esta parte aprenderemos a reiniciar el progreso del juego. Esto permitirá que el jugador borre todo su progreso y comience desde cero si lo desea. Este enfoque enseña cómo manipular el almacenamiento local del navegador y cómo interactuar con el usuario mediante ventanas de confirmación.

Modificar el archivo «index.html»

Vamos a agregar un botón en la página que le dará al jugador la opción de reiniciar su juego. Cuando el jugador haga clic en el botón, se ejecutará la función reiniciarJuego():

...
</body>
    ...

    <div>
        <button onclick="reiniciarJuego()">Reiniciar el juego</button>
    </div>

    ...
</body>
</html>

Modificar el archivo «script.js»

Añadiremos una nueva función JavaScript que agrupará el código que se debe ejecutar cuando el usuario desee reiniciar el juego:

  • Función reiniciarJuego(): Esta función se ejecuta cuando el jugador hace clic en el botón de reiniciar. Primero, se le pregunta al jugador si realmente quiere reiniciar (usando confirm()). Si el jugador acepta, la función borra el progreso guardado en localStorage y recarga la página:
...

// Función para reiniciar el juego
function reiniciarJuego() {
    // Pregunta al usuario si realmente quiere reiniciar, y si dice que sí, borra el progreso y reinicia la página
    if (confirm("¿Estás seguro de borrar todo el progreso? (Esto no se puede deshacer)")) {
        localStorage.removeItem('juego');  // Elimina el progreso guardado
        location.reload();  // Recarga la página
    }
}

Cookie Clicker con HTML+CSS+Javascript (parte 3): Guardando el progreso

En esta parte aprenderemos a guardar el progreso del juego usando la memoria del navegador, para que el jugador no pierda su avance cuando cierre la página. Veremos cómo utilizar el almacenamiento local para almacenar cualquier tipo de información, de forma que podamos recuperarla después de actualizar o cerrar nuestra página, o incluso después de haber cerrado el navegador.

¿Qué es localStorage?

localStorage es una pequeña «libreta virtual» donde podemos guardar información directamente en el navegador del usuario. A diferencia de la memoria temporal (que se pierde al cerrar la página), los datos guardados en localStorage persisten incluso después de cerrar el navegador o apagar el ordenador.

¿Por qué usar localStorage?

En un juego como Cookie Clicker, queremos que el progreso del usuario (por ejemplo, cuántas galletas ha acumulado o cuántos ayudantes tiene) se mantenga aunque cierre el navegador. localStorage nos permite almacenar este tipo de información de manera sencilla.

¿Cómo funciona localStorage?

localStorage solo guarda datos en formato de texto. Para almacenar datos complejos (como un objeto con el estado del juego), usamos el formato JSON, convirtiendo nuestros datos a texto y viceversa con dos sencillas funciones:

  • JSON.stringify(): Convierte datos complejos a texto.
  • JSON.parse(): Convierte ese texto de vuelta a datos.

¿Qué es es JSON?

JSON es un formato utilizado para almacenar y enviar datos. Su estructura es muy sencilla y está basada en pares clave-valor:

  • Claves: Son los nombres de los datos (por ejemplo, «galletas»).
  • Valores: Son los datos asociados a cada clave (por ejemplo, 200).

Usamos JSON para convertir objetos complejos en cadenas de texto que pueden ser almacenadas en localStorage. Luego, podemos convertirlos de vuelta a objetos que podamos utilizar dentro del código.

Modificar el archivo «script.js»

Utilizando las siguientes funciones podremos guardar y recuperar la cantidad de galletas acumuladas y las mejoras o logros conseguidos durante el juego:

  • Función guardarProgreso(): Esta función guarda los datos del juego en el almacenamiento local del navegador usando localStorage. Los datos se convierten en formato JSON para que el navegador pueda almacenarlos como texto.
  • Función cargarProgreso(): Al iniciar el juego, esta función carga los datos guardados desde localStorage, conviertiendo la cadena JSON en un objeto y verificando que los datos sean correctos antes de usarlos.
...

// Función para comprar una mejora
// "mejora" es el objeto que representa la mejora que el jugador intenta comprar
function comprarMejora(nombreMejora) {
    const mejora = juego.mejoras[nombreMejora];
    if (juego.galletas >= mejora.precio) {  // Verifica si el jugador tiene suficientes galletas
        ...
        guardarProgreso();  // Guarda el progreso después de la compra
    } 
    ...
}

// Función para incrementar el contador de galletas cuando el jugador hace clic
function incrementarContador() {
    ...
    guardarProgreso();  // Guarda el progreso en la memoria del navegador para no perder las galletas conseguidas
}

// Función para guardar el progreso del juego
function guardarProgreso() {
    // Genera una cadena de texto cont todos los datos del juego y lo guarda en el navegador.
    localStorage.setItem('juego', JSON.stringify(juego));

    // Después de guardar, actualiza el progreso visualmente
    mostrarProgreso();  
}

// Función para cargar el progreso guardado
function cargarProgreso() {
    // Recupera los datos del juego guardados previamente
    let juegoGuardado = localStorage.getItem('juego');

    // Si el jugador ha guardado su progreso previamente, lo recuperamos y lo cargamos
    if (juegoGuardado) {
        juegoGuardado = JSON.parse(juegoGuardado);  // Convierte la cadena JSON a un objeto

        // Comprueba si los datos guardados previamente son correctos
        if (datosCorrectos(juegoGuardado)) {
            juego = juegoGuardado;  // Recupera los datos guardados y actualiza el estado del juego
        } else {
            guardarProgreso();  // Si los datos son incorrectos, guarda los datos actuales
        }
        mostrarProgreso();  // Actualiza visualmente el progreso
    }
}

// Función para inicializar el juego
function inicializar() {
    cargarProgreso();  // Carga el progreso guardado al iniciar el juego
}

inicializar();  // Llama a la función para iniciar el juego

Añadir la función de verificación en «utils.js»

A medida que vayamos actualizando la funcionalidad del juego, podrían haber algunas inconsistencias entre los datos guardados y los que tenga la nueva versión de nuestro juego. Por ello necesitaremos una función que compruebe si podemos recuperar la información guardada para utilizarla directamente:

  • Función datosCorrectos(datos): Esta función verifica que los datos guardados tienen las mismas propiedades que el objeto juego. De esta forma, si hay diferencias o los datos están corruptos, podremos evitar cargar datos incorrectos.
...

// Función para comprobar si los datos recibidos como parámetro tienen las mismas propiedades que el objeto 'juego'
function datosCorrectos(datos) {
    // Si no es un objeto o es null, devuelve false.
    if (typeof datos !== 'object' || datos === null) return false;

    // Obtener las claves (propiedades) de 'datos' y 'juego'.
    const keys1 = Object.keys(datos);
    const keys2 = Object.keys(juego);

    // Si el número de propiedades es distinto, devuelve false.
    if (keys1.length !== keys2.length) return false;

    // Comprobar que todas las claves de 'datos' están también en 'juego'.
    return keys1.every(key => keys2.includes(key));
}

Cookie Clicker con HTML+CSS+Javascript (parte 2): Galletas extra por cada click

En esta unidad vamos a explicar cómo agregar una mejora al Cookie Clicker que permita ganar galletas extra con cada clic.

Imagen para activar la mejora

Al hacer click sobre esta imagen activarás la mejora de galletas extra. 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»

Primero añadiremos una nueva imagen que represente una mejora que podremos comprar dentro de nuestro juego. Cuando el usuario haga clic en esta imagen, podrá comprar una mejora que le dará galletas extra por cada clic:

  • Para poder representar la mejora, utilizaremos una imagen adicional que meteremos dentro de un bloque div.
  • Al hacer clic sobre el bloque div, el jugador podrá adquirir la mejora si tiene suficientes galletas. Este proceso se llevará a cabo en la función comprarMejora('galletasExtra'), que crearemos a continuación en un fichero JavaScript.
...
<body>
    ...
    <div onclick="comprarMejora('galletasExtra')">
      <img src="img/muchas-galletas.png" width="125">
      <div id="textoGalletasExtra"></div>
    </div>

    <script src="variables.js"></script>
    <script src="utils.js"></script>
    <script src="script.js"></script>
</body>
</html>

Modificaciones del fichero «variables.js»

En este archivo, añadiremos una propiedad nueva dentro del objeto juego para almacenar las mejoras del juego, incluyendo la cantidad de galletas extra que el jugador ganará con cada clic y el precio de esta mejora:

  • La mejora tiene un precio (5 galletas) y un contador que muestra cuántas veces ha sido comprada.
  • Dentro de juego, ahora tenemos una sección llamada mejoras, que incluye la mejora de galletas extra.
// 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: {
        galletasExtra: { cantidad: 0, precio: 100, descripcion: "Galletas extra por cada click" }, // Mejora de galletas extras por click
    }
}

Fichero «utils.js»

Este archivo contendrá funciones auxiliares, como una que muestra mensajes al jugador. Por ejemplo, cuando compra una mejora o cuando no tiene suficientes galletas:

  • mostrarMensaje(mensaje) muestra una ventana emergente con un mensaje. Es útil para informar al jugador si ha comprado una mejora o si no tiene suficientes galletas.
// Función para mostrar mensajes por pantalla, para avisar por ejemplo de las mejoras adquiridas
function mostrarMensaje(mensaje) {
    alert(mensaje);
}

Modificaciones del fichero «script.js»

Aquí vamos a modificar las funciones que actualizan el contador de galletas y que permiten comprar mejoras:

  • Función incrementarContador(): Ahora esta función no solo aumentará el contador de galletas en 1, sino que también sumará las galletas extra si el jugador ha comprado la mejora.
  • Función comprarMejora(nombreMejora): Esta función permite al jugador comprar mejoras. Verifica si tiene suficientes galletas y, si es así, descuenta el precio, aumenta la cantidad de la mejora y muestra un mensaje de confirmación.
...

// Función para incrementar el contador de galletas cuando el jugador hace clic en la galleta
function incrementarContador() {
    juego.galletas++;  // Aumenta la cantidad de galletas
    juego.galletas += juego.mejoras.galletasExtra.cantidad;  // Suma las galletas extra si se ha comprado la mejora    
    mostrarProgreso();  // Muestra la cantidad de galletas
}

// Función para comprar una mejora
// "mejora" es el objeto que representa la mejora que el jugador intenta comprar
function comprarMejora(nombreMejora) {
    const mejora = juego.mejoras[nombreMejora];
    if (juego.galletas >= mejora.precio) {  // Verifica si el jugador tiene suficientes galletas
        juego.galletas -= mejora.precio;  // Resta el precio de las galletas
        mejora.cantidad++;  // Aumenta la cantidad de la mejora
        mostrarMensaje(`¡Tienes ${mejora.cantidad} x ${mejora.descripcion}!`);  // Muestra un mensaje de confirmación
        mostrarProgreso();  // Muestra la cantidad de galletas después de pagar la mejora
    } else {
        mostrarMensaje("¡No tienes suficientes galletas!", 'warning');  // Si no tiene galletas suficientes, muestra una advertencia
    }
}

Cookie Clicker con HTML+CSS+Javascript (parte 1): Contando galletas

En esta parte implementaremos la funcionalidad básica del juego, es decir, un contador que acumule galletas a media que vayamos haciendo clicks.

La galleta

Puedes elegir cualquier imagen para tu juego. A continuación te proporcionamos una de ejemplo:

Como iremos utilizando más imágenes a medida que vayamos añadiendo funcionalidad a nuestro juego, lo ideal es crear una carpeta img que contendrá todas las imágenes, y así las mantendremos agrupadas y separadas del resto de ficheros.

Estructura del archivo «index.html»

El archivo HTML define cómo se verá el juego en el navegador. Aquí vamos a crear una página con un título, una imagen de una galleta, y un contador que muestra cuántas veces se ha hecho clic en la galleta:

  • Primero incluiremos las etiquetas básicas de HTML. Por ejemplo, utilizaremos <!DOCTYPE html> para especificar que estamos usando HTML5.
  • En la sección <head>:
    • Seleccionaremos el idioma de la página.
    • El juego tendrá un título (que aparecerá en la pestaña del navegador).
    • Especificaremos que nuestra aplicación será adaptable a diferentes tamaños de pantalla.
  • En la sección <body>:
    • Colocaremos el título visible «Cookie Clicker».
    • Añadiremos la imagen de la galleta sobre la que el usuario puede hacer clic.
    • Por último definiremos un div donde aparecerá el contador de clics.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Clicker</title>
</head>
<body>
    <h1>Cookie Clicker</h1>

    <div onclick="incrementarContador()">
        <img src="img/galleta.png" alt="Galleta" width="200">
        <div id="contador">0</div>
    </div>

    <script src="variables.js"></script> 
    <script src="script.js"></script>
</body>
</html>

Código JavaScript «variables.js»

Este archivo contiene una variable llamada juego, que almacena la información relacionada con el estado del juego, como el número de galletas que ha conseguido el jugador.

Definimos un objeto llamado juego, que contiene las propiedades del juego. Aquí, solo vamos a almacenar el número de galletas que el jugador ha ganado.

// Objeto que almacena toda la información relativa al progreso y configuración del juego
let juego = {
    galletas: 0, // Cantidad total de galletas conseguidas
}

Código JavaScript «script.js»

Este archivo maneja la lógica del juego. Cada vez que el jugador hace clic en la galleta, el número de galletas aumenta y se actualiza el contador en la pantalla:

  • Función mostrarProgreso(): Esta función actualiza el título del navegador para mostrar cuántas galletas se han conseguido. Además, cambia el texto en el contador de la página para reflejar la cantidad actualizada.
  • Función incrementarContador(): Esta función es llamada cada vez que se hace clic en la galleta. Incrementa el número de galletas en el objeto juego y llama a mostrarProgreso() para actualizar el resultado en la ventana del navegador.
// Función para mostrar al usuario los progresos actualizados a medida que van cambiando los datos
function mostrarProgreso() {
    // Cambia el título de la pestaña del navegador para mostrar el número de galletas
    document.title = `Cookie Clicker - ${juego.galletas} galletas`;

    // Actualiza el contador de galletas en pantalla
    document.getElementById('contador').textContent = juego.galletas.toLocaleString();
}

// Función para incrementar el contador de galletas cuando el jugador hace clic en la galleta
function incrementarContador() {
    juego.galletas++;  // Aumenta la cantidad de galletas
    mostrarProgreso();  // Muestra la cantidad de galletas
}

Cookie Clicker con HTML+CSS+Javascript

En las siguientes unidades aprenderemos a desarrollar nuestra propia versión del popular juego Cookie Clicker, utilizando simplemente tecnologías web. Además, podremos compilar nuestra aplicación en formato «apk» para instalarla en cualquier dispositivo móvil.

Contando galletas

Galletas extra por cada click

Guardando el progreso

Reiniciando el progreso del juego

Añadiendo icono y estilos

Compilando la aplicación para móvil

Auto clickers

Comprando abuelas

Comprando granjas

Comprando fábricas

El resultado

Puedes probar el resultado en este enlace.

Manual básico de Scikit-learn

Introducción a Scikit-learn

Scikit-learn es una de las librerías más populares utilizadas en Python para el aprendizaje automático (machine learning). Fue desarrollada como parte del ecosistema científico de Python y se ha convertido en una herramienta fundamental para investigadores, analistas de datos y desarrolladores que buscan aplicar algoritmos de aprendizaje automático a problemas del mundo real.

¿Qué es Scikit-learn?

Scikit-learn es una librería de código abierto construida sobre otras librerías fundamentales de Python como NumPy, SciPy y matplotlib. Ofrece una amplia gama de herramientas para abordar la resolución de problemas mediante aprendizaje automático y análisis de datos. Incluye algoritmos de clasificación, regresión, clustering (agrupamiento), reducción de dimensionalidad, selección de modelos, y preprocesamiento de datos, tales como:

  1. Clasificación: Asignar etiquetas a datos de entrada.
    • Detección de spam: Clasificar correos electrónicos como spam o no spam.
    • Reconocimiento de imágenes: Identificar objetos en imágenes (por ejemplo, reconocimiento facial).
    • Diagnóstico médico: Clasificar si un paciente tiene o no una enfermedad basada en datos clínicos.
  2. Regresión: Predecir valores continuos.
    • Predicción de precios: Estimar el precio de viviendas en base a características como el tamaño y la ubicación.
    • Análisis de ventas: Predecir las ventas futuras basadas en datos históricos.
  3. Clustering (agrupamiento): Agrupar datos en categorías no etiquetadas.
    • Segmentación de clientes: Agrupar clientes en segmentos basados en su comportamiento de compra.
    • Compresión de datos: Reducción de la dimensionalidad de los datos para visualizar conjuntos complejos.
  4. Reducción de dimensionalidad: Reducir el número de características en un conjunto de datos para facilitar la visualización o mejorar la eficiencia de otros algoritmos.
    • Análisis de Componentes Principales (PCA): Simplificar datos de alta dimensión para exploración visual.
  5. Selección de modelos y optimización: Elegir el mejor modelo y ajustar los hiperparámetros para mejorar el rendimiento.

¿Por qué Scikit-learn es tan popular?

Scikit-learn es muy popular por varias razones que lo convierten en una herramienta esencial para cualquier persona involucrada en el análisis de datos o el desarrollo de modelos predictivos:

  1. Accesibilidad y simplicidad: Una de las principales ventajas de scikit-learn es su simplicidad, incluso para aquellos que son nuevos en el campo del aprendizaje automático. Gracias a su API consistente, es fácil aprender a usar un algoritmo y luego aplicar los conocimientos a otros sin necesidad de aprender nuevas sintaxis complejas.
  2. Versatilidad y flexibilidad: Puede utilizarse en la resolución de una amplia gama de problemas, desde algunos muy simples hasta otros extremadamente complejos. Esto hace que scikit-learn sea adecuado para aplicaciones en diversos campos, como la medicina, finanzas, marketing, y tecnología, entre otros.
  3. Eficiencia y rapidez: Scikit-learn está altamente optimizado para funcionar con grandes volúmenes de datos y realizar cálculos complejos rápidamente, lo que es crucial en entornos empresariales donde el tiempo es esencial.
  4. Facilita la experimentación y prototipado rápido: Scikit-learn permite a los usuarios probar rápidamente diferentes algoritmos y técnicas, ver sus resultados y ajustar modelos sin necesidad de un conocimiento profundo de la matemática detrás de cada algoritmo. Esto acelera el proceso de descubrimiento y la innovación.
  5. Compatibilidad con entornos de producción: Los modelos desarrollados con scikit-learn se pueden integrar fácilmente en aplicaciones en producción, lo que permite trasladar las ideas y prototipos desde el laboratorio de datos hasta el uso real en aplicaciones y servicios.
  6. Aprendizaje reforzado por la comunidad: La comunidad de scikit-learn no solo proporciona soporte continuo, sino que también contribuye con mejoras regulares, manteniendo la librería actualizada con las últimas investigaciones y avances en el campo del aprendizaje automático.
  7. Integración con herramientas de visualización: Aunque no es una librería de visualización, scikit-learn se integra bien con matplotlib y otras herramientas para crear gráficos que ayudan a interpretar los resultados de los modelos, lo cual es clave para la toma de decisiones basada en datos.

¿Qué nos aporta Scikit-learn?

  1. Amplia gama de algoritmos y funcionalidades: Incluye desde algoritmos básicos como la regresión lineal hasta técnicas avanzadas como bosques aleatorios y métodos de boosting, lo que permite abordar prácticamente cualquier problema con una sola librería.
  2. Preprocesamiento de datos: Herramientas para la limpieza, normalización, escalado y transformación de datos, permitiendo preparar los datos para el modelado de manera sencilla.
  3. Algoritmos específicos de aprendizaje automático: Scikit-learn incluye una gran variedad de algoritmos para tareas de clasificación, regresión y clustering, como Regresión Lineal, Máquinas de Soporte Vectorial (SVM), K-Means, Bosques Aleatorios, y muchos más.
  4. Interoperabilidad con el ecosistema de python: Scikit-learn se integra perfectamente con otras librerías como pandas (para manipulación de datos), NumPy (para cálculos numéricos), y matplotlib (para visualización de datos). Esto facilita la creación de flujos de trabajo completos y simplifica el desarrollo y la implementación de modelos.
  5. Evaluación y mejora continua: Ofrece herramientas robustas para evaluar la precisión y la validez de los modelos mediante métodos como la validación cruzada, matrices de confusión, y métricas de clasificación como precisión, recall y F1-score.
  6. Optimización de modelos: Herramientas como Grid Search y Random Search permiten ajustar los hiperparámetros de los modelos de manera efectiva, mejorando la precisión y el rendimiento del modelo sin necesidad de realizar ajustes manuales tediosos.
  7. Interfaz consistente: Todos los algoritmos comparten una interfaz coherente y simple, lo que facilita cambiar entre diferentes modelos con muy poco esfuerzo.
  8. Documentación actualizada: Scikit-learn cuenta con una documentación extensa, clara y llena de ejemplos prácticos. Además, tiene una gran comunidad de usuarios y desarrolladores, lo que facilita encontrar ayuda, tutoriales y soluciones a problemas comunes.

Instalación de Scikit-learn

Podemos instalar scikit-learn fácilmente utilizando el gestor de paquetes pip, que viene instalado con Python. Basta con abrir el terminal (o símbolo del sistema en Windows) y escribir el siguiente comando para instalar scikit-learn junto con sus dependencias:

pip install scikit-learn

Importar y comenzar a usar Scikit-learn

Scikit-learn se usa a través de sus módulos específicos, que se importan según las necesidades específicas de cada proyecto. Algunas de las funcionalidades más comunes son las siguientes:

  • Preprocesamiento de datos: Para escalar, normalizar y transformar datos.
  • Modelos de aprendizaje supervisado: Para tareas de regresión y clasificación.
  • Modelos de aprendizaje no supervisado: Para clustering y reducción de dimensionalidad.

Ejemplo de importación

# Importar módulos de preprocesamiento
from sklearn.preprocessing import StandardScaler, LabelEncoder

# Importar modelos de aprendizaje supervisado
from sklearn.linear_model import LinearRegression
from sklearn.svm import SVC

# Importar modelos de aprendizaje no supervisado
from sklearn.cluster import KMeans
from sklearn.decomposition import PCA

# Importar funciones de evaluación
from sklearn.metrics import accuracy_score, confusion_matrix

Jupyter Notebook y Google Colab

Para una experiencia más interactiva y visual, se pueden usar entornos como Jupyter Notebook o Google Colab:

  • Google Colab: Es un entorno basado en web que no requiere instalación y ofrece GPU gratuita para acelerar el entrenamiento de modelos. Puedes acceder a él a través de Google Colab.
  • Jupyter Notebook: Puedes instalarlo con pip usando pip install jupyterlab y luego ejecutarlo con el comando jupyter notebook. Es ideal para experimentar con código y visualizar resultados en tiempo real.

Fundamentos de Scikit-learn

Scikit-learn facilita el trabajo con modelos predictivos y de aprendizaje automático proporcionando una serie de herramientas para:

  1. Cargar y preparar datos: scikit-learn no tiene herramientas propias para la carga de datos desde archivos como CSV, Excel o bases de datos, pero se complementa perfectamente con otras librerías como pandas y numpy que permiten manipular datos fácilmente. Por lo tanto, uno de los primeros pasos en cualquier proyecto de machine learning es cargar los datos con pandas.
  2. Preprocesamiento de datos: Este es un paso esencial. Los datos crudos generalmente no están listos para usarse en un modelo. Pueden tener valores faltantes, variables categóricas que necesitan ser convertidas en números, o los datos pueden necesitar ser escalados para mejorar la precisión del modelo. Scikit-learn tiene una variedad de transformadores para realizar estos ajustes.
  3. Entrenamiento de modelos: Una vez los datos están listos, puedes entrenar un modelo. Esto implica usar un algoritmo de aprendizaje automático para ajustar el modelo a tus datos. Algunos ejemplos de algoritmos son la regresión lineal para predicción de valores numéricos y las máquinas de soporte vectorial (SVM) para clasificación.
  4. Evaluación de modelos: Después de entrenar un modelo, es fundamental medir su rendimiento. Scikit-learn proporciona diversas métricas para evaluar la precisión, como la matriz de confusión, precisión, recall, entre otras.
  5. Predicciones: Finalmente, puedes usar tu modelo entrenado para hacer predicciones sobre nuevos datos que no se usaron durante el entrenamiento. Esto es útil en aplicaciones como predicciones de ventas, clasificación de correos como spam o no spam, etc.

Preprocesamiento de datos

El preprocesamiento de datos consiste en preparar tus datos para que un modelo de aprendizaje automático los pueda usar correctamente. Esto incluye tareas como escalar los datos (ajustar la escala de las variables para que tengan la misma importancia), transformar datos categóricos en numéricos, o vectorizar texto.

Ejemplo básico: Escalar datos numéricos

Imagina que tienes un conjunto de datos con varias características numéricas, pero estas están en diferentes rangos. Por ejemplo, una columna puede tener valores entre 0 y 1000, mientras que otra tiene valores entre 0 y 1. Esto puede confundir a muchos modelos de aprendizaje automático porque algunas características parecen tener más peso simplemente porque sus números son más grandes. Para evitar esto, se utilizan técnicas de escalado.

En el ejemplo que se muestra a continuación, usamos StandardScaler de scikit-learn para estandarizar los datos de modo que tengan una media de 0 y una desviación estándar de 1:

from sklearn.preprocessing import StandardScaler
import numpy as np

# Datos de ejemplo: una matriz con tres filas y tres columnas
X = np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]])

# Crear el escalador
scaler = StandardScaler()

# Ajustar (fit) el escalador y transformar (transform) los datos
X_scaled = scaler.fit_transform(X)

print(X_scaled)

Explicación del código:

  1. StandardScaler() crea un objeto escalador que se usará para ajustar y transformar los datos.
  2. fit_transform(X) ajusta el escalador a los datos y luego transforma esos datos, es decir, calcula la media y desviación estándar de cada columna y luego aplica la transformación para escalar los valores.

El escalado de datos es particularmente útil en algoritmos como regresión lineal, SVM y redes neuronales, donde los valores numéricos deben estar en un rango similar para un mejor rendimiento.

Algoritmos de aprendizaje supervisado

Los algoritmos de aprendizaje supervisado son aquellos que aprenden a partir de datos etiquetados, es decir, datos en los que sabemos cuál es la salida correcta (etiqueta). Uno de los algoritmos más simples es la regresión lineal, que predice un valor numérico basado en las características de entrada.

Ejemplo: Regresión lineal

La regresión lineal trata de ajustar una línea recta (o un plano en dimensiones superiores) que describa la relación entre las variables independientes (X) y la variable dependiente (Y).

from sklearn.linear_model import LinearRegression
import numpy as np

# Datos de ejemplo: X son las variables independientes (entrada) y y es la variable dependiente (salida)
X = np.array([[1], [2], [3], [4]])  # Cada número es una característica, en este caso un solo valor por observación
y = np.array([3, 6, 9, 12])  # Resultados que queremos aprender a predecir

# Crear el modelo de regresión lineal
model = LinearRegression()

# Entrenar el modelo con los datos
model.fit(X, y)

# Predecir un nuevo valor con el modelo entrenado
prediction = model.predict([[5]])
print(prediction)  # Salida esperada: [15]

Explicación del código:

  1. LinearRegression() crea un modelo de regresión lineal.
  2. model.fit(X, y) entrena el modelo con los datos de entrada X y los resultados conocidos y.
  3. model.predict([[5]]) usa el modelo entrenado para predecir el resultado cuando X = 5.

Este ejemplo muestra un caso simple, pero la regresión lineal se usa ampliamente en aplicaciones como la predicción de ventas, la valoración de bienes inmuebles o incluso en la ciencia para encontrar relaciones entre variables.

Aplicación real: Predicción de precios de casas

Imaginemos que tenemos un conjunto de datos de casas con características como el tamaño, número de habitaciones, etc., y queremos predecir el precio de una casa nueva basada en esas características. Para mejorar la precisión, primero escalamos los datos usando StandardScaler.

from sklearn.preprocessing import StandardScaler
from sklearn.linear_model import LinearRegression
import pandas as pd

# Supongamos que tenemos un archivo CSV con datos sobre casas
data = pd.read_csv('casas.csv')
X = data.drop('Precio', axis=1)  # Variables independientes (tamaño, habitaciones, etc.)
y = data['Precio']  # Variable dependiente (precio)

# Escalar los datos
scaler = StandardScaler()
X_scaled = scaler.fit_transform(X)

# Crear y entrenar el modelo
model = LinearRegression()
model.fit(X_scaled, y)

# Predecir el precio de una casa nueva con características específicas
nueva_casa = [[200, 3, 2, 1]]  # Tamaño de 200 m², 3 habitaciones, 2 baños, 1 garaje
nueva_casa_scaled = scaler.transform(nueva_casa)
precio_predicho = model.predict(nueva_casa_scaled)

print(precio_predicho)

Explicación del código:

  1. data = pd.read_csv('casas.csv'): Carga los datos desde un archivo CSV.
  2. X = data.drop('Precio', axis=1) y y = data['Precio']: Separa las características (X) del valor que queremos predecir (y).
  3. scaler.fit_transform(X): Escala los datos para que todas las características estén en un rango similar.
  4. model.fit(X_scaled, y): Entrena el modelo usando los datos escalados.
  5. model.predict(): Usa el modelo entrenado para hacer una predicción.

Aprendizaje supervisado para clasificación

La clasificación es otra tarea importante del aprendizaje supervisado, donde el objetivo es asignar etiquetas a datos de entrada. Un ejemplo clásico es clasificar correos electrónicos como spam o no spam.

Ejemplo: Clasificación de texto (spam vs no spam)

Este ejemplo muestra cómo usar TfidfVectorizer para convertir texto en datos numéricos y SVC (máquinas de soporte vectorial) para entrenar un modelo de clasificación.

from sklearn.feature_extraction.text import TfidfVectorizer
from sklearn.svm import SVC
from sklearn.pipeline import make_pipeline
import pandas as pd

# Datos de ejemplo con textos y etiquetas (1 para spam, 0 para no spam)
data = pd.DataFrame({
    'texto': ['Hola, ¿cómo estás?', 'Gana dinero rápido', 'Te extrañamos', 'Oferta exclusiva para ti'],
    'spam': [0, 1, 0, 1]
})

# Crear un pipeline con TfidfVectorizer (para vectorizar texto) y SVC (para clasificar)
model = make_pipeline(TfidfVectorizer(), SVC(probability=True))

# Entrenar el modelo con los datos
model.fit(data['texto'], data['spam'])

# Predecir si un nuevo mensaje es spam
nuevo_mensaje = '¡Oferta exclusiva para ganar dinero!'
probabilidad = model.predict_proba([nuevo_mensaje])[0][1] * 100
print(f'Probabilidad de spam: {probabilidad}%')

Explicación del código:

  1. TfidfVectorizer() convierte texto en una representación numérica que el modelo puede usar. Calcula una medida llamada «TF-IDF» que refleja la importancia de las palabras en el texto.
  2. SVC() es un modelo de clasificación que aprende a separar las clases (spam y no spam) a partir de los datos de entrenamiento.
  3. make_pipeline() crea un flujo de trabajo que primero vectoriza el texto y luego aplica el modelo de clasificación.

Aprendizaje no supervisado

En el aprendizaje no supervisado, los modelos tratan de encontrar patrones en datos que no tienen etiquetas conocidas. Un algoritmo común es k-Nearest Neighbors (k-NN), que puede usarse para sugerir recetas basadas en ingredientes disponibles.

Ejemplo: k-Nearest Neighbors (k-NN) para sugerir recetas

El siguiente ejemplo muestra cómo usar k-NN para sugerir recetas similares basadas en los ingredientes proporcionados.

from sklearn.neighbors import NearestNeighbors
from sklearn.preprocessing import MultiLabelBinarizer
import pandas as pd

# Datos de ejemplo: lista de recetas y sus ingredientes
data = pd.DataFrame({
    'receta': ['Pasta con tomate', 'Ensalada de pollo', 'Tacos de pescado'],
    'ingredientes': ['pasta,tomate', 'lechuga,pollo', 'pescado,tortilla']
})

# Convertir los ingredientes en una representación binaria
mlb = MultiLabelBinarizer()
X = mlb.fit_transform(data['ingredientes'].apply(lambda x: x.split(',')))

# Crear y entrenar el modelo k-NN
model = NearestNeighbors(n_neighbors=2, metric='jaccard')
model.fit(X)

# Sugerir recetas basadas en los ingredientes proporcionados
ingredientes = ['tomate', 'pasta']
ingredientes_vector = mlb.transform([ingredientes])
distancias, indices = model.kneighbors(ingredientes_vector, n_neighbors=2)

# Mostrar recetas sugeridas
for idx in indices[0]:
    print(data.iloc[idx]['receta'])

Explicación del código:

  1. MultiLabelBinarizer() convierte listas de ingredientes en vectores binarios donde cada posición indica si un ingrediente está presente.
  2. NearestNeighbors() encuentra las recetas más cercanas a las dadas basándose en la similitud de ingredientes.
  3. kneighbors() busca las recetas más cercanas (vecinas) a los ingredientes proporcionados.

Uso de modelos de clasificación en aplicaciones más específicas

Los modelos de clasificación intentan predecir una etiqueta o clase para cada observación en los datos. Este tipo de problemas es común en una gran variedad de aplicaciones en campos más específicos. A través de los pasos de preparación de datos, preprocesamiento, entrenamiento y predicción, scikit-learn nos facilita el desarrollo de modelos que pueden ser usados en aplicaciones del mundo real, tales como:

  • Diagnóstico médico: Determinar si un paciente tiene una enfermedad en base a sus síntomas y análisis médicos.
  • Finanzas: Predecir si un cliente cumple las condiciones adecuadas para aprobar la concesión de un crédito.
  • Crowdfunding: Predecir si una campaña tendrá éxito en base a sus características.

A continuación vamos a detallar un ejemplo donde intentaremos predecir el éxito de campañas de crowdfunding. Así mostraremos cómo se puede utilizar un modelo de clasificación para resolver un problema práctico más concreto y específico.

Ejemplo: Predicción de éxito en campañas de crowdfunding

Contexto del problema: Imagina que tienes datos históricos de campañas de crowdfunding. Cada campaña tiene varias características (como la categoría del proyecto, el monto recaudado, la meta financiera, la duración de la campaña, etc.). El objetivo es entrenar un modelo que pueda predecir si una campaña tendrá éxito o no.

Paso 1: Preparación de los datos

El primer paso en cualquier problema de clasificación es preparar los datos de entrenamiento:

# Importar las bibliotecas necesarias
from sklearn.ensemble import RandomForestClassifier
import pandas as pd

# Supongamos que tenemos datos de campañas de crowdfunding
# Cada fila representa una campaña con sus características y si tuvo éxito (1) o no (0)
data = pd.DataFrame({
    'Categoría': ['Tecnología', 'Arte', 'Música'],
    'Meta Financiera': [5000, 3000, 8000],
    'Dinero Recaudado': [4000, 3500, 2000],
    'Duración (días)': [30, 40, 25],
    'Número de Patrocinadores': [20, 30, 10],
    'Éxito': [1, 1, 0]  # 1 indica que la campaña tuvo éxito, 0 indica que no tuvo éxito
})

# Mostrar los datos de ejemplo
print(data)

Explicación de los datos:

  • Categoría: La categoría a la que pertenece la campaña, como Tecnología, Arte o Música.
  • Meta Financiera: La cantidad de dinero que se espera recaudar.
  • Dinero Recaudado: El dinero que efectivamente se recaudó.
  • Duración (días): Los días que duró la campaña.
  • Número de Patrocinadores: El número de personas que contribuyeron a la campaña.
  • Éxito: Etiqueta que indica si la campaña tuvo éxito (1) o no (0).

Paso 2: Preprocesamiento de los datos

Antes de entrenar un modelo, necesitamos transformar las variables categóricas (en este caso, la categoría del proyecto) en un formato que los modelos puedan entender. Para esto, usamos get_dummies() que convierte las categorías en variables numéricas llamadas variables dummy:

# Convertir la variable categórica 'Categoría' en variables dummy
data = pd.get_dummies(data, columns=['Categoría'])

# Separar las características (X) y la variable objetivo (y)
X = data.drop('Éxito', axis=1)  # Características de entrada
y = data['Éxito']  # Variable de salida que queremos predecir

# Mostrar las nuevas características después de la transformación
print(X)

Explicación del preprocesamiento:

  • get_dummies() crea nuevas columnas para cada categoría. Por ejemplo, si la categoría es «Tecnología», se crea una columna Categoría_Tecnología con valores 1 (si es de esa categoría) o 0 (si no lo es).
  • X contiene las características que usaremos para predecir y y contiene las etiquetas de éxito (1) o fracaso (0).

Paso 3: Entrenamiento del modelo

En este ejemplo, usaremos un Random Forest Classifier (clasificador de bosque aleatorio), que es un modelo potente y versátil. Este algoritmo combina muchos árboles de decisión para mejorar la precisión y reducir el riesgo de sobreajuste.

# Crear y entrenar el modelo de bosque aleatorio
model = RandomForestClassifier(n_estimators=100, random_state=42)
model.fit(X, y)  # Entrenar el modelo con las características X y la variable objetivo y

Explicación del modelo:

  • RandomForestClassifier(n_estimators=100) crea un modelo de bosque aleatorio con 100 árboles de decisión. Cuantos más árboles, más robusto es el modelo, pero también se necesitará más tiempo para completar el entrenamiento.
  • model.fit(X, y) ajusta (entrena) el modelo a los datos, encontrando patrones que relacionan las características con la etiqueta de éxito o fracaso.

Paso 4: Predicción de un nuevo proyecto

Una vez que el modelo está entrenado, puedes usarlo para predecir la probabilidad de éxito de nuevas campañas. A continuación, mostramos cómo hacer una predicción para una nueva campaña:

# Crear un nuevo proyecto para predecir
nuevo_proyecto = pd.DataFrame({
    'Meta Financiera': [6000],
    'Dinero Recaudado': [4500],
    'Duración (días)': [35],
    'Número de Patrocinadores': [25],
    'Categoría_Arte': [0],
    'Categoría_Música': [0],
    'Categoría_Tecnología': [1]  # Esta campaña es de Tecnología
})

# Mostrar los datos del nuevo proyecto
print(nuevo_proyecto)

# Predecir la probabilidad de éxito del nuevo proyecto
probabilidad_exito = model.predict_proba(nuevo_proyecto)[0][1] * 100
print(f'Probabilidad de éxito: {probabilidad_exito:.2f}%')

Explicación de la predicción:

  • nuevo_proyecto contiene las características del nuevo proyecto. Observa que debe tener las mismas columnas que las características de entrenamiento (X).
  • model.predict_proba(nuevo_proyecto) devuelve la probabilidad de cada clase (0 o 1). [0][1] selecciona la probabilidad de que el proyecto sea exitoso (1).
  • Multiplicamos por 100 para convertir la probabilidad a un porcentaje.

Análisis de resultados y ajuste del modelo

Después de predecir, es fundamental analizar el rendimiento del modelo y ajustarlo si es necesario:

  1. Métricas de evaluación: Usar métricas como precisión, recall, f1-score, y matriz de confusión para evaluar la calidad de predicción del modelo. En problemas de negocio reales, un alto recall (identificar todas las campañas exitosas) puede ser más importante que la precisión.
  2. Ajuste de hiperparámetros: Experimentar con el número de árboles (n_estimators) o la profundidad máxima de cada árbol (max_depth) para mejorar el rendimiento.
  3. Validación cruzada: Usar técnicas como la validación cruzada para asegurar que el modelo no esté sobreajustado a los datos de entrenamiento y pueda generalizar bien a nuevos datos.

Conclusión

Scikit-learn se ha convertido en una herramienta muy popular y versátil dentro del campo del aprendizaje automático debido a su simplicidad, la amplitud de sus capacidades y su integración con el ecosistema de Python. Es la elección perfecta tanto para principiantes como para expertos que buscan aplicar machine learning de manera efectiva en sus proyectos. Con scikit-learn, es posible abordar problemas complejos de predicción, clasificación y análisis de datos con una curva de aprendizaje moderada, proporcionando resultados precisos y valiosos que facilitan la toma de decisiones en el mundo real.