Estoy creando un juego de rol de texto en HTML/JavaScript sin formato. Configuré el almacenamiento local usando almacenamiento simple para facilitarme la vida. Dicho esto, me encuentro con un problema divertido con los cofres del tesoro. Si abre un cofre, la función oculta correctamente el botón para evitar abrir el cofre nuevamente. ¡Pero si vuelves a cargar la página después de guardar, el cofre vuelve a aparecer! La clase que se agregó al cofre se elimina, lo que permite al jugador sacarlo nuevamente. Dado que su inventario se guarda correctamente, en teoría podrían obtener infinitas pociones.
HTML:
<button id="chest-1" onclick="openChest(potion, this.id)" onload="toggleChests()">Open Chest</button>JS:
let opened = document.getElementsByClassName("opened"); opened.hidden = true; function openChest(item, id){ inventory.push(item); document.getElementById(id).hidden = true; document.getElementById(id).classList.add("opened"); alert("You found: " + item.name + " - in the chest!"); simpleStorage.set("opened", opened); };Cuando se carga el juego, debe verificar si se ha guardado una clase de cofre y, de ser así, aplicarla. Creo que aquí es donde definitivamente estoy haciendo las cosas mal.
function toggleChests(){ opened = simpleStorage.get("opened", opened); if (opened === true){ opened.hidden = true; } };Código fuente del proyecto: https://github.com/AndyDaMandy/Textia
Lo descubrí gracias a algunos de los consejos de Heretic Monkey y Cbroe.
Resolví el problema colocando la cadena de identificación de cada cofre abierto en una matriz llamada "abierto". Cuando guarda, la matriz se guarda. Cuando se carga, se vuelve a cargar abierto. Luego, la función de carga llama a la función applyOpened, que luego aplica un .map a la matriz. Toma cada identificación y la coloca en un documento. getElementById, luego le agrega el atributo oculto. Esto se hace antes de cargar la página para el jugador, evitando que acceda al elemento sin usar la consola (¡y eso sería hacer trampa!). Nuevamente, el almacenamiento simple hace que no necesite convertir la matriz en una cadena, ¡pero también debería funcionar con el almacenamiento local normal!
Aquí está el código:
let opened = []; function openChest(item, id){ inventory.push(item); document.getElementById(id).hidden = true; opened.push(id); alert("You found: " + item.name + " - in the chest!"); }; function applyOpened () { function apply(arr) { document.getElementById(arr).hidden = true; } opened.map(apply); }; function save() { simpleStorage.set("opened", opened); }; function load(){ opened = simpleStorage.get("opened", opened); applyOpened(); };Y aquí está el html para el cofre:
<button id="chest-1" onclick="openChest(potion, this.id)">Open Chest</button>