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 la computadora.

¿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 más complejos (como un objeto con el estado del juego), usamos JSON.

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