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
// 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
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
guardarProgreso(); // Si los datos son incorrectos, guarda los datos actuales
mostrarProgreso(); // Actualiza visualmente el progreso
// Función para inicializar el juego
cargarProgreso(); // Carga el progreso guardado al iniciar el juego
inicializar(); // Llama a la función para iniciar el juego
...
// 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
...
// 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));
...
// 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));
}
...
// 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));
}
