Blog

Inteligencia artificial

¿Cómo ponerte al día?

Canales de YouTube recomendados

  • Jon Hernández. Divulgación semanal sobre IA. Publica vídeos nuevos cada lunes por la noche. Proporciona actualizaciones constantes sobre tecnologías emergentes, combinando noticias y explicaciones accesibles.
  • Carlos Santana (Dot CSV). Explicaciones profundas sobre IA y aprendizaje automático, presentadas de manera clara y amena. Uno de los divulgadores en español más reconocidos de IA. Mezcla precisión técnica con narrativa accesible, ideal para quienes buscan profundidad sin perder claridad.
  • Xavier Mitjana. Tutoriales que conectan IA con creatividad y producción, mostrando aplicaciones prácticas e inspiradoras. Orientado a quienes desean integrar IA en procesos creativos o narrativos, como cine, diseño o automatización visual.
  • Alejavi Rivera. IA explicada de forma práctica, directa y con casos reales de uso. Combina teoría con aplicación concreta, ideal para emprendedores o quienes buscan resultados inmediatos y efectivos con IA.
  • Javi Galué. Herramientas, estrategias, hacks y formas de monetizar usando IA. Muy orientado a la productividad, la creatividad aplicada y la generación de ingresos reales mediante IA.
  • Elena Santos (ChicaGeek). Consejos tecnológicos prácticos (apps, trucos, gadgets y tutoriales) pensados para facilitar la vida digital. Muy accesible y útil para el día a día; ideal para público general que busca mejorar su uso de tecnología sin tecnicismos.

Comparación de los canales recomendados:

CanalEnfoque principalA destacar
Jon HernándezActualizaciones semanales de IAFrecuencia constante; enfoque claro y accesible
Carlos Santana (Dot CSV)IA explicada en profundidadEquilibrio entre rigor técnico y divulgación clara
Xavier MitjanaIA aplicada a creatividad y negociosEnfoque profesional, creativo y muy visual
Alejavi RiveraCasos prácticos de IAAplicabilidad directa; visión de marketing digital
Javi GaluéHacks, monetización y productividad con IAOrientación a resultados reales y uso eficiente
Elena Santos (ChicaGeek)Trucos tecnológicos cotidianosConsejos muy prácticos para la vida digital diaria

Blogs recomendados

  • Microsiervos.com. Temática muy variada (tecnología, ciencia, Internet), pero también humor, astronomía, aviación, conspiraciones, puzzles, reseñas de libros o películas y experiencias personales.
  • Xataka.com. Noticias, análisis, reseñas extensas de dispositivos (móviles, gadgets, informática), exploración espacial, energías renovables, etc., cubriendo toda la actualidad tecnológica.

Comparación de los blogs recomendados:

CaracterísticaMicrosiervos.comXataka.com
OrígenesBlog personal de un grupo de amigosBlog profesional
TemáticaMuy variada: tecnología, ciencia, humor, curiosidadesTecnología aplicada, noticias, análisis, gadgets
EstiloInformal, personal, humorísticoInformativo, técnico, bien estructurado
FormatoPosts sueltos, blog estilo “diario”Publicación periódica con secciones y verticales
EquipoPequeño grupo de autores (Alvy, Wicho y colaboraciones)Equipo amplio y diversificado de periodistas y editores

¿Qué IA debo utilizar?

ChatGPT

