problema localStorage
Publicado por Tomas (1 intervención) el 01/02/2023 23:45:58
Buenas, estoy realizando un piedra, papel y tijera, al cual me gustaría agregarle un localStorage que al hacer un refresh queden guardados los marcadores que se estén jugando al momento con el nombre. Además de que el array de posiciones quede guardado con todos los nuevos jugadores que van terminando.
HTML:
<body>
<div class="contenedor">
<header>
<h1>piedra, papel y tijera</h1>
</header>
<main>
<form id="form">
<label for="nombre"><b>Ingrese su nombre:</b></label>
<input id="nombre" type="text" placeholder="Nombre" name="nombre" required>
<input type="submit" value="Ingresar">
</form>
<div>
<h2 class="titulo">Completa el nombre para jugar</h2>
<p class="instrucciones" id="instrucciones">Gana el primero en llegar a 5 victorias</p>
</div>
<div class="elegi-tu-ataque" id="elegi-tu-ataque">
<div class="ataques">
<button class="ataque" id="0"><img src="img/piedra.jpg" alt=""></button>
<button class="ataque" id="1"><img src="img/papel.jpg" alt=""></button>
<button class="ataque" id="2"><img src="img/tijera.jpg" alt=""></button>
</div>
</div>
<div id="contenedor-puntos"class="marcador">
<h3 class="titulo">resultado</h3>
<p id="nombre-usuario" class="nombre nombre-jugador">Jugador</p>
<p class="nombre nombre-computadora">Computadora</p>
<p id="puntos-jugador">0</p>
<p id="puntos-computadora">0</p>
</div>
<div class="mensaje ocultar" id="mensaje">
<p>
<span class="eleccion" id="eleccion-jugador">papel</span><br>
<span class="eleccion" id="eleccion-computadora">piedra</span>
</p>
<p id="gana-punto">Ganaste</p>
</div>
<button class="btn ocultar" id="reitentar">Reitentar juego</button>
<section>
<div id="tabla-posiciones" class="ocultar">
<h2 class="titulo">POSICIONES</h2>
<div id="contenedor-posiciones"></div>
</div>
</section>
</main>
JAVASCRIPT
let marcadorJugador = 0;
let marcadorComputadora = 0;
let miForm = document.getElementById("form")
let nombreUsuario = document.querySelector("#nombre-usuario")
let instrucciones = document.querySelector("#instrucciones");
let titulo = document.querySelector(".titulo");
let elegiTuAtaque = document.querySelector("#elegi-tu-ataque");
let contenedorMarcadorJugador = document.querySelector("#puntos-jugador");
let contenedorMarcadorComputadora = document.querySelector("#puntos-computadora");
let mensaje = document.querySelector("#mensaje");
let contenedorGanaPunto = document.querySelector("#gana-punto");
let contenedorEleccionJugador = document.querySelector("#eleccion-jugador");
let contenedorEleccionComputadora = document.querySelector("#eleccion-computadora");
let botonesAtaques = document.querySelectorAll(".ataque");
botonesAtaques.forEach(boton => {
boton.addEventListener("click", iniciarTurno);
});
let contenedorPosiciones = document.querySelector("#contenedor-posiciones" );
let tablaPosiciones = document.querySelector("#tabla-posiciones")
// FUNCIONES
function player(jugador) {
if (jugador === piedra.valor) {
contenedorEleccionJugador.innerText = nombre + " " + `atacó con ${piedra.opcion}`;
} else if (jugador === papel.valor) {
contenedorEleccionJugador.innerText = nombre + " " + `atacó con ${papel.opcion}`;
} else if (jugador === tijera.valor) {
contenedorEleccionJugador.innerText = nombre + " " + `atacó con ${tijera.opcion}`;
}
}
function maquina(computadora) {
if (computadora == piedra.valor) {
contenedorEleccionComputadora.innerText = `y computadora atacó con ${piedra.opcion}`;
} else if (computadora == papel.valor) {
contenedorEleccionComputadora.innerText = `y computadora atacó con ${papel.opcion}`;
} else if (computadora == tijera.valor) {
contenedorEleccionComputadora.innerText = `y computadora atacó con ${tijera.opcion}`;
}
}
function resultado(jugador, computadora) {
if (jugador == computadora) {
contenedorGanaPunto.innerText = "EMPATE"
} else if (jugador == piedra.valor && computadora == tijera.valor) {
marcadorJugador++;
contenedorMarcadorJugador.innerText = marcadorJugador
contenedorGanaPunto.innerText = "GANASTEEE!"
} else if (jugador == papel.valor && computadora == piedra.valor) {
marcadorJugador++;
contenedorMarcadorJugador.innerText = marcadorJugador
contenedorGanaPunto.innerText = "GANASTEEE!"
} else if (jugador == tijera.valor && computadora == papel.valor) {
marcadorJugador++;
contenedorMarcadorJugador.innerText = marcadorJugador
contenedorGanaPunto.innerText = "GANASTEEE!"
} else {
marcadorComputadora++;
contenedorMarcadorComputadora.innerText = marcadorComputadora
contenedorGanaPunto.innerText = "PERDISTE :("
}
}
function cargarPosiciones() {
contenedorPosiciones.innerHTML = '';
posiciones.forEach(posicion => {
const ul = document.createElement("ul");
ul.innerHTML = `<li>${posicion.nombre}</li><a>${posicion.puntaje}</a>`;
contenedorPosiciones.append(ul);
})
}
function reitentarJuego() {
instrucciones.classList.remove("ocultar");
elegiTuAtaque.classList.remove("ocultar");
reitentar.classList.add("ocultar");
mensaje.classList.add("ocultar");
tablaPosiciones.classList.add("ocultar");
marcadorJugador = 0;
marcadorComputadora = 0;
titulo.innerText = `elige tu ataque ${nombre}`;
contenedorMarcadorJugador.innerText = marcadorJugador;
contenedorMarcadorComputadora.innerText = marcadorComputadora;
}
// CLASES
class Ataque{
constructor(opcion, valor) {
this.opcion = opcion;
this.valor = valor;
}
}
const piedra = new Ataque("piedra", 0);
const papel = new Ataque("papel", 1);
const tijera = new Ataque("tijera", 2);
class Posicion {
constructor(nombre, puntaje) {
this.nombre = nombre;
this.puntaje = puntaje;
}
setNombre(nuevoNombre) {
if(nombre != "") {
this.nombre = nuevoNombre;
}
}
setPuntaje(nuevoPuntaje) {
this.puntaje = nuevoPuntaje;
}
}
const posiciones = [];
posiciones.push(new Posicion("Fabrizio", 1));
posiciones.push(new Posicion("Carla", -1));
posiciones.push(new Posicion("Lautaro", 0));
posiciones.push(new Posicion("Juana", 3));
posiciones.push(new Posicion("Milagros", 2));
posiciones.push(new Posicion("Lionel", 4));
posiciones.push(new Posicion("Agustin", -2));
posiciones.push(new Posicion("Victoria", 1));
// INICIO JUEGO
// NOMBRE
miForm.addEventListener("submit", (e) => {
e.preventDefault();
formulario = e.target
nombre = formulario.children[1].value;
nombreUsuario.innerText = nombre;
titulo.innerText = `Elige tu ataque ${nombre}`;
});
function iniciarTurno(e) {
if(nombre != nombreUsuario.innerText) {
return false;
}
// ATAQUE JUGADOR
let jugador = Number(e.currentTarget.id);
player(jugador);
// ATAQUE ALEATORIO DE COMPUTADORA
let computadora = Math.round(Math.random() *2);
maquina(computadora);
// RESULTADO
resultado(jugador, computadora);
mensaje.classList.remove("ocultar");
console.log(`Resultado: ` + nombre + " " + marcadorJugador + " - Computadora " + marcadorComputadora);
// FINAL DEL JUEGO
if (marcadorComputadora === 5 || marcadorJugador === 5) {
if (marcadorJugador == 5) {
titulo.innerText = `FELICITACIONES ${nombre} GANASTE EL JUEGO`;
}
if (marcadorComputadora == 5) {
titulo.innerText = `PERDISTE EL JUEGO ${nombre}`;
}
instrucciones.classList.add("ocultar");
elegiTuAtaque.classList.add("ocultar");
reitentar.classList.remove("ocultar");
reitentar.addEventListener("click", reitentarJuego);
// TABLA DE POSICIONES
posiciones.push(new Posicion(nombre, marcadorJugador - marcadorComputadora));
usuarioNuevo = new Posicion(nombre, marcadorJugador - marcadorComputadora);
posiciones.sort((a, b) => b.puntaje - a.puntaje);
tablaPosiciones.classList.remove("ocultar");
cargarPosiciones();
}
}
HTML:
<body>
<div class="contenedor">
<header>
<h1>piedra, papel y tijera</h1>
</header>
<main>
<form id="form">
<label for="nombre"><b>Ingrese su nombre:</b></label>
<input id="nombre" type="text" placeholder="Nombre" name="nombre" required>
<input type="submit" value="Ingresar">
</form>
<div>
<h2 class="titulo">Completa el nombre para jugar</h2>
<p class="instrucciones" id="instrucciones">Gana el primero en llegar a 5 victorias</p>
</div>
<div class="elegi-tu-ataque" id="elegi-tu-ataque">
<div class="ataques">
<button class="ataque" id="0"><img src="img/piedra.jpg" alt=""></button>
<button class="ataque" id="1"><img src="img/papel.jpg" alt=""></button>
<button class="ataque" id="2"><img src="img/tijera.jpg" alt=""></button>
</div>
</div>
<div id="contenedor-puntos"class="marcador">
<h3 class="titulo">resultado</h3>
<p id="nombre-usuario" class="nombre nombre-jugador">Jugador</p>
<p class="nombre nombre-computadora">Computadora</p>
<p id="puntos-jugador">0</p>
<p id="puntos-computadora">0</p>
</div>
<div class="mensaje ocultar" id="mensaje">
<p>
<span class="eleccion" id="eleccion-jugador">papel</span><br>
<span class="eleccion" id="eleccion-computadora">piedra</span>
</p>
<p id="gana-punto">Ganaste</p>
</div>
<button class="btn ocultar" id="reitentar">Reitentar juego</button>
<section>
<div id="tabla-posiciones" class="ocultar">
<h2 class="titulo">POSICIONES</h2>
<div id="contenedor-posiciones"></div>
</div>
</section>
</main>
JAVASCRIPT
let marcadorJugador = 0;
let marcadorComputadora = 0;
let miForm = document.getElementById("form")
let nombreUsuario = document.querySelector("#nombre-usuario")
let instrucciones = document.querySelector("#instrucciones");
let titulo = document.querySelector(".titulo");
let elegiTuAtaque = document.querySelector("#elegi-tu-ataque");
let contenedorMarcadorJugador = document.querySelector("#puntos-jugador");
let contenedorMarcadorComputadora = document.querySelector("#puntos-computadora");
let mensaje = document.querySelector("#mensaje");
let contenedorGanaPunto = document.querySelector("#gana-punto");
let contenedorEleccionJugador = document.querySelector("#eleccion-jugador");
let contenedorEleccionComputadora = document.querySelector("#eleccion-computadora");
let botonesAtaques = document.querySelectorAll(".ataque");
botonesAtaques.forEach(boton => {
boton.addEventListener("click", iniciarTurno);
});
let contenedorPosiciones = document.querySelector("#contenedor-posiciones" );
let tablaPosiciones = document.querySelector("#tabla-posiciones")
// FUNCIONES
function player(jugador) {
if (jugador === piedra.valor) {
contenedorEleccionJugador.innerText = nombre + " " + `atacó con ${piedra.opcion}`;
} else if (jugador === papel.valor) {
contenedorEleccionJugador.innerText = nombre + " " + `atacó con ${papel.opcion}`;
} else if (jugador === tijera.valor) {
contenedorEleccionJugador.innerText = nombre + " " + `atacó con ${tijera.opcion}`;
}
}
function maquina(computadora) {
if (computadora == piedra.valor) {
contenedorEleccionComputadora.innerText = `y computadora atacó con ${piedra.opcion}`;
} else if (computadora == papel.valor) {
contenedorEleccionComputadora.innerText = `y computadora atacó con ${papel.opcion}`;
} else if (computadora == tijera.valor) {
contenedorEleccionComputadora.innerText = `y computadora atacó con ${tijera.opcion}`;
}
}
function resultado(jugador, computadora) {
if (jugador == computadora) {
contenedorGanaPunto.innerText = "EMPATE"
} else if (jugador == piedra.valor && computadora == tijera.valor) {
marcadorJugador++;
contenedorMarcadorJugador.innerText = marcadorJugador
contenedorGanaPunto.innerText = "GANASTEEE!"
} else if (jugador == papel.valor && computadora == piedra.valor) {
marcadorJugador++;
contenedorMarcadorJugador.innerText = marcadorJugador
contenedorGanaPunto.innerText = "GANASTEEE!"
} else if (jugador == tijera.valor && computadora == papel.valor) {
marcadorJugador++;
contenedorMarcadorJugador.innerText = marcadorJugador
contenedorGanaPunto.innerText = "GANASTEEE!"
} else {
marcadorComputadora++;
contenedorMarcadorComputadora.innerText = marcadorComputadora
contenedorGanaPunto.innerText = "PERDISTE :("
}
}
function cargarPosiciones() {
contenedorPosiciones.innerHTML = '';
posiciones.forEach(posicion => {
const ul = document.createElement("ul");
ul.innerHTML = `<li>${posicion.nombre}</li><a>${posicion.puntaje}</a>`;
contenedorPosiciones.append(ul);
})
}
function reitentarJuego() {
instrucciones.classList.remove("ocultar");
elegiTuAtaque.classList.remove("ocultar");
reitentar.classList.add("ocultar");
mensaje.classList.add("ocultar");
tablaPosiciones.classList.add("ocultar");
marcadorJugador = 0;
marcadorComputadora = 0;
titulo.innerText = `elige tu ataque ${nombre}`;
contenedorMarcadorJugador.innerText = marcadorJugador;
contenedorMarcadorComputadora.innerText = marcadorComputadora;
}
// CLASES
class Ataque{
constructor(opcion, valor) {
this.opcion = opcion;
this.valor = valor;
}
}
const piedra = new Ataque("piedra", 0);
const papel = new Ataque("papel", 1);
const tijera = new Ataque("tijera", 2);
class Posicion {
constructor(nombre, puntaje) {
this.nombre = nombre;
this.puntaje = puntaje;
}
setNombre(nuevoNombre) {
if(nombre != "") {
this.nombre = nuevoNombre;
}
}
setPuntaje(nuevoPuntaje) {
this.puntaje = nuevoPuntaje;
}
}
const posiciones = [];
posiciones.push(new Posicion("Fabrizio", 1));
posiciones.push(new Posicion("Carla", -1));
posiciones.push(new Posicion("Lautaro", 0));
posiciones.push(new Posicion("Juana", 3));
posiciones.push(new Posicion("Milagros", 2));
posiciones.push(new Posicion("Lionel", 4));
posiciones.push(new Posicion("Agustin", -2));
posiciones.push(new Posicion("Victoria", 1));
// INICIO JUEGO
// NOMBRE
miForm.addEventListener("submit", (e) => {
e.preventDefault();
formulario = e.target
nombre = formulario.children[1].value;
nombreUsuario.innerText = nombre;
titulo.innerText = `Elige tu ataque ${nombre}`;
});
function iniciarTurno(e) {
if(nombre != nombreUsuario.innerText) {
return false;
}
// ATAQUE JUGADOR
let jugador = Number(e.currentTarget.id);
player(jugador);
// ATAQUE ALEATORIO DE COMPUTADORA
let computadora = Math.round(Math.random() *2);
maquina(computadora);
// RESULTADO
resultado(jugador, computadora);
mensaje.classList.remove("ocultar");
console.log(`Resultado: ` + nombre + " " + marcadorJugador + " - Computadora " + marcadorComputadora);
// FINAL DEL JUEGO
if (marcadorComputadora === 5 || marcadorJugador === 5) {
if (marcadorJugador == 5) {
titulo.innerText = `FELICITACIONES ${nombre} GANASTE EL JUEGO`;
}
if (marcadorComputadora == 5) {
titulo.innerText = `PERDISTE EL JUEGO ${nombre}`;
}
instrucciones.classList.add("ocultar");
elegiTuAtaque.classList.add("ocultar");
reitentar.classList.remove("ocultar");
reitentar.addEventListener("click", reitentarJuego);
// TABLA DE POSICIONES
posiciones.push(new Posicion(nombre, marcadorJugador - marcadorComputadora));
usuarioNuevo = new Posicion(nombre, marcadorJugador - marcadorComputadora);
posiciones.sort((a, b) => b.puntaje - a.puntaje);
tablaPosiciones.classList.remove("ocultar");
cargarPosiciones();
}
}
Valora esta pregunta
0