6

estamos haciendo un proyecto de Piedra Papel y Tijera y no conseguimos que se cumplan varias condiciones.

Explicacion del juego:

-Cuando iniciamos la pagina se inicia con onload la funcion cuentaAtras(), mientras esté activada no pueda selecionar una opcion (piedra,papel o tijera), ni darle al boton de reiniciar("Pincha Aqui").

-Tampoco conseguimos que una vez que se ha finalizado la cuenta atrás no deje al jugador reiniciar hasta que elija una opcion. Paso el código Javascript

var userCount = 0;
var iaCount = 0;
var alerta = "Espera";
var x = 5;
var activo = true;
//Array con las opciones
var imagenes=new Array(
  ['img/PPT_Roca.png'],
  ['img/PPT_Papel.png'],
  ['img/PPT_Tijera.png'],
  ['img/PPT_Lagarto.png'],
  ['img/PPT_Spock.png']
  );


  //Funcion para comparar lo que ha elegido el jugador y la maquina-->

function opcion(humano){
 var cpu = getRandomInt();
 var resultado_texto = ["empate","ganas","pierdes"];
 var nombre = ["Piedra","Papel","Tijera"];
 var eleccion = true;
 var jugada = [
        [0,1,2,],
        [2,0,1,],
        [1,2,0,]
  ];

  respuestaIA.src=imagenes[cpu];

  var resultado = jugada[cpu][humano];


  if (resultado_texto[resultado] == "pierdes"){
      eleccion = false;
      iaCount++;
      console.log("Has perdido, parguela");
      document.getElementById('contador_ia').innerHTML = iaCount;
      document.getElementsByClassName('respuesta').innerHTML = "has perdido";
    }
  else if (resultado_texto[resultado] == "ganas"){
      eleccion = false;
      userCount++;
      console.log("Has ganado,Puto");
      document.getElementById('contador_usuario').innerHTML = userCount;
      document.getElementsByClassName('respuesta').innerHTML = "has ganado";
  }
  else{
    eleccion = false;
    console.log("no hace nada");
  }


  console.log(resultado);
  console.log("HUMANO: " + nombre[humano]);
  console.log("CPU: " + nombre[cpu]);
  console.log(resultado_texto[resultado]);

}


  //funcion para optener un numero random-->
function getRandomInt() {
  return Math.floor(Math.random() * (4 - 0 + 1)) + 0;
}


  //Variables del DOM-->

  DOM_contador=document.getElementById("cAtras");
  DOM_piedra=document.getElementById("piedra_btn");												
  DOM_papel=document.getElementById("papel_btn");
  DOM_tijeras=document.getElementById("tijeras_btn");
  DOM_reiniciar=document.getElementById("btn_reiniciar");




  //Listener de los botones-->

  DOM_piedra.addEventListener("click",function() {
          unlock(0);
          //reiniciar();
          });
  DOM_papel.addEventListener("click",function() {
          unlock(1);
          //reiniciar();
          });
  DOM_tijeras.addEventListener("click",function() {
          unlock(2);
          //reiniciar();
          });
  DOM_reiniciar.addEventListener("click",function() {
          reiniciar();
  });

  //Funcion para evitar que el jugador pueda elgir antes de que termine la cuenta atras


function unlock(humano){
  if(activo == false)
  {
    alert(alerta);
  }
  else
  {
    opcion(humano);
  }
}


   //Funcion para evitar que pulse el boton de reiniciar la funcion 
   //cuentaAtras() sin elegir una opcion


function reiniciar(tiempo,eleccion){
  if(eleccion == false && tiempo == false ){
    cuentaAtras()
  }
  else {
    alert("Elige una opcion");
  }
}

  //Funcion de la cuenta atras-->


function cuentaAtras() {
  var x = 5;
  console.log('se ejecuta la cuenta atras');
  var tiempo  = true;
  activo = false;
  DOM_contador.innerHTML = x;
  var intervalo = setInterval(function() {
        if(x > 1){
          x--;
          console.log("estoy en el if");
          DOM_contador.innerHTML = x;
        }
        else {
          activo = true;
          tiempo = false;
          console.log("estoy en el else");
          DOM_contador.innerHTML = "Ya";
          clearInterval(intervalo);
        }
  },600);
}
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link href="css/CssGeneral.css" rel="stylesheet" type="text/css">
<link href="css/CssPartida2.css" rel="stylesheet" type="text/css">

