1

El programa consiste en ir mostrando valores de un array hasta que dos coincidan y cuando lo hacen aparece cuantos valores se han extraído hasta la coincidencia. El problema es que cuando el primer jugador obtiene los dos valores repetidos el botón se deshabilita pero cuando lo hace el jugador dos no se deshabilita y se puede continuar mostrando valores (muestro en el código) y se tendría que deshabilitar también.

Además necesitaría que una vez obtenido el número de extracciones de ambos jugadores éstos se compararan, tengo la función hecha pero no se cuando llamarla para que aparezca una vez hecho el juego, ya que si la llamo me aparece al principio antes de jugar. Muchas gracias!

start = false;

function empiezajuego(){
  if(!start){
    var name1 = document.getElementById("player1_start").value;
    var name2 = document.getElementById("player2_start").value;
    var aux = true;

    if(name1 == "" || name2 == ""){
      alert("Uno de los jugadores no ingreso su nombre");
      aux = false;
    }

    if(name1 == name2){
      alert("Los nombres de los jugadores coinciden");
      aux = false
    }

    if(aux){ 
      start=true;
      document.getElementById("start_form").style.display = "none";
      document.getElementById("game_main").style.display = "inline";
      document.getElementById("player1").innerHTML=name1;
      document.getElementById("player2").innerHTML=name2;

    }
  } else {
     alert("Juego ya iniciado"); 
  }
}

var cards = new Array(
  new Array("manzana", 1),
  new Array("manzana", 2),
  new Array("manzana", 3), 
  new Array("pera", 1),
  new Array("pera", 2),
  new Array("pera", 3),
  new Array("melon", 1),
  new Array("melon", 2),
  new Array("melon", 3)
);

var frutas1 = Array();
var frutas2 = Array();
var cuenta = 0;
var cuenta1 = 0;
var cuenta2 = 0;

function random_fruta(num){
  if(cards.length >0 ){
    var rand = Math.floor(Math.random()*cards.length);
    var frutas = "<br>fruta: "+cards[rand][0]+"<br><br> Valor:";
    var numero = cards[rand][1];
    document.getElementById("div"+num).innerHTML += frutas;
    document.getElementById("div"+num).innerHTML += numero;

    var repetido = 0;

    switch(num) {
    case 1:
     cuenta1++;
     cuenta = cuenta1;
     frutas1.push(numero);     

      frutas1.forEach(function(dato){
          if (dato == numero){
              repetido++;
          }
      });
     break;
    case 2:
     cuenta2++;
     cuenta = cuenta2;
     frutas2.push(numero);

      frutas2.forEach(function(dato){
          if (dato == numero){
              repetido++;
          }
      });
     break;
    }    

    if(repetido == 2){
      document.getElementsByTagName("button")[0].setAttribute('disabled', 'disabled');

      setTimeout(function(){
        var jugador = document.getElementById("player"+num+"_result");
        if (jugador.innerHTML == "0"){
          var puntua ='Se repitió el valor <br> fruta: ' + cards[rand][0] +
              ' - Valor: ' +    cards[rand][1] +'. Se extrayeron ' + cuenta +
              ' valores hasta encontrar el valor repetido.';
          jugador.innerHTML=puntua;
        } 
      }, 100);
    }
  }

}


function winner(){

  if(conteo1 < conteo2){
    alert(playerName1+" gano!!");

  } else if(conteo1 > conteo2){
    alert(playerName2+" gano!!");
  } else{
    alert("empate");
  }
}
<div id="start_form">
Jugador 1: <input type="text" id="player1_start"><br/>
Jugador 2: <input type="text" id="player2_start"><br/>
<input type="button" value="introduce" onclick="empiezajuego();" />
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="game_main"  style="display:none;">

<div id="boton"><button onclick="random_fruta(1);">Saca</button>
<span id="player1">0</span></div><span id="player1_result">0</span>
<div id="boton2"><button onclick="random_fruta(2);">Saca</button>
<span id="player2">0</span></div><span id="player2_result">0</span>

2
  • No tienes una función juego(), en el html onclick, sería empiezajuego() ?
    – GDP
    Commented el 30 may. 2018 a las 11:33
  • He arreglado el código un poco, ahora funciona como comenta el OP Commented el 30 may. 2018 a las 11:43

1 respuesta 1

0

No acabo de entender la dinámica del juego, pero cuando deshabilitas un botón, lo haces con este código:

document.getElementsByTagName("button")[0].setAttribute('disabled', 'disabled');

Con lo que deshabilitas el primer botón. Podrías deshabilitar todos así:

const buttons=Array.from(document.getElementsByTagName('button'));
buttons.forEach(button => button.setAttribute('disabled','disabled'));

Si te preguntas por qué uso Array.from, es porque lo que devuelve la query no es un Array, sino un HTMLCollection, que no tiene el método forEach.

Actualización: Si quieres deshabilitar uno sólo, puedes hacer lo siguiente: puesto que la función random_fruta recibe como parámetro un 1 o un 2, dependiendo de qué botón se ha pulsado, puedes usar ese número como índice:

const buttons=document.getElementsByTagName('button');
buttons[num-1].setAttribute('disabled','disabled')

Y puedes llamar a la función winner dentro del setTimeout que ejecutas cuando el juego ha terminado:

setTimeout(function(){
        var jugador = document.getElementById("player"+num+"_result");
        if (jugador.innerHTML == "0"){
          var puntua ='Se repitió el valor <br> fruta: ' + cards[rand][0] +
              ' - Valor: ' +    cards[rand][1] +'. Se extrayeron ' + cuenta +
              ' valores hasta encontrar el valor repetido.';
          jugador.innerHTML=puntua;
        }
        winner(); // Aquí 
      }, 100);

Otro potencial problema: la función winner comprueba el valor de conteo1 y conteo2, pero las variables existentes son cuenta1 y cuenta2, ten cuidado con esos detalles.

5
  • Hola Pablo muchas gracias por tu respuesta, tienes razon en las variables ya que las he cambiado varias veces, disculpa. El ganador me funciona muchas gracias. Lo que no consigo es el botón. Con tu código cuando extraes los números del primer botón se me deshabilitan los dos. Mi intención es que una vez se extraigan los dos numeros iguales el primer botón se deshabilite y cuando se extraigan dos números iguales con el segundo botón se deshabilite, que esto segundo es lo que falla en mi código y con el tuyo se deshabilita antes de poder hacer la extracción. Alguna idea? Gracias!
    – Vero Soler
    Commented el 30 may. 2018 a las 12:37
  • Actualizo... a ver si esta solución te vale Commented el 30 may. 2018 a las 13:07
  • Si!!! perfecto mil gracias!!!
    – Vero Soler
    Commented el 30 may. 2018 a las 13:27
  • Hola @PabloLozano resulta que la primera vez salió, pero a lo largo del día la función winner situada donde me indicaste aparece justo después de extraer los números iguales del primer botón, después se juega al segundo botón y aparece otra vez el alert, osea aparece dos veces (una después del primer jugador y otra después del segundo) no solo al final, la he ido cambiando de sitio y pasa lo mismo, a ti también te pasa?
    – Vero Soler
    Commented el 31 may. 2018 a las 0:04
  • Cierto, puedes crear una variable que indique el número de veces que has ejecutado la función del timeout y que sólo se llame la segunda vez a winner Commented el 31 may. 2018 a las 13:11

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.