3

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()});```
Nuevo colaborador
Ara Rojas es un usuario nuevo en el sitio. Tenlo en cuenta cuando preguntes por aclaraciones, comentes o respondas. Revisa nuestro Código de conducta.
14
  • Bienvenida. No estoy entendiendo bien cuál es el problema y qué es lo que debería pasar. Mira esta página ejemplo mínimo verificable por si te ayuda a explicarlo.
    – Mateo
    el 19 sep. a las 15:25
  • Deberias agregar tu HTML
    – alanfcm
    el 19 sep. a las 15:33
  • En primer lugar, te están enseñando mal. Si eres principiante debes escribir código simple, para que no te enredes con las variables, las constantes y las funciones. Segundo, me parece extraño que todo el código sea sólo definición de constantes, no veo ninguna función, y tampoco veo el inicio del código. Creo que debes organizar mejor tu código. Recuerda que a una constante NO SE LE PUEDE CAMBIAR SU VALOR en tiempo de ejecución.
    – Gimbot
    el 19 sep. a las 16:51
  • He editado la consigna y agregado el html. Gracias!
    – Ara Rojas
    el 19 sep. a las 16:53
  • 1
    tu funcion usuarioNuevaPartida setea la variable puntuacion a 0... pero cuando haces muestraPuntuacion();, tomas el valor del html.. y luego no se en que momento, porque me perdi y no lo logro encontrar, deberias setear el html a 0, no??? ahi es donde esta el lio me parece....
    – gbianchi
    el 19 sep. a las 18:28

0

Tu Respuesta

Ara Rojas es un nuevo usuario. Sé cortés y por favor lee nuestro Código de conducta.

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.