Introducción
Programemos un juego con JavaScript
Canvas
¿Qué es canvas en JavaScript?
Tamaño del canvas y sus elementos
Canvas responsive
Mapa del juego
¿Qué es un array bidimensional?
Arreglos multidimensionales en JavaScript
Refactor del mapa de juego
Movimientos del jugador
Eventos y botones
Objeto playerPosition
Limpieza de movimientos
No te salgas del mapa
Colisiones
Detectando colisiones fijas
Detectando colisiones con arrays
Victoria: subiendo de nivel
Derrota: perdiendo vidas
Bonus: adictividad
Sistema de vidas y corazones
Sistema de tiempo y puntajes
¿Qué es localStorage?
Guardando records del jugador
Deploy
Depurando errores del juego
Desplegando el juego a GitHub Pages
Próximos pasos
Reto: reinicio del juego
Reto: timeouts de victoria o derrota
¿Quieres un simulador laboral?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 23
Preguntas 1
Primero creo la variable con localStorage
localStorage.setItem('record', 0);
Luego la funcion
function showRecord(){
if(playerTime > localStorage.getItem('record')){
localStorage.setItem('record', playerTime);
recordView.innerText = 'Record: 🏁'+ localStorage.getItem('record');
}
}
pov. eliminan a patito
;
let timeRecord
Modifique la funcion gameWin:
function gameWin(){
console.log('GANASTE EL JUEGO');
clearInterval(timeInterval);
if(!localStorage.getItem('record') || timeRecord < localStorage.get('record')){
localStorage.setItem('record', timeRecord)
record.innerHTML = timeRecord;
}
}
finalmente la variable timeRecord se almacena cada vez que corre showTime() con el setInterval:
function showTime(){
timeRecord = Date.now() - timeStart;
timeCount.innerHTML = timeRecord;
}
La variable de Juan DC cuando use localStorage.removeItem
HTML:
Creo un párrafo que contenga un span para anunciar un nuevo record:
<p><span id="new_record"></span></p>
JavaScript:
Ya tú habías creado una variable timePlayer. Yo creo además otra llamada puntuacion y también accedo al span del record:
let timePlayer;
let puntuacion;
const new_record = document.querySelector('#new_record');
Dentro de la función startGame, en el condicional donde verificamos que se acabaron los mapas, coloco después del llamado de la función gameWin el siguiente código:
timePlayer = Number(spanTime.innerHTML);
puntuacion = Number(localStorage.getItem('Record'));
if(!puntuacion) {
localStorage.setItem('Record', timePlayer);
}
else {
if(timePlayer < puntuacion) {
new_record.innerHTML = 'Has conseguido un nuevo record!!!';
localStorage.setItem('Record', timePlayer);
}
}
Con esto, luego de terminar el juego, asigno a la variable timePlayer el número que esté en el span del tiempo que se detuvo y a la variable puntuación le asigno el valor de una variable en el localStorage.
A continuación escribo un condicional para que, si “puntuación” aún no existe (caso de la primera vez que se juega), se asigne al localStorage una variable con el valor de timePlayer; pero en caso de que “puntuación” sí existiera, que compare el valor guardado en memoria con el nuevo valor obtenido y muestre el mensaje de nuevo record en el span correspondiente si el nuevo tiempo es menor al que está guardado en memoria, y además que guarde el nuevo valor en el localStorage.
Para resolver los del reto hice lo siguiente:
Cree las variables globales textRecord y record.
let record;
let textRecord = document.getElementById('record');
En startGame() cree dos condicionales:
El primer condicional se encarga de poner en pantalla el último record del jugador siempre que se inicie el juego sólo si el localStore es diferente de cero. El segundo pondrá en pantalla el record con valor de cero sólo en el primer juego(cuando se ejecute por primera vez el juego).
if(parseInt((localStorage.getItem('gameRecord')))){
textRecord.innerText = +localStorage.getItem('gameRecord');
}
if(!parseInt((localStorage.getItem('gameRecord')))){
localStorage.setItem('gameRecord', 0);
textRecord.innerText = +localStorage.getItem('gameRecord');
}
Por último en la función gameWin() se guarda el record en la variable ‘record’ y cree otros dos condicionales. Un condicional pondrá en pantalla el primer record del jugador pero sólo la primera vez que se inicie el juego. El segundo se encargará de poner el nuevo record sólo si es menor que el guardado por última vez en localStore
record = ((Date.now()-timeStart)/1000).toFixed(1);
if(record && !(parseInt(localStorage.getItem('gameRecord')))){
localStorage.setItem('gameRecord', record);
textRecord.innerText = +localStorage.getItem('gameRecord');
}
if(record<parseInt((localStorage.getItem('gameRecord')))){
localStorage.setItem('gameRecord', record);
textRecord.innerText = +localStorage.getItem('gameRecord');
}
El patito está vacio…
🎮OPORTUNIDAD DE MEJORA: Tarjetas de mensajes al ganar y perder el juego ⭐⭐
Resultado
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
Paso a paso
Mi solución.
function gameWin() {
const duration = (Date.now() - timeStart) / 1000;
const timeBefore = localStorage.getItem('record');
let record;
let message;
console.log('Terminaste el juego');
clearInterval(timeInterval);
if (!timeBefore) {
record = duration;
} else {
if (duration < timeBefore) {
record = duration;
message = `Superaste tú record antes ${timeBefore} ahora ${duration}`;
} else {
record = timeBefore;
message = `Ocupaste más tiempo`;
}
}
localStorage.setItem('record', record);
alert(`${record} - ${message}`);
}
💪 LocalStorage para guardar en local xd ❤️
Pues yo en gameWin utiliaria localStorage.setItem para guardar el record y creo un nuevo span en html donde imprimiria el mismo con getItem
function showTime() {
spanTime.innerHTML = formatTime(Date.now() - timeStart);
}
function formatTime(milisegundos) {
const segundos = Math.floor(milisegundos / 1000);
const minutos = Math.floor(segundos / 60);
const horas = Math.floor(minutos / 60);
return `${horas} horas ${minutos} minutos ${segundos} segundos`;
}
Hola, comparto la solución que implementé.
variable global para guardar el record.
let record = localStorage.getItem('record');
en la función startGame para renderizar el record guardado.
spanRecord.innerText = localStorage.getItem('record');
condicional en finishGame para registrar el record o nuevo record.
function finishGame() {
console.log('terminaste el juego, tremendo ganador sos!!');
clearInterval(timeInterval);
if(!record) {
record = timePlayer;
localStorage.setItem('record', record);
};
if(timePlayer < record) {
record = timePlayer;
localStorage.setItem('record', record);
};
spanRecord.innerText = localStorage.getItem('record');
};
Muchas gracias, saludos.
Apuntes de la clase:
"localStorage" sirve solamente si se esta ejecutando el código JS en un navegador web o que se ejecute junto un HTML.
Esto es el almacenamiento local en el navegador, es decir, se le pide al navegador que guarde alguna información por ti.
- localStorage.getItem es para leer alguna información que tengamos dentro de localStorage.
Ejemplo: localStorage.getItem("Nombre variable").
- localStorage.setItem es para guardar una variable por primera vez.
Ejemplo: localStorage.setItem("Variable a guardar", "Valor de la variable").
- localStorage.removeItem borra las variables guardadas en el navegador.
Ejemplo: localStorage.removeItem("Nombre variable").
Asi lo implemente yo:
function gameWin() {
console.log("TERMINASTE EL JUEGO!");
if (timePlayer < localStorage.puntaje) {
localStorage.setItem("puntaje", timePlayer);
}
clearInterval(timeInterval);
}
Si requieren determinar el menor de dos números, puedes utilizar el método Math.min(numero1,numero2).
este fue el codigo que realice, me imprime el tiempo pero si recargo la pagina no me deja impreso el tiempo
function gameWin() {
console.log('terminaste el juegp')
clearInterval(timeIntervale)
showREcord()
}
function showREcord () {
localStorage.setItem('record', formattedTime)
recordBestTime = localStorage.getItem('record')
bestTime.innerHTML = recordBestTime
}
Commit | Juego en Linea
En el HTML añadimos el siguiente codigo:
<p>Record: <span id="Record">00:00:000</span></p>
Ahora vamos al archivo game.js:
// Creamos la variable
const spanRecord = document.querySelector('#Record')
// añadimos una validadcion el funcion startGame() en la cual si existe algun record que nos lo ponga en nuestro elemento spanRecord
function startGame() {
*
*
if (localStorage.getItem('record')) {
spanRecord.innerHTML = localStorage.getItem('record')
}
// Recueradas nuestra variable player interval, pues pon atenci'on que ahora la utilizaremos
// En la funcion showTime() le daremos su valor
function showTime() {
*
playerInterval = Date.now() - timeStart;
// en la funcion gameWin() es donde ocurre la magia
function gameWin() {
*
*
// Si nos exite una varible record en nuestro localStorage, se ejecuta lo siguiente
if (!localStorage.getItem('record')) {
//Nuestro record sera el primer tiempo, este se imprimira
spanRecord.innerHTML = spanTime.outerText
// Guardamos el la variable record, que contiene el valor en formato de cronometro
localStorage.setItem('record', spanTime.outerText)
// Guardamos el la variable recordTime, que contiene el valor en milisegundos de nuestra variable playerInterval
localStorage.setItem('recordTime', playerInterval)
return
}
// pero ahora que pasa si rompemos nuestro record?
// preguntamos si nuestro tiempo en esa ronda (playerInterval) que fue menor al tiempo que se tiene ya guadada en nuestra variable recordTime
if (playerInterval < localStorage.getItem('recordTime')) {
// SI se cumple limpiamos el localStorage
localStorage.clear()
// Actualizamos los valores
spanRecord.innerHTML = spanTime.outerText
localStorage.setItem('record', spanTime.outerText)
localStorage.setItem('recordTime', playerInterval)
}
Listo, ahora sabes como hacerlo
Se logró banda después de horas de pensar y debuggear encontre una solucion.
MUCHO TEXTO…
cree dos funciones una para validar si ya existía un récord en localStorage y en caso de que fuera TRUE se ejecutaría en startGame para que el récord se imprimiera al inicio.
y la segunda es una validación en dos pasos la cual consiste en si en localStorage no hay datos guardados ó el nuevo puntaje es mayor al actual se modificaría el valor de localStorage. y la segunda validación es si el valor de localStorage era mayor a la nueva puntuación no se modificaría el valor.
esta última función se ejecuta en gameWin para que se actualice el valor del record.
Mi solución fue está, el cual está dentro de startGame();
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?