</head>

<body onload="cuentaAtras()">

<div class="container-fluid">

  <!--Barrita de navegacion-->
  <div class="col-12 row navbar">
    <div class="col-lg-8 row">
    <img src="img/Icono_volver.png" class="img_nav " id="pgmenu">
    <img src="img/Icono_registro.png" class="img_nav " id="pgregistro">
    <img src="img/Icono_modo.png" class="img_nav " id="pgjuego">
  </div>
  <!--Log in-->
    <div class="col-lg-4 pad_nav alinear_der" style="text-align:center">
        <input type="text" id="loginuser" placeholder="Usuario" class="form-control navbarlogin">
        <input type="text" id="loginpass" placeholder="Contraseña" class="form-control navbarlogin">
        <button type="button" class="btn btn-light navbarlogin">Iniciar Sesion</button>
    </div>
  </div>
                            <!--Titulo Partida-->

    <div class="col-12 row">
        <h1>PARTIDA</h1>

    </div>

    <div class="row">         									<!--Contenedor del juego-->
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 row">    				<!--Primera Columna-->

                <div class="col-12">
                <h3>Elige:</h3>
                </div>


        <div class="col-12 row">

                            <div class="col-6">
                            <img src="img/PPT_Roca.png" alt="Piedra" class="img_PPT" id="piedra_btn">
                            </div>
                            <div class="col-6">
                            <img src="img/PPT_Papel.png" alt="Papel" class="img_PPT" id="papel_btn">
                            </div>
                            <div class="col-6">
                            <img src="img/PPT_Tijera.png" alt="Tijeras" class="img_PPT" id="tijeras_btn">
                            </div>
          </div>

          <div class="row">
               <div class="col-12">
                    <img src="img/Partida_0010_Confirm.png" alt="confirmar" class="img_boton">
               </div>
          </div>


     </div>







        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">    <!--Segunda Columna-->
            <div class="row">

                  <h3>Cuenta atrás:</h3>             <!--Cuenta atras/Titulo-->

            </div>
            <div class="row">
                <p id="cAtras">5</p>
            </div>
            <div class="row">
                <button id="btn_reiniciar">Pincha aqui</button>
            </div>

                <h3>Contador: </h3>

                <h3>usuario: <p id="contador_usuario"></p></h3>

                <h3>ia: <p id="contador_ia"></p></h3>

                <h3 id="respuesta"></h3>

        </div>

        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">     <!-- Tercera Columna-->
          <h3>IA</h3>

              <!---Boton contrincante--->
              <div class="row">
                  <div class="col-12">
                  <img src="img/Signo_de_Interrogacion.png" id="respuestaIA" alt="interrogación" class="img_boton">
                  </div>
              </div>


        </div>



    </div>   <!--Fin del Contenedor del juego-->

</div>






<!--Juego-->

</body>
</html>

2 respuestas 2

2

La Variable x Ya Existe en Global y además no la reinicias cuando reinicias. Yo creo que así ira.

var userCount = 0;
var iaCount = 0;
var alerta = "Espera";
var x = 5;
var activo = true;
//Array con las opciones
var imagenes = ["img/PPT_Roca.png","img/PPT_Papel.png","img/PPT_Tijera.png","img/PPT_Lagarto.png","img/PPT_Spock.png"];


  //Funcion para comparar lo que ha elegido el jugador y la maquina-->

function opcion(humano){
 var cpu = getRandomInt();
 var resultado_texto = ["empate","ganas","pierdes"];
 var nombre = ["Piedra","Papel","Tijera"];
 var eleccion = true;
 var jugada = [];
 jugada[0] = [0,1,2];
 jugada[1] = [2,0,1];
 jugada[2] = [1,2,0];

  respuestaIA.src=imagenes[cpu];

  var resultado = jugada[cpu][humano];


  if (resultado == "pierdes"){
      eleccion = false;
      iaCount++;
      console.log("Has perdido, parguela");
      document.getElementById('contador_ia').innerHTML = iaCount - 1;
      document.getElementsByClassName('respuesta').innerHTML = "has perdido";
    }
  elseif (resultado == "ganas"){
      eleccion = false;
      userCount++;
      console.log("Has ganado,Puto");
      document.getElementById('contador_usuario').innerHTML = userCount - 1;
      document.getElementsByClassName('respuesta').innerHTML = "has ganado";
  }
  else{
    eleccion = false;
    console.log("no hace nada");
  }


  console.log(resultado);
  console.log("HUMANO: " + nombre[humano]);
  console.log("CPU: " + nombre[cpu]);
  console.log(resultado_texto[resultado]);

}


  //funcion para optener un numero random-->
