Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: .:Xx4NG3LxX:. en 2 Septiembre 2020, 23:39 pm



Título: [JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?
Publicado por: .:Xx4NG3LxX:. en 2 Septiembre 2020, 23:39 pm
Saludos,

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

Código
  1. document.cookie

Y con

Código
  1. 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:
chrome://dino/


Título: Re: [JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?
Publicado por: #!drvy en 3 Septiembre 2020, 10:28 am
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
  1. let data = {score: 500, user: 'papanoel'};
  2. localStorage.setItem('partida', JSON.stringify(data)); // localStorage almacena strings.

Código
  1. let save = localStorage.getItem('partida');
  2. // comprobamos si tenemos partida guardad y la pasamos a objeto.
  3. data = (save ? JSON.parse(save) : {score: 0});
  4.  
  5.  
  6. console.log(data.score); // 500
  7. 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


Título: Re: [JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?
Publicado por: .:Xx4NG3LxX:. en 3 Septiembre 2020, 17:06 pm
Tengo que probarlo, te comentó cualquier cosa, gracias por tu respuesta...


Título: Re: [JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?
Publicado por: @XSStringManolo en 3 Septiembre 2020, 21:23 pm
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.



Título: Re: [JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?
Publicado por: .:Xx4NG3LxX:. en 7 Septiembre 2020, 04:14 am
Gracias @#!drvy, pero, no se exactamente que hace y porque está de esta forma está parte del código:

Código
  1. JSON.stringify(data)

Y esta más que todo:

Código
  1. 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/ (https://platzi.com/blog/local-storage-html5/)

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


Título: Re: [JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?
Publicado por: #!drvy en 7 Septiembre 2020, 10:12 am
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
  1. 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
  1. if (save == true) {
  2.    data = JSON.parse(save);
  3. } else {
  4.    data = {score:0};
  5. }


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




Citar
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


Título: Re: [JUEGO HTML][DUDA] ¿Cómo hacer algún tipo de salvaguarda en un juego?
Publicado por: .:Xx4NG3LxX:. en 7 Septiembre 2020, 17:08 pm
Muchísimas gracias! Me quedo claro el código ahora.. Te lo agradezco...

Saludos.!!