5

Tengo un pequeño juego de cartas con el que estoy tratando de aprender las funciones y los bucles en javascript. Tengo varios errores en el código, uno es que la banca sigue sacando cartas después de superar el limite de Siete Y Media. Pero la principal preocupación es como conseguir reiniciar el juego una vez terminado. He probado varias formas sin ningún éxito, claro esta que no lo hago correctamente. He buscado y consultado y me han aconsejado que busque mi solución en dirección a los bucles de eventos. Y he buscado por Internet sin encontrar nada claro. ¿ Donde encuentro documentación a este respecto ? ¿ Como puedo estructurar mi código para hacerlo funcional y reiniciar el programa una vez terminado? Muestro mi código para que me den ideas de como debo organizarlo y si es posible saber donde puedo encontrar documentación para guiarme y aprender sobre esto. Gracias

EDITO para mostrar el funcionamiento del juego:

El juego consiste ir pinchado las cartas, las cuales se muestran aleatorias y llegar a una puntuación máxima de 7,5 La baraja consta de 48 cartas distribuidas en 4 palos: oros, copas, espadas y bastos. Las cartas son desde el 1 al 12. Las cartas 9, 10, 11 y 12 son comodines y tiene una puntuación de 1/2, el resto de cartas tienen su valor. Si las cartas marcan mas de 7, 5 el jugador pierde y termina la partida. Si yo me paso de 7,5 pierdo y gana la banca. Si me planto antes de 7.5, comienza el turno de la banca, y si se pasa de 7,5, pierde. Para empezar un nuevo juego, debo reiniciar el navegador, y no consigo que el juego se reinicie del botón que hice para esto.

var carta = new Array(11);
var palos = new Array("Oros", "Bastos", "Copas", "Espadas");
var cartas_repe = new Array();
var puntos = 0;
var puntos_jugador, puntos_banca;

for (i = 1; i <= 10; i++) {
  carta[i] = palos;
}


//elegir mis cartas

function aleatoria() {

  var num = parseInt((Math.random() * 10) + 1);
  var palo = parseInt(Math.random() * 4);
  var elegida = num + carta[num][palo];
  var selec;

  for (j = 0; j <= cartas_repe.length; j++) {

    selec = cartas_repe[j];

    while (selec == elegida) {

      num = parseInt((Math.random() * 10) + 1);
      palo = parseInt(Math.random() * 4);

      elegida = num + carta[num][palo];
      j = -1;
    }
  }

  cartas_repe.push(elegida);

  document.getElementById("carta_jugador").src = "images/" + num + carta[num][palo] + ".jpg";
  document.getElementById("carta_jugador").style.visibility = 'visible';

  if (num <= 7) {

    puntos = puntos + num;
  }
  else { puntos = puntos + 0.5; }

  if (puntos > 7.5) {

    puntos_jugador = puntos;
    document.getElementById("puntos").value = puntos;
    recuento();

  }
  else document.getElementById("puntos").value = puntos;

  document.getElementById("todas_cartas").innerHTML += "<img id='carta_jugador' alt='' src='images/" + num + carta[num][palo] + ".jpg' style='height: 97px; width: 66px; margin-top: 10px; margin-left: 4px;' />"

}

//me planto en el juego

function plantarse() {
  document.getElementById("im_jugar").src = "images/trasera.jpg";
  document.getElementById("im_jugar").style.cursor = "default";
  document.getElementById("im_jugar").onclick = " ";
  puntos_jugador = puntos;
  puntos = 0;
  banca();
}

//juega la banca