function getRandomInt() {
  return Math.floor(Math.random() * (4 - 1));
}


  //Variables del DOM-->

  DOM_contador=document.getElementById("cAtras");
  DOM_piedra=document.getElementById("piedra_btn");                                             
  DOM_papel=document.getElementById("papel_btn");
  DOM_tijeras=document.getElementById("tijeras_btn");
  DOM_reiniciar=document.getElementById("btn_reiniciar");




  //Listener de los botones-->

  DOM_piedra.addEventListener("click",function() {
          unlock(0);
          //reiniciar();
          });
  DOM_papel.addEventListener("click",function() {
          unlock(1);
          //reiniciar();
          });
  DOM_tijeras.addEventListener("click",function() {
          unlock(2);
          //reiniciar();
          });
  DOM_reiniciar.addEventListener("click",function() {
          reiniciar();
  });

  //Funcion para evitar que el jugador pueda elgir antes de que termine la cuenta atras


function unlock(humano){
  if(activo == false)
  {
    alert(alerta);
  }
  else
  {
    opcion(humano);
  }
}


   //Funcion para evitar que pulse el boton de reiniciar la funcion 
   //cuentaAtras() sin elegir una opcion


function reiniciar(tiempo,eleccion){
  if(eleccion == false && tiempo == false ){
    cuentaAtras();
  }
  else {
    x = 5;
   alert("Elige una opcion");
  }
}

  //Funcion de la cuenta atras-->


function cuentaAtras() {
  //var x = 5; Esta Variable Ya Existe en Global
  console.log('se ejecuta la cuenta atras');
  var tiempo  = true;
  activo = false;
  DOM_contador.innerHTML = x;
  var intervalo = setInterval(function() {
        if(x > 1){
          x--;
          console.log("estoy en el if");
          DOM_contador.innerHTML = x;
        }
        else {
          activo = true;
          tiempo = false;
          console.log("estoy en el else");
          DOM_contador.innerHTML = "Ya";
          clearInterval(intervalo);
        }
  },600);
}
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="cuentaAtras()">

<div class="container-fluid">

  <!--Barrita de navegacion-->
  <div class="col-12 row navbar">
    <div class="col-lg-8 row">
    <img src="img/Icono_volver.png" class="img_nav " id="pgmenu">
    <img src="img/Icono_registro.png" class="img_nav " id="pgregistro">
    <img src="img/Icono_modo.png" class="img_nav " id="pgjuego">
  </div>
  <!--Log in-->
    <div class="col-lg-4 pad_nav alinear_der" style="text-align:center">
        <input type="text" id="loginuser" placeholder="Usuario" class="form-control navbarlogin">
        <input type="text" id="loginpass" placeholder="Contraseña" class="form-control navbarlogin">
        <button type="button" class="btn btn-light navbarlogin">Iniciar Sesion</button>
    </div>
  </div>
                            <!--Titulo Partida-->

    <div class="col-12 row">
        <h1>PARTIDA</h1>

    </div>

    <div class="row">                                           <!--Contenedor del juego-->
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 row">                   <!--Primera Columna-->

                <div class="col-12">
                <h3>Elige:</h3>
                </div>


        <div class="col-12 row">

                            <div class="col-6">
                            <img src="img/PPT_Roca.png" alt="Piedra" class="img_PPT" id="piedra_btn">
                            </div>
                            <div class="col-6">
                            <img src="img/PPT_Papel.png" alt="Papel" class="img_PPT" id="papel_btn">
                            </div>
                            <div class="col-6">
                            <img src="img/PPT_Tijera.png" alt="Tijeras" class="img_PPT" id="tijeras_btn">
                            </div>
          </div>

          <div class="row">
               <div class="col-12">
                    <img src="img/Partida_0010_Confirm.png" alt="confirmar" class="img_boton">
               </div>
          </div>


     </div>







        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">    <!--Segunda Columna-->
            <div class="row">

                  <h3>Cuenta atrás:</h3>             <!--Cuenta atras/Titulo-->

            </div>
            <div class="row">
                <p id="cAtras">5</p>
            </div>
            <div class="row">
                <button id="btn_reiniciar">Pincha aqui</button>
            </div>

                <h3>Contador: </h3>

                <h3>usuario: <p id="contador_usuario"></p></h3>

                <h3>ia: <p id="contador_ia"></p></h3>

                <h3 id="respuesta"></h3>

        </div>

        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">     <!-- Tercera Columna-->
          <h3>IA</h3>

              <!---Boton contrincante--->
              <div class="row">
                  <div class="col-12">
                  <img src="img/Signo_de_Interrogacion.png" id="respuestaIA" alt="interrogación" class="img_boton">
                  </div>
              </div>


        </div>



    </div>   <!--Fin del Contenedor del juego-->

