Tengo un juego de cartas llamado 7 y media, solo utilizo la mano de bastos, el juego consiste en que debes sumar 7.5 puntos con las cartas, te dan una carta a la vez y en cada oportunidad puedes seguir (buscando alcanzar 7.5 puntos) o plantarse, allí tienes la oportunidad de ver que hubiera pasado si seguías o de iniciar una nueva partida. Las cartas del 1 al 7 valen ese mismo número, se salta el 8 y el 9; y las cartas 10, 11 y 12 valen 0.5.
El juego, al presionar el botón pedir carta te da una carta, alli tienes la opción de seguir pidiendo cartas o plantarte. Al plantarte aparece el boton ¿que hubiera pasado? y puedes pedir una carta más, pero ya termina la partida. Luego con el botón nueva partida, se reinicia.
Mi inconveniente es que al plantarme en varias rondas varias veces, ** se va acumulando el puntaje, o sea no resetea la puntuación con la nueva partida**. Hay una función de nueva partida en la cual la puntuación está determinada en 0. Realmente no entiendo bien si el error está en la función del boton de resultadoContinuar o en la nuevaPartida.
Entiendo que son muchas funciones para un juego muy simple, es así como me están enseñando. Bueno y eso, si tienen algun consejito en buen rollo es más que bienvenido :)
Quiero aclarar que estoy empezando a programar.
Aquí va el código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="/src/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app">
<img src="https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/back.jpg" alt="carta inicial" id="cartaInicial" class="cartas">
<h1 id="puntuacion"></h1>
<button id="pedirCarta" class="button">Pedir Carta</button>
<button id="plantarse" class="button">Plantarse</button>
<button id="nuevaPartida" class="button">Nueva Partida</button>
<h2 id="mostrarResultado"></h2>
<button id="resultadoContinuar">¿Que hubiera pasado?</button>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
let puntuacion : number = 0;
let usuarioSePlanto: boolean = false;
const numeroAleatorio = () => Math.floor(Math.random() * 10) +1;
const numerosCartas = (valor:number) => (valor > 7 ) ? valor + 2 : valor;
const puntuacionCarta = (valor:number) => (valor <= 7) ? valor : 0.5;
const puntosAcumulados = (valor:number) => puntuacion += valor;
const estadoPartida = (puntuacion:number):boolean => puntuacion >= 7.5;
const dameCarta = () : void => {
const numero = numeroAleatorio();
const puntuacionCartaValor = puntuacionCarta(numero);
puntosAcumulados(puntuacionCartaValor);
const valorCarta = numerosCartas(numero);
const imagenURL = mostrarCarta(valorCarta);
vistaCarta(imagenURL);
muestraPuntuacion();
if(estadoPartida(puntuacion)){
const mensaje = devolverMensaje(puntuacion);
mostrarMensajeResultado(mensaje);
desactivarBotones();
};
};
const muestraPuntuacion = () => {
const elementoPuntuacion = document.getElementById('puntuacion');
if (elementoPuntuacion && elementoPuntuacion instanceof HTMLHeadingElement) {
elementoPuntuacion.textContent = `Puntuación: ${puntuacion}`;
} else {
console.error('No se ha encontrado el contenedor de mostrar puntuacion.');
};
};
const mostrarCarta = (numerosCartas:number) : string => {
let cartaURL='';
switch (numerosCartas){
case 0:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/back.jpg";
break;
case 1:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/1_as-copas.jpg";
break;
case 2:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/2_dos-copas.jpg";
break;
case 3:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/3_tres-copas.jpg";
break;
case 4:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/4_cuatro-copas.jpg";
break;
case 5:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/5_cinco-copas.jpg";
break;
case 6:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/6_seis-copas.jpg";
break;
case 7:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/7_siete-copas.jpg";
break;
case 10:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/10_sota-copas.jpg";
break;
case 11:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/11_caballo-copas.jpg";
break;
case 12:
cartaURL = "https://raw.githubusercontent.com/Lemoncode/fotos-ejemplos/main/cartas/copas/12_rey-copas.jpg";
break;
default:
console.log(`Error!`)
break;
};
return cartaURL;
};
const vistaCarta = (cartaURL:string) => {
const cartaContainer = document.getElementById('cartaInicial');
if (cartaContainer && cartaContainer instanceof HTMLImageElement){
cartaContainer.src = cartaURL;
} else {
console.error('No se ha encontrado la imagen de la carta.')
}
};
const devolverMensaje = (puntuacion: number): string => {
let mensaje = '';
if (puntuacion <= 4) {
mensaje = `Has sido muy conservador.`;
} else if (puntuacion <= 5) {
mensaje = `Te ha entrado el canguelo eh?`;
} else if (puntuacion <= 7) {
mensaje = `Casi casi...`;
} else if (puntuacion ===7.5){
mensaje = `¡Has ganado la partida!`;
} else if (puntuacion > 7.5){
mensaje = `Partida perdida. ¡Inténtalo de nuevo!`;
} else {
mensaje = 'No se puede mostrar mensaje de plantarse';
}
return mensaje;
};
const mostrarMensajeResultado = (mensaje:string) => {
const elementoResultado = document.getElementById('mostrarResultado');
if (elementoResultado && elementoResultado instanceof HTMLHeadingElement){
elementoResultado.textContent = mensaje;
} else {
console.error('No se puede mostrar mensaje de resultado');
};
};
const mostrarMensaje = (puntuacion: number) => {
const mensaje = devolverMensaje(puntuacion);
mostrarMensajeResultado(mensaje);
};
const desactivarBotones = () => {
handleBotonPedirCarta(false);
handleBotonPlantarse(false);
handleBotonResultadoContinuar(false);
};
const activarBotones = () => {
handleBotonPedirCarta(true);
handleBotonPlantarse(true);
handleBotonResultadoContinuar(true);
}
const usuarioSePlanta = () => {
mostrarMensaje(puntuacion);
handleBotonPedirCarta(false);
usuarioSePlanto = true;
mostrarBotonResultadoContinuar();
};
const usuarioNuevaPartida = () => {
puntuacion = 0;
muestraPuntuacion();
const url = mostrarCarta(0);
vistaCarta(url);
mostrarMensajeResultado('');
activarBotones();
usuarioSePlanto = false;
mostrarBotonResultadoContinuar();
};
/* BOTONES */
const eventos = () => {
const botonPedirCarta = document.getElementById('pedirCarta');
const botonPlantarse = document.getElementById('plantarse');
const botonNuevaPartida = document.getElementById('nuevaPartida');
if (botonPedirCarta && botonPedirCarta instanceof HTMLButtonElement) {
botonPedirCarta.addEventListener('click', () => dameCarta());
} else {
console.error('Error: event listener pedir carta');
};
if (botonPlantarse && botonPlantarse instanceof HTMLButtonElement) {
botonPlantarse.addEventListener('click', () => usuarioSePlanta());
} else {
console.error('Error: event listener plantarse');
};
if (botonNuevaPartida && botonNuevaPartida instanceof HTMLButtonElement){
botonNuevaPartida.addEventListener('click', () => usuarioNuevaPartida());
} else {
console.error('Error: event listener nueva partida');
};
};
const mostrarBotonResultadoContinuar = () => {
const botonResultadoContinuar = document.getElementById('resultadoContinuar');
if (botonResultadoContinuar && botonResultadoContinuar instanceof HTMLButtonElement) {
botonResultadoContinuar.style.display = usuarioSePlanto ? 'block' : 'none';
botonResultadoContinuar.addEventListener('click', () => {
dameCarta();
botonResultadoContinuar.disabled=true;
});
} else {
console.error('Error: No se ha encontrado el botón resultado continuar');
}
};
/* Activar o desactivar botones*/
const handleBotonPedirCarta = (activar:boolean) => {
const botonPedirCarta = document.getElementById('pedirCarta');
if (botonPedirCarta && botonPedirCarta instanceof HTMLButtonElement) {
botonPedirCarta.disabled = !activar;
} else {
console.error('Error: No se ha encontrado el botón Pedir Carta');
}
};
const handleBotonPlantarse = (activar:boolean) => {
const botonPlantarse = document.getElementById('plantarse');
if (botonPlantarse && botonPlantarse instanceof HTMLButtonElement) {
botonPlantarse.disabled = !activar;
} else {
console.error('Error: No se ha encontrado el botón Plantarse');
}
};
const handleBotonNuevaPartida = (activar:boolean) => {
const botonNuevaPartida = document.getElementById('nuevaPartida');
if (botonNuevaPartida && botonNuevaPartida instanceof HTMLButtonElement){
botonNuevaPartida.disabled = !activar;
} else {
console.error('Error: No se ha encontrado el botón nueva partida');
}
};
const handleBotonResultadoContinuar = (activar:boolean) => {
const botonResultadoContinuar = document.getElementById('resultadoContinuar');
if (botonResultadoContinuar && botonResultadoContinuar instanceof HTMLButtonElement){
botonResultadoContinuar.disabled = !activar;
} else {
console.error('Error: No se ha encontrado el botón resultado continuar');
}
};
document.addEventListener('DOMContentLoaded', () => {
muestraPuntuacion(), eventos()});```