function banca() {

  var num = parseInt((Math.random() * 10) + 1);
  var palo = parseInt(Math.random() * 4);
  var elegida = num + carta[num][palo];
  var selec;

  for (j = 0; j <= cartas_repe.length; j++) {

    selec = cartas_repe[j];

    while (selec == elegida) {
      num = parseInt((Math.random() * 10) + 1);
      palo = parseInt(Math.random() * 4);

      elegida = num + carta[num][palo];
      j = -1;
    }
  }

  cartas_repe.push(elegida);

  document.getElementById("carta_banca").src = "images/" + num + carta[num][palo] + ".jpg";
  document.getElementById("carta_banca").style.visibility = 'visible';

  if (num <= 7) {
    puntos = puntos + num;
  }
  else { puntos = puntos + 0.5; }

  if (puntos > 7.5) {
    recuento();
    document.getElementById("puntos2").value = puntos;
    document.getElementById("todas_cartas_banca").innerHTML += "<img id='carta_banca' alt='' src='images/" + num + carta[num][palo] + ".jpg' style='height: 97px; width: 66px; margin-top: 10px; margin-left: 4px;' />"
  }
  else {
    document.getElementById("puntos2").value = puntos;
    document.getElementById("todas_cartas_banca").innerHTML += "<img id='carta_banca' alt='' src='images/" + num + carta[num][palo] + ".jpg' style='height: 97px; width: 66px; margin-top: 10px; margin-left: 4px;' />"

    if (puntos <= puntos_jugador) {

      setTimeout("banca()", 1000);
    }
    else recuento();
  }
}

//recuento de puntos
function recuento() {
  puntos_banca = puntos;

  if (puntos_banca > puntos_jugador && puntos_banca <= 7.5 || puntos_jugador > 7.5) {
    document.getElementById("texto").value = "GANA LA BANCA";

  }
  else if (puntos_jugador > puntos_banca && puntos_jugador <= 7.5 || puntos_banca > 7.5) {
    document.getElementById("texto").value = "HAS GANADO";

  }
  else if (puntos_jugador == puntos_banca) {
    document.getElementById("texto").value = "EMPATE";
  }

  bloquear();
}

function bloquear() {

  document.getElementById("im_jugar").onclick = " ";
  document.getElementById("boton2").disabled = 'disabeled';
  document.getElementById("im_jugar").src = "images/trasera.jpg";
  document.getElementById("im_jugar").style.cursor = "default";
}

function reiniciar() {
  document.getElementById("reiniciar").onclick = aleatoria()
}
<!DOCTYPE html>
<head>
  <title>Juego de Cartas siete y media</title>
</head>
<body>

  <div style="height: 53px; margin-left: 180px; width: 1010px; margin-top: 0px;">

    <div style="float:left;width: 379px; height: 55px;">

      <p style="font-size: 25px; height: 34px; width: 300px; margin-left: 88px">
        <strong>Total Jugador: </strong>
        <input disabled="disabled" type="text" id="puntos" style="width: 45px; height: 28px; text-align:center;font-size: 20px;border-width: 0px; margin-top: 0px;" />
        <input id="boton2" type="button" value="Me planto" onclick="plantarse()" style="width: 76px; height: 32px; margin-top: 0px; margin-left: 6px;" />
      </p>

    </div>
    <div style="float:left; width: 505px; height: 56px;">

      <p style="font-size: 25px; height: 34px; width: 464px; margin-left: 4px">
        <input type="text" id="texto" value="7 y Medio" style="border-style: none; border-color: inherit; border-width: 0px; text-align:center; height: 31px; font-size: 20px; text-decoration: underline overline; margin-left: 9px;" /><strong>&nbsp;&nbsp;&nbsp;&nbsp;
          Total Banca: </strong>
        <input disabled="disabled" type="text" id="puntos2" style="width: 45px; height: 28px; text-align:center;font-size: 20px;border-width: 0px;" />
      </p>
    </div>
  </div>
  <div id="contenedor_central" style="margin-left: 180px; margin-top:15px; height: 480px; width: 1009px;">
    <div id="juego_jugador" style="border: thin groove #C0C0C0; width: 500px; height: 437px; float:left;">
      <img id="im_jugar" onclick="aleatoria()" alt="Carta trasera" src="images/trasera_jug.jpg" style="height: 270px; width: 181px; margin-top: 40px; margin-left: 40px; cursor: pointer;" />
      <img id="carta_jugador" alt="" src="" style="height: 270px; width: 181px; margin-top: 40px; margin-left: 40px; visibility: hidden;" />
      <div id="todas_cartas" style="height: 122px; margin-left: 31px;"></div>
    </div>

    <div id="juego_banca" style="border-style: groove; border-width: thin thin thin 0px; border-color: #C0C0C0; width: 500px; height: 437px; float:left;">
      <img alt="Carta trasera" src="images/trasera.jpg" style="height: 270px; width: 181px; margin-top: 40px; margin-left: 40px;" />
      <img id="carta_banca" alt="" src="" style="height: 270px; width: 181px; margin-top: 40px; margin-left: 40px; visibility: hidden;" />
      <div id="todas_cartas_banca" style="height: 122px; margin-left: 30px;"></div>
    </div>
    <input id="reiniciar" type="button" value="Reiniciar" onclick="reiniciar()" style="width: 224px;height: 23px;margin-top: 0px;margin-top:15px;" />
  </div>