</div>






<!--Juego-->

</body>
</html>


Acabo de Hacer la App de Cero, a ver si te sirve así:

function Aleatorio(Minimo,Maximo){
    var posibilidades = Maximo - Minimo;
    var a = Math.random() * posibilidades;
    a = Math.floor(a);
    return parseInt(Minimo) + a;
}
function Juguemos(){
    var NumeroTemp = Aleatorio(1,3);
    var BoxOpcion1 = document.getElementById("Opcion1").checked;
    var BoxOpcion2 = document.getElementById("Opcion2").checked;
    var BoxOpcion3 = document.getElementById("Opcion3").checked;
    var NumeroUser = 0;
    var Numero = parseInt(NumeroTemp);
    if ( BoxOpcion1 ) { NumeroUser = 1 }
    if ( BoxOpcion2 ) { NumeroUser = 2 }
    if ( BoxOpcion3 ) { NumeroUser = 3 }
    if ( Numero == 1 && NumeroUser == 1 ) { alert("Empate"); }
    if ( Numero == 1 && NumeroUser == 2 ) { alert("Ganaste"); }
    if ( Numero == 1 && NumeroUser == 3 ) { alert("Perdiste"); }
    if ( Numero == 2 && NumeroUser == 2 ) { alert("Empate"); }
    if ( Numero == 2 && NumeroUser == 3 ) { alert("Ganaste"); }
    if ( Numero == 2 && NumeroUser == 1 ) { alert("Perdiste"); }
    if ( Numero == 3 && NumeroUser == 3 ) { alert("Empate"); }
    if ( Numero == 3 && NumeroUser == 1 ) { alert("Ganaste"); }
    if ( Numero == 3 && NumeroUser == 2 ) { alert("Perdiste"); }
    
}
<!DOCTYPE html>
<head>
<html lang="es_ES" >
<meta charset="UTF-8" >
<meta name="author" content="Pol Flórez Viciana" >
<meta name="owner" content="Pol Flórez Viciana" >
<meta name="keywords" content="Pol, Software, Piedra,Papel,y,Tijera" >
<title>Juego Piedra Papel y Tijeras ON-LINE de Pol Software</title>
<meta name="description" content="Este es el Juego de Piedra Papel y Tijeras ON-LINE de Pol Software" >
<meta name="robots" content="index, dofollow" >
</head>
<body >
<!-- Este es el Juego de Piedra Papel y Tijera de Pol Software ON-LINE Para la Web -->

<!-- Centramos Todo el Contenido -->    
<center>
    <!-- Creamos Todo el Contenido de una Seccion -->
    <section>
        <!-- Creamos Todo el Contenido del Usuario Para el Juego -->
        <h1 style="text-align: center;" >Juego Piedra Papel y Tijera ON-LINE de Pol Software</h1>
        <p>Elije la Opción con la Que Juegas Contra la CPU y Pulsa Ok Cuando Estes Listo.</p>
        <p>Pulsa CTRL+F5 Para Volver Al Inicio.</p>
        <form id="Formulario" name="Formulario" >
            
            <input type="radio" name="Opcion" id="Opcion1" checked />Piedra<br><br>
            <input type="radio" name="Opcion" id="Opcion2"  />Papel<br><br>
            <input type="radio" name="Opcion" id="Opcion3" />Tijera<br><br>
            <input type="button" id="Ok" value="Ok" onclick="Juguemos()" /><br><br>
        </form>
    </section>
</center>
</body>

