We are doing a Paper Rock and Scissor project and we do not achieve several conditions.
Explanation of the game:
-When we start the page it starts with onload the function countAfter (), while it is activated can not select an option (stone, paper or scissors), or give the button to restart ("Click Here").
- Neither do we get that once the countdown is finished do not let the player restart until you choose an option. I pass the Javascript code
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>