Se puede acceder online (https://chatgpt.com) y con la app:

Muy versátil, entiende bien el lenguaje natural, ideal para redacción, resúmenes, creación de materiales didácticos y resolver dudas de alumnos. Ventaja: calidad y fluidez. Inconveniente: no siempre gratuito en sus versiones más nuevas.

Gemini

Se puede acceder online (https://gemini.google.com/app) y con la app:

Muy versátil, entiende bien el lenguaje natural, ideal para redacción, resúmenes, creación de materiales didácticos y resolver dudas de alumnos. Ventaja: calidad y fluidez. Inconveniente: no siempre gratuito en sus versiones más nuevas.

Qwen

Se puede acceder online (https://chat.qwen.ai) y con la app:

Excelentes resultados en razonamiento matemático y técnico, con versiones grandes y pequeñas. Ideal para programación y ciencias. Ventaja: muy bueno en lógica y coste relativamente bajo. Inconveniente: menos natural en la redacción creativa.

NotebookLM

Se puede acceder online desde https://notebooklm.google.com/ y con la app:

Pensado para estudiar, resumir documentos y crear infografías, presentaciones y vídeos. Muy útil para alumnos y maestros que quieren convertir apuntes o libros en resúmenes y cuestionarios. Ventaja: especializado en aprendizaje. Inconveniente: no es tan flexible como otros modelos de uso general.

Z.ai

Se puede acceder online (https://chat.z.ai).

Destaca por ser ligero, rápido y económico, con buen rendimiento en chino, inglés y español. Ventaja: eficiencia y bajo coste, y generación excelente de aplicaciones informáticas y presentaciones con diapositivas. Inconveniente: menos precisión que modelos grandes en explicaciones complejas.

Deepseek

Se puede acceder online (https://www.deepseek.com/en) y con la app:

Especializado en eficiencia y bajo consumo de recursos, pensado para análisis de datos y asistentes técnicos. Ventaja: rapidez y buena relación coste-rendimiento. Inconveniente: menos pulido en lenguaje pedagógico o creativo.

Mistral

Se puede acceder online (https://chat.mistral.ai/chat) y con la app:

Modelos europeos, abiertos y de calidad, muy buenos para tareas multilingües y razonamiento. Ventaja: muy buenos resultados con idiomas europeos. Inconveniente: no dispone de generación de presentaciones de manera automática.

Grok

Se puede acceder online (https://grok.com/) y con la app:

Integrado en la red social X, con estilo más informal. Ventaja: útil para comunicación desenfadada y creatividad. Inconveniente: menos serio y todavía limitado en educación formal.

Claude

Este modelo de IA está más orientado a programadores y empresas de desarrollo de software. Se puede acceder online (https://claude.ai/new) y con la app:

Destaca en ética, seguridad, comprensión de textos largos, y programación de aplicaciones informáticas. Ideal para trabajar con documentos extensos y entornos donde se busca una IA más enfocada al mundo empresarial. Ventaja: maneja textos muy largos y cuida el tono. Inconveniente: menos creativo que ChatGPT.

Hugging Face

Accesible desde https://huggingface.co/spaces.

No es un modelo en sí, sino una plataforma que reúne cientos de modelos de IA abiertos. Ventaja: enorme flexibilidad y recursos gratuitos para experimentar. Inconveniente: requiere más conocimientos técnicos para elegir y usar el modelo correcto (orientado a usuarios expertos).

Comparación de los diversos modelos

IAFortalezasDebilidadesUso ideal en educación
ChatGPTMuy fluido y versátil en lenguaje; excelente para redacción, resúmenes y explicaciones creativasVersiones avanzadas pueden tener costo; menos personalizable a nivel técnicoRedacción de actividades, generación de ejemplos, guías didácticas
Z.ai (GLM‑4.5)Modelo unificado con razonamiento, codificación y agentes; código abierto y coste competitivo (Business Insider, z.ai)Comunidad menor en españolBúsquedas en Internet, razonamiento avanzado, creación de presentaciones y aplicaciones informáticas
Qwen (Alibaba)Gran variedad multimodal (texto, audio, imagen/video); razonamiento avanzado; multilingüe (Wikipedia, Wikipedia, Prismetric)Ecosistema menos conocido fuera de ChinaRecursos multimedia, explicación con voz e imagen, programación de aplicaciones informáticas
DeepSeekAltamente eficiente y abierto; razonamiento potente a muy bajo coste (The Wall Street Journal, Business Insider, Wikipedia)Censura en temas sensibles según versión; consideraciones de privacidad (The Times, Wikipedia)Para recursos locales o de investigación avanzada, cuando se tiene soporte técnico y precaución con contenido censurable
MistralOpen source, flexible, desplegable localmente, razonamiento multilingüe eficiente (kalm.works, Medium, Appvizer)Comunidad menor en educaciónPersonalización local, modelado lingüístico adaptado al contexto local
Google AI Studio / GeminiIntegración con Workspace (Docs, Drive, Classroom); resumen de archivos, notas automáticas (Android Central)Depende del ecosistema Google; preocupaciones de privacidad institucionalIntegración en flujos escolares existentes, generación de notas y resúmenes automáticos
NotebookLM (Google)Asistente de investigación: resúmenes, guías de estudio, podcasts automáticos en español (Cinco Días, Wikipedia, blog.google, Revolgy)Menor flexibilidad para otros usos creativos fuera de investigaciónPreparación de guías, podcasts educativos, interacción con documentos complejos
Grok (xAI)Integración en X y búsquedas en tiempo real, razonamiento avanzado (Grok 4) (Tom’s Guide, Wikipedia, Business Insider)Historial de respuestas controvertidas; riesgo de sesgos; requiere supervisión crítica (The Wall Street Journal)Uso en comunicación dinámica, debates o actividades creativas (con precaución)
Claude (Anthropic)Usado ampliamente a nivel profesional y creación de aplicaciones informáticas (swiftask.ai, anthropic.com)Menor creatividad espontánea; acceso limitado; ecosistema cerrado (reddit.com)Crear cuestionarios, diseño curricular, aplicaciones informáticas, uso empresarial
Hugging FacePlataforma con acceso a muchos modelos abiertos; ideal para explorar y experimentarNecesita conocimientos técnicos para elegir y probar modelos adecuadosExploración de nuevas IA y prototipos para usos específicos educativos

¿Qué IA es la mejor?

Ranking mundial

En la página web LMArena podemos utilizar los modelos de inteligencia artificial más populares. Es una plataforma abierta y colaborativa que permite realizar comparaciones directas mediante “batallas” anónimas: el usuario introduce un prompt, recibe dos respuestas generadas por modelos distintos y elige cuál le parece mejor; luego se revelan las identidades de los modelos y el resultado se suma a un ranking público. Creada por investigadores de la Universidad de California en Berkeley, se ha convertido en un referente porque combina transparencia (sus datos se publican para investigación), participación comunitaria y alcance global, evaluando desde modelos de código abierto hasta prototipos pre-lanzamiento de gigantes como OpenAI, Google o Anthropic.

Por ejemplo, en los siguientes enlaces se puede consultar el ranking mundial de los modelos de IA más populares para generación de texto en español, para resolución de problemas matemáticos, para escritura creativa, y de generación y edición de imágenes, según las valoraciones de los usuarios:

Además, se pueden probar todos los modelos de forma gratuita a través de este enlace: https://lmarena.ai/?mode=direct

Casos prácticos

Traducciones

Traductor de Google desde su app:

Generación y edición de imágenes e infografías completas

Ejemplos generados con ChatGPT utilizando imágenes reales (en diciembre del 2024, y agosto del 2025 respectivamente):

Una vista aérea de las olas chocando contra la orilla.
Una vista aérea de un campo. Una carretera atraviesa la esquina superior derecha.

Ejemplo generados con «Nano Banana» desde Google AI Studio con los siguientes prompts:

  • Crea un dibujo de un niño corriendo porque llega tarde al colegio y sus padres están detrás, con estilo manga.
  • Cambia la torre del reloj por la Torre Eiffel.
Una vista aérea de las olas chocando contra la orilla.
Una vista aérea de un campo. Una carretera atraviesa la esquina superior derecha.

Modelo recomendado «Nano Banana» accesible desde Google AI Studio (es mejor modelo de generación de imágenes que el proporcionado por ChatGPT 5):

Generación de presentaciones con diapositivas

Presentación de ejemplo sobre la Cabalgata de los Reyes Magos de Alcoy generada desde Z.ai:

Presentación de ejemplo para aprender nombres de animales en inglés, generada automáticamente desde kimi.com:

Modelos recomendados:

  • «GLM» desde Z.ai:

Generación de podcasts (o resúmenes)

Ejemplo generado automáticamente a partir de la información disponible en la Wikipedia (https://es.wikipedia.org/wiki/Cabalgata_de_Reyes_Magos_de_Alcoy):

Accesible desde https://notebooklm.google.com/:

Generación de vídeos explicativos

Ejemplo generado automáticamente a partir de la información disponible en la Wikipedia (https://es.wikipedia.org/wiki/Cabalgata_de_Reyes_Magos_de_Alcoy):

Accesible desde https://notebooklm.google.com/:

Libros ilustrados

Modelo recomendado «Gemini» desde Gemini Storybook:

Generación de música

Las vocales en canción:

El baile del abecedario:

Modelo recomendado «Suno 4.5» de Suno.com:

Publicar libros en Amazon

Servicio accesible desde https://kdp.amazon.com/:

Instant buttons con HTML+CSS+Javascript

En esta unidad crearemos una aplicación con una galería interactiva de botones de audio, diseñada para reproducir sonidos de Halloween y Navidad. La interfaz está organizada en dos tablas temáticas: una para Halloween y otra para Navidad, cada una con imágenes representativas que, al hacer clic, activan la reproducción de un sonido específico.

Imágenes y sonidos

A continuación se muestran posibles imágenes y audios que puedes usar. Además, puedes hacer clic en estos enlaces para descargarte un zip con todas las imágenes y todos los sonidos.

Halloween

Navidad

Fichero «index.html»

El archivo index.html define la estructura básica de la aplicación, que es una galería de botones de audio con imágenes interactivas. A continuación explicamos cada parte del archivo.

Cabecera (<head>)

El código que se encuentra en esta primera sección del archivo se encarga de lo siguiente:

  • Define el título de la página («Instant buttons»).
  • Incluye enlaces a fuentes personalizadas de Google Fonts:
    • Creepster: utilizada para el tema de Halloween.
    • Mountains of Christmas: utilizada para el tema de Navidad.
  • Vincula la hoja de estilos style.css, donde están los estilos para el fondo, las fuentes, y los efectos visuales de las imágenes.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instant buttons</title>

    <!-- Fuentes personalizadas desde Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Mountains+of+Christmas:wght@400;700&display=swap" rel="stylesheet">

    <!-- Archivo de estilos CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    ...
</body>
</html>

Cuerpo de la página (<body>)

Dentro del cuerpo, se encuentran dos tablas temáticas: una de Halloween y otra de Navidad.

Tabla de Halloween

  • Utiliza la clase halloween para aplicar estilos específicos desde style.css, como el color rojo y la fuente Creepster.
  • Cada celda (<td>) contiene una imagen y tiene un evento onclick que ejecuta la función play con dos parámetros: el nombre del archivo de sonido y el volumen de reproducción.
  • Los archivos de imagen se encuentran en una carpeta llamada img y están nombrados de forma consecutiva para cada botón (por ejemplo, halloween1.webp, halloween2.webp, etc.).
<table class="halloween">
    <caption>Halloween</caption>
    <!-- Fila 1 de botones de Halloween -->
    <tr>
        <td onclick="play('halloween1', 0.5)"><img src="img/halloween1.webp"></td>
        <td onclick="play('halloween2', 0.7)"><img src="img/halloween2.webp"></td>
        <td onclick="play('halloween3', 0.7)"><img src="img/halloween3.webp"></td>
    </tr>
    <!-- Fila 2 de botones de Halloween -->
    <tr>
        <td onclick="play('halloween4', 0.7)"><img src="img/halloween4.webp"></td>
        <td onclick="play('halloween5', 0.7)"><img src="img/halloween5.webp"></td>
        <td onclick="play('halloween6', 0.7)"><img src="img/halloween6.webp"></td>
    </tr>
    <!-- Fila 3 de botones de Halloween -->
    <tr>
        <td onclick="play('halloween7', 0.7)"><img src="img/halloween7.webp"></td>
        <td onclick="play('halloween8', 1.0)"><img src="img/halloween8.webp"></td>
        <td onclick="play('halloween9', 1.0)"><img src="img/halloween9.webp"></td>
    </tr>
</table>

Tabla de Navidad

  • Sigue la misma estructura que la tabla de Halloween, pero está estilizada con la clase christmas, que aplica un color azul y la fuente Mountains of Christmas.
  • Las imágenes de Navidad también están organizadas en una cuadrícula de tres filas y tres columnas, cada una con un archivo de audio distinto.
<table class="christmas">
    <caption>Christmas</caption>
    <tr>
        <td onclick="play('christmas1', 0.7)"><img src="img/christmas1.webp"></td>
        <td onclick="play('christmas2', 1.0)"><img src="img/christmas2.webp"></td>
        <td onclick="play('christmas3', 0.7)"><img src="img/christmas3.webp"></td>
    </tr>
    <tr>
        <td onclick="play('christmas4', 0.7)"><img src="img/christmas4.webp"></td>
        <td onclick="play('christmas5', 0.7)"><img src="img/christmas5.webp"></td>
        <td onclick="play('christmas6', 1.0)"><img src="img/christmas6.webp"></td>
    </tr>
    <tr>
        <td onclick="play('christmas7', 0.7)"><img src="img/christmas7.webp"></td>
        <td onclick="play('christmas8', 1.0)"><img src="img/christmas8.webp"></td>
        <td onclick="play('christmas9', 1.0)"><img src="img/christmas9.webp"></td>
    </tr>
</table>

Elemento de audio y JavaScript

Antes de cerrar el elemento <body> de nuestra página web, deberemos incluir un elemento <audio> que utilizaremos para reproducir los sonidos, y también deberemos enlazar el fichero con el código JavaScript: 

...
<body>
    ...
    <audio id="player"></audio>
    <script src="script.js"></script>
</body>
</html>
  • Elemento <audio>: Este elemento, con el id="player", se usa para reproducir los archivos de sonido. Al hacer clic en cada imagen, la función JavaScript play modifica su fuente (src) y volumen, y luego reproduce el audio seleccionado.
  • JavaScript: Al final del archivo se carga el script script.js, que contiene la función play para controlar la reproducción de audio cuando se hace clic en una imagen.

En resumen…

El archivo index.html estructura la página, definiendo tablas temáticas interactivas para reproducir sonidos festivos de Halloween y Navidad mediante el uso de JavaScript y estilos en CSS para mejorar la experiencia visual y sonora.

El archivo script.js es un código JavaScript sencillo que controla la reproducción de sonidos al hacer clic en las imágenes de la galería. A continuación, explicamos la función principal de este archivo.

Fichero «script.js»

Nuestra aplicación de instant buttons utiliza sólo una sencilla función javascript para reproducir los audios con ajuste de volumen incluido. A continuación se muestra todo el código necesario agrupado en la función play:

function play(soundName, soundVolume) {
    // Obtener el elemento de audio
    const player = document.getElementById("player");

    // Cambiar el archivo de audio a reproducir
    player.src = `audio/${soundName}.mp3`;

    // Cambiar el volumen del audio
    player.volume = soundVolume;

    // Reproducir el audio
    player.play();
}

Explicación detallada de la función play

Esta función play recibe dos parámetros, soundName y soundVolume, y se ejecuta cada vez que se hace clic en una de las imágenes en el archivo index.html. La función realiza los siguientes pasos:

  1. Obtener el elemento de audio:
   const player = document.getElementById("player");

Utiliza document.getElementById("player") para obtener el elemento de audio <audio id="player"> en el archivo HTML. Este elemento de audio es el que realmente reproduce los sonidos.

  1. Cambiar el archivo de audio:
   player.src = `audio/${soundName}.mp3`;

Modifica la propiedad src del elemento player para cambiar el archivo de audio que se va a reproducir. La función construye la ruta del archivo de audio usando el nombre del archivo pasado como parámetro soundName (por ejemplo, halloween1, christmas2, etc.). Así, si soundName es halloween1, la función buscará y cargará el archivo audio/halloween1.mp3.

  1. Ajustar el volumen:
   player.volume = soundVolume;

Cambia el volumen de reproducción del audio estableciendo la propiedad volume del elemento player. Este valor se toma del parámetro soundVolume, que es un número entre 0 (silencio) y 1 (volumen máximo). Por ejemplo, algunos sonidos tienen un volumen de 0.7 y otros de 1.0 en función de la experiencia que se quiera dar al usuario.

  1. Reproducir el sonido:
   player.play();

Finalmente, llama al método play() del elemento player para iniciar la reproducción del archivo de audio con el archivo y volumen especificados.

En resumen…

La función play es un controlador de reproducción de sonido que:

  • Cambia el archivo de audio a reproducir.
  • Ajusta el volumen de la reproducción.
  • Inicia la reproducción del archivo de audio.

Esta función permite que, al hacer clic en las imágenes de la galería, cada imagen reproduzca un sonido específico asociado a la festividad (Halloween o Navidad) con el volumen predefinido en la función onclick del HTML.

Fichero «style.css»

El archivo style.css contiene los estilos visuales de la aplicación, desde el fondo animado hasta los efectos visuales para cada imagen y tabla temática. A continuación, explicamos cada sección del código CSS.

Fondo animado con gradiente

body {
    background: linear-gradient(90deg, #1a1a1a, #003c5a, #0086c9, #9001d7);
    background-size: 200% 100%;
    animation: aurora 2.5s infinite alternate;
}
  • Gradiente de colores: El fondo de la página es un gradiente lineal que pasa por varios tonos oscuros y fríos (negro, azul oscuro, azul brillante y morado). Esto crea un ambiente visual similar a una aurora boreal.
  • Tamaño del fondo: background-size: 200% 100%; hace que el gradiente se duplique en ancho, lo que permite que el fondo se mueva de lado a lado.
  • Animación: animation: aurora 2.5s infinite alternate; activa una animación de ida y vuelta cada 2.5 segundos, creando el efecto de movimiento en el fondo.
@keyframes aurora {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
  • Animación aurora: Define una transición que mueve el gradiente de izquierda a derecha en el 100% del ancho, y luego vuelve al inicio, lo que da el efecto de aurora en movimiento.

Estilos para las imágenes de los botones

img {
    width: 100%;
    max-width: 250px;
    transition: 0.5s ease;
}

img:active {
    transform: scale(1.5);
    filter: brightness(0.75) contrast(1.25);
    box-shadow: 0 0 20px black;
}
  • Ancho de las imágenes: width: 100% asegura que las imágenes ocupen todo el ancho de la celda. max-width: 250px limita el tamaño máximo de las imágenes en pantallas grandes.
  • Transición suave: transition: 0.5s ease aplica una transición suave al hacer clic en las imágenes.
  • Efecto al hacer clic (:active): Cuando una imagen es presionada, se agranda un 50% (transform: scale(1.5)), se oscurece ligeramente (brightness(0.75)) y aumenta el contraste (contrast(1.25)), además de aplicar una sombra negra para resaltar el efecto de interacción.

Estilos para las tablas de Halloween y Navidad

Cada tabla tiene estilos específicos que incluyen una fuente, color y sombra para dar un ambiente acorde a la festividad.

Tabla de Halloween

.halloween {
    font-size: 250%;
    color: red;
    font-family: 'Creepster', cursive;
    text-shadow: 3px 3px 4px black, -3px -3px 4px #550000;
}
  • Fuente: La tabla de Halloween usa la fuente Creepster, que tiene un estilo tenebroso.
  • Color: El color del texto es rojo (color: red;).
  • Sombra de texto: Aplica una sombra oscura y difusa (text-shadow: 3px 3px 4px black, -3px -3px 4px #550000;), dando un efecto de terror al texto.

Tabla de Navidad

.christmas {
    font-size: 250%;
    font-weight: bold;
    color: blue;
    font-family: 'Mountains of Christmas', cursive;
    text-shadow: 2px 2px 5px #00aaff, -2px -2px 5px #ffffff;
}
  • Fuente: Utiliza Mountains of Christmas, que tiene un estilo festivo.
  • Color: El color del texto es azul (color: blue;).
  • Sombra de texto: Usa sombras suaves en azul claro y blanco (text-shadow: 2px 2px 5px #00aaff, -2px -2px 5px #ffffff;) para dar un efecto festivo de brillo.

Estilos generales para las tablas

table {
    margin: auto;
}
  • Centrado de las tablas: La propiedad margin: auto; centra las tablas horizontalmente en la página.

En resumen…

Este archivo CSS define la estética de la aplicación:

  • Un fondo animado tipo aurora boreal.
  • Efectos interactivos para las imágenes de los botones.
  • Estilos específicos para cada tabla (Halloween y Navidad) con colores y fuentes temáticas.

Estos estilos ayudan a crear una experiencia visual inmersiva y coherente con cada festividad.

Ejercicios propuestos

Cambiar la orientación de la animación de fondo

Prueba a cambiar la orientación de fondo para que el efecto de aurora boreal se produzca con un movimiento de arriba hacia abajo y viceversa. Para ello basta con que modifiques el ángulo del gradiente a 180 grados, el tamaño del fondo al doble de alto, y el porcentaje de la animación en el eje Y de 0% a 100%:

/* Fondo con gradiente animado vertical tipo aurora */
body {
    /* Cambiamos el ángulo del gradiente a 180 grados para que vaya de arriba hacia abajo */
    background: linear-gradient(180deg, #1a1a1a, #003c5a, #0086c9, #9001d7);
    /* Ajustamos el tamaño del fondo para que solo se duplique en altura */
    background-size: 100% 200%;
    /* Mantiene la misma animación */
    animation: aurora 2.5s infinite alternate;
}

/* Animación de gradiente tipo aurora en vertical */
@keyframes aurora {
    /* Fijamos la posición horizontal en 50% y animamos solo la posición vertical */
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 100%; }
}

Animación de fondo radial

Prueba a cambiar la orientación de fondo para que el efecto de aurora boreal sea de tipo radial con movimiento diagonal. Para ello basta con que definas el gradiente con radial-gradient(circle, ...), y luego dupliques el tamaño del fondo al doble de ancho y de alto, y en último lugar cambies los porcentajes de la animación en ambos ejes de 0% a 100%:

/* Fondo con gradiente animado tipo aurora */
body {
    /* Cambiamos a un gradiente radial para un efecto más llamativo */
    background: radial-gradient(circle, #1a1a1a, #003c5a, #0086c9, #9001d7);
    /* Ajustamos el tamaño del gradiente para que cubra más área */
    background-size: 200% 200%;
    /* Mantiene la misma animación */
    animation: aurora 2.5s infinite alternate;
}

/* Animación de gradiente tipo aurora */
@keyframes aurora {
    /* Modificamos la posición inicial y final para adaptarla al gradiente radial */
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

Diferentes colores de fondo

Prueba a cambiar los colores de la animación de fondo. Para ello solo debes cambiar los colores de la propiedad background dentro del selector body. Por ejemplo:

/* Fondo con gradiente animado tipo aurora de Halloween */
body {
    /* Usamos colores típicos de Halloween en el gradiente radial */
    background: radial-gradient(circle, black, purple, orange, darkred);
    ...
}
...

Utiliza tus propias imágenes y graba tus propios audios

Prueba a usar otras imágenes y otros audios. Puedes encontrar imágenes y audios gratuitos en los siguientes enlaces:

También puedes grabar tus audios e incluirlos directamente en la aplicación. Puedes utilizar tu propio móvil o alguna página web online similar a la siguiente:

Compilar la aplicación para móvil

Prueba a compilar la aplicación para móvil, y así podrás pulsar sobre las imágenes como si fueran botones. Puedes seguir las instrucciones detalladas aquí.

Ten en cuenta que el tamaño máximo para la aplicación en formato móvil es de 10MB, por lo que no podrás utilizar imágenes y audios demasiado grandes. Recomendamos el formato webp para imágenes y mp3 para audio. Puedes cambiar el formato o bajar la calidad de los ficheros con alguna herramienta online. Por ejemplo:

Imágenes:

Audios:

Añadir efecto de vibración al pulsar sobre cada imagen

Puedes añadir efecto de vibración muy fácilmente añadiendo la siguiente línea dentro de la función play del fichero script.js:

function play(soundName, soundVolume) {
    ...
    // Si la vibración está disponible (en el móvil por ejemplo), vibrar durante 100 ms
    if (navigator.vibrate) navigator.vibrate(100);
}

El resultado

En este enlace puedes probar esta versión de la aplicación instant buttons.

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
}

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