0

window.onload = function () {
                var userCount = 0;
                var iaCount = 0;
                var alerta = "Espera";
                var x = 5;
                var activo = false;
                //Array con las opciones
                var imagenes = new Array(
                        ['img/PPT_Roca.png'],
                        ['img/PPT_Papel.png'],
                        ['img/PPT_Tijera.png'],
                        ['img/PPT_Lagarto.png'],
                        ['img/PPT_Spock.png']
                        );
                //Funcion para comparar lo que ha elegido el jugador y la maquina-->

                function opcion(humano) {
                    var cpu = getRandomInt();
                    var resultado_texto = ["empate", "ganas", "pierdes"];
                    var nombre = ["Piedra", "Papel", "Tijera"];
                    var eleccion = true;
                    var jugada = [
                        [0, 1, 2, ],
                        [2, 0, 1, ],
                        [1, 2, 0, ]
                    ];
                    respuestaIA.src = imagenes[cpu];
                    var resultado = jugada[cpu][humano];
                    if (resultado_texto[resultado] == "pierdes") {
                        eleccion = false;
                        iaCount++;
                        console.log("Has perdido, parguela");
                        document.getElementById('contador_ia').innerHTML = iaCount;
                        document.getElementsByClassName('respuesta').innerHTML = "has perdido";
                    } else if (resultado_texto[resultado] == "ganas") {
                        eleccion = false;
                        userCount++;
                        console.log("Has ganado,Puto");
                        document.getElementById('contador_usuario').innerHTML = userCount;
                        document.getElementsByClassName('respuesta').innerHTML = "has ganado";
                    } else {
                        eleccion = false;
                        console.log("no hace nada");
                    }


                    console.log(resultado);
                    console.log("HUMANO: " + nombre[humano]);
                    console.log("CPU: " + nombre[cpu]);
                    console.log(resultado_texto[resultado]);
                }


                //funcion para optener un numero random-->
                function getRandomInt() {
                    return Math.floor(Math.random() * (4 - 0 + 1)) + 0;
                }


                //Variables del DOM-->

                DOM_contador = document.getElementById("cAtras");
                DOM_piedra = document.getElementById("piedra_btn");
                DOM_papel = document.getElementById("papel_btn");
                DOM_tijeras = document.getElementById("tijeras_btn");
                DOM_reiniciar = document.getElementById("btn_reiniciar");
                //Listener de los botones-->

                DOM_piedra.addEventListener("click", function () {
                    if (activo == true) {
                        unlock(0);
                        //reiniciar();
                    }
                });
                DOM_papel.addEventListener("click", function () {
                    if (activo == true) {
                        unlock(1);
                        //reiniciar()            ;
                    }
                });
                DOM_tijeras.addEventListener("click", function () {
                    if (activo == true) {
                        unlock(2);
                        //rei            niciar();
                    }
                });
                DOM_reiniciar.addEventListener("click", function () {
                    if (activo == true) {
                        reiniciar();
                    }
                });
                //Funcion para evitar que el jugador pue            da elgir antes de que termine la cuenta atras


                function unlock(humano) {
                    if (activo == false)
                    {
                        alert(alerta);
                    } else
                    {
                        opcion(humano);
                    }
                }


                //Funcion para evitar que pulse el bot            on de reiniciar la funcion 
                //cuentaAtras() sin elegir una opcion


                function reiniciar(tiempo, eleccion) {
                    cuentaAtras();
                }

                //Funcion de la cuenta atras-->


                function cuentaAtras() {
                    var x = 5;
                    console.log('se ejecuta la cuenta atras');
                    var tiempo = true;
                    activo = false;
                    DOM_contador.innerHTML = x;
                    var intervalo = setInterval(function () {
                        if (x > 1) {
                            x--;
                            console.log("estoy en el if");
                            DOM_contador.innerHTML = x;
                        } else {
                            activo = true;
                            tiempo = false;
                            console.log("estoy en el else");
                            DOM_contador.innerHTML = "Ya";
                            clearInterval(intervalo);
                        }
                    }, 600);
                }
                cuentaAtras();
            }
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">

        <title>index</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
        <link href="css/CssGeneral.css" rel="stylesheet" type="text/css">
        <link href="css/CssPartida2.css" rel="stylesheet" type="text/css">
        <script>
            
        </script>
        

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.