[JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?

[.:Xx4NG3LxX:.]

Saludos,

He indagado por allí, y me he encontrado con dos posibles soluciones:

Código (javascript) [Seleccionar] Expandir

document.cookie

Y con

Código (javascript) [Seleccionar] Expandir

localStorage

Lo más complicado (creo yo) es hacerlo sin librerias, es decir , a puro javascript (no se sí sea posible).

Estaba pensando en hacer algo tipo:

• Crear un archivo que contenga los datos de lo que se va a cargar.
• Al apretar un botón se cargué dicha partida

Pongo un simple ejemplo:

Creo un juego basico, en este ejemplo el Snake o Serpiente. Al cabo de un rato jugando decido salir.

Al volver a poner el juego mostrar un "HIGH SCORE"...

Intenté ser lo más claro posible.

Resumen: algo como el juego del T-Rex de Chrome :

Código [Seleccionar] Expandir

chrome://dino/

[#!drvy]

Usas un objeto o lo que quieras, y lo almacenas en localStorage. Yo no usaría cookies pues están limitadas. localStorage es muy sencillo de usar y no te hace falta ninguna librería.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Código (javascript) [Seleccionar] Expandir

let data = {score: 500, user: 'papanoel'};
localStorage.setItem('partida', JSON.stringify(data)); // localStorage almacena strings.

Código (javascript) [Seleccionar] Expandir

let save = localStorage.getItem('partida');
// comprobamos si tenemos partida guardad y la pasamos a objeto.
data = (save ? JSON.parse(save) : {score: 0});


console.log(data.score); // 500
console.log(data.user); // papanoel


Obviamente olvídate de guardar datos sensibles, puesto que tanto las cookies como el localStorage son modificables por el usuario.

Saludos

[.:Xx4NG3LxX:.]

Tengo que probarlo, te comentó cualquier cosa, gracias por tu respuesta...

[@XSStringManolo]

Yo uso strings. Obtengo los datos a guardar, los codifico y los cargo por la url con el # o pegando el string en un input.

Puedes generar un archivo, descargarlo y cargarlo también.

[.:Xx4NG3LxX:.]

Gracias @#!drvy, pero, no se exactamente que hace y porque está de esta forma está parte del código:

Código (javascript) [Seleccionar] Expandir

JSON.stringify(data)

Y esta más que todo:

Código (javascript) [Seleccionar] Expandir

data = (save ? JSON.parse(save) : {score: 0});

Si me lo pudieras explicar de una manera si olé y comprensible, te lo agradecería mucho.



@XSStringManolo, no entendí muy bien tu respuesta, explicare mejor please...

Gracias a ambos y saludos...



EDITO:

Encontré un ejemplo usando JQuery:

https://platzi.com/blog/local-storage-html5/

Pero aún no me queda claro tu código...

[#!drvy]

JSON.stringify convierte lo que le pasas a formato JSON.

https://developer.mozilla.org/es/docs/Web/javascript/Referencia/Objetos_globales/JSON/stringify

Así puedes almacenar un objeto o un array en el localStorage, puesto que este solo permite strings. Lo que haces en esa línea es literalmente convertir el objeto data a JSON y almacenarlo en localStorage como partida.

Código (javascript) [Seleccionar] Expandir

data = (save ? JSON.parse(save) : {score: 0});

A esto se le llama una condicional ternaria u operador ternario.

https://developer.mozilla.org/es/docs/Web/javascript/Referencia/Operadores/Conditional_Operator


Literalmente se traduce a esto:

Código (javascript) [Seleccionar] Expandir

if (save == true) {
   data = JSON.parse(save);
} else {
   data = {score:0};
}


Lo que hace es muy simple, comprueba si save tiene un dato válido comparándolo como booleano y si es así, le asigna a la variable data la salida de JSON.parse, de lo contrario, le asigna un objeto con puntuación cero por defecto.

JSON.parse es lo contrario a JSON.stringify. Convierte un string JSON a objeto/array en javascript.

https://developer.mozilla.org/es/docs/Web/javascript/Referencia/Objetos_globales/JSON/parse

Encontré un ejemplo usando JQuery:

Ese ejemplo es MUY MUY malo.

1. Almacenan input del usuario de forma directa y lo muestran sin sanitizar permitiendo ejecución XSS.

2. Mezclan tanto jQuery como javascript nativo a la hora de hacer selectores. En unos lados usan $('...') y en otros usan getElementById. Fatal.

3. Usan tags obsoletos en HTML5. <center> está marcado como obsoleto en HTML5.

4. Meten el jQuery en el <head>. El jQuery siempre debe ir en el <body> a no ser que haya alguna manqueada que te obligue a meterlo en el <head>.


En fin... poco más se puede esperar de platzi.

Saludos

[.:Xx4NG3LxX:.]

Muchísimas gracias! Me quedo claro el código ahora.. Te lo agradezco...

Saludos.!!