</body>
</html>

8
  • 1
    Veo varios errores en el codigo, sin embargo no puedo dar una respuesta que simplemente no vaya a funcionar, y como no tengo del todo un conocimiento acerca de como funciona tu juego de cartas (El rol de la banca, la cantidad de cartas de la baraja y el como se gana o se pierde), no puedo darte aun una respuesta, por lo que... podrias porfavor dar una pequeña introduccion de estas cosas para darnos una idea?, asi se hace mas facil dar exactamente con lo que el juego requiere.
    – Layer
    el 5 ago. 2019 a las 9:26
  • 1
    Ya que aca las cartas van desde la A, hasta la K, y la baraja es de 54 cartas, aparte la escalera completa de cartas por cada simbolo o palo, es de 13 por cada signo o palo.
    – Layer
    el 5 ago. 2019 a las 9:28
  • 1
    Y los modos de juego son demasiado variados y por lo que veo, el modo de juego que se juega aca es diferente.
    – Layer
    el 5 ago. 2019 a las 9:29
  • 1
    Gracias por su interés @Riven . Ya edite la pregunta, necesito añadir una función que reinicie el juego una vez terminado, pero quiero saber como hacerlo, necesito ideas de como hacerlo el 5 ago. 2019 a las 11:52
  • 2
    Solo volviendo a recargar la página no es suficiente? Quiero decir, que debes cerrar y volver abrir el navegador para que se reinice?
    – GeoPDK
    el 5 ago. 2019 a las 14:01

1 respuesta 1

1

1- Aprender a utilizar el debuger es fundamental para corregir errores y ver que hace tu código exactamente. Te digo esto primero porque si tu codigo ya tiene errores de base no te va a funcionar el resto de funcionalidades que quieras hacer despues.

Asi en general veo que tienes mal o no se entiende lo siguiente:

  • Los arrays en js empiezan en la posición 0 y no en 1.

  • En el primer bucle recorres y asignas el array empezando por 1 y no por la posición 0.

  • Hay uno de los arrays que tiene 4 elementos ( posiciones 0 1 2 3) y aun así con el random que pones te puede acceder a la posición 4 que no tiene y en ese caso te sacará un error de outbounds.

  • Luego, hay un while dentro de un for que no se exactamente lo que quieres hacer con esto.

2- No hace falta que recarges la página para volver a resetear tu juego. Con eventos, funciones y manipular el DOM es suficiente para hacer eso que quieres hacer.

Por ejemplo, con un evento onclick (asociado a un botón) que llamé a la funcion resetear sin parametros y que reseté la puntuacion, las cartas a mostrar etc. A continuación, que modifique el DOM (los elementos donde está la puntuación, las cartas etc).

Con esto te oriento o te doy ideas de por donde debes empezar, evidentemente no te lo voy a hacer porque no es algo concreto.

Si buscas en google encontrarás ejemplos de como llamar eventos, actualizar el DOM etc.

Ej: https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Eventos

2
  • Gracias @rgr88 por tus aportes y no hacer el problema. ¿Donde leo para aprender a utilizar debuger? El código lo cogí de un ejemplo que vi para modificare y estudiar, estoy empezando con JS por lo que tratare de hacer mi propio programa para seguir aprendiendo. el 5 ago. 2019 a las 17:46
  • 1
    w3schools.com/js/js_debugging.asp Con cualquier navegador puedes hacer debuger para ver el valor de las variables etc. Si buscas en youtube seguro que encuentras algun video para empezar. Te recomiendo w3schools.com que es gratutio y es el standard al igual que learn.freecodecamp.org en la seccion de javascript
    – rgr88
    el 5 ago. 2019 a las 20:14

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.