Estoy haciendo el "juego piedra papel o tijera", y no logro que el mensaje del resultado final coincida con el resultado. A veces cambia al correcto, a veces cambia a uno incorrecto y a veces ni siquiera cambia. Sé que probablemente me la compliqué más de lo necesario, es que estoy aprendiendo. También encontré otras consultas resueltas con la misma duda, pero al ser mi código tan distinto (más largo) no me sirvió para aplicarlo.
JavaScript:
const btn_stone = document.querySelector('.stone');
const btn_paper = document.querySelector('.paper');
const btn_scissors = document.querySelector('.scissors');
const circle = document.getElementsByClassName('circle');
const CPU = document.querySelector('#CPU').style.display="none";
const results = document.querySelector('.results');
const cpu_img = document.querySelector('#cpu_img');
const user_img = document.querySelector('#user_img');
let option_user;
function num_aleatorio() {
return random_number = parseInt(Math.random() * 3);
}
let CPUOP;
function cpu_election(option_cpu) {
if (option_cpu === 0) {
cpu_img.src = "img/stone.jpeg";
console.log('CPU= cero');
CPUOP = 0;
} else if (option_cpu === 1) {
cpu_img.src = "img/paper.jpeg";
console.log('CPU= uno');
CPUOP = 1;
} else if (option_cpu === 2) {
cpu_img.src = "img/scissors.jpeg"
console.log('CPU= dos');
CPUOP = 2;
}
}
btn_stone.onclick = function() {
option_user = 0; //La opción del usuario
user_img.src = 'img/stone.jpeg'; //La imagen de la opción del usuario
cpu_election(num_aleatorio()); //La opción del CPU y su imagen
resultado(CPUOP, 0); //El mensaje de ganaste/perdiste/empataste
}
btn_paper.onclick = function() {
option_user = 1;
user_img.src = 'img/paper.jpeg';
cpu_election(num_aleatorio());
resultado(CPUOP, 1);
}
btn_scissors.onclick = function() {
option_user = 2;
user_img.src = 'img/scissors.jpeg';
cpu_election(num_aleatorio());
resultado(CPUOP, 2);
}
function resultado (option__cpu, option__user) {
if (option__cpu === option__user) {
results.innerHTML = "empate! Vuelvan a jugar";
} else if (option__cpu != option__user) {
if (option__cpu === 0 && option__user === 2) {
results.innerText = "El usuario perdió usando tijeras";
} else if (option__cpu === 1 && option__user === 0) {
results.innerHTML ="El usuario perdió usando piedra, y el CPU";
} else if (option__cpu === 2 && option__user === 1) {
results.innerHTML = "El usuario perdió usando papel, y el CPU";
}
} else {
results.innerHTML="ganasteeee!";
}
}
No me deja publicar la pregunta por contener mucho código asique quité el HTML. Pero en la pantalla hay basicamente dos imágenes de signo de pregunta, una representa la opción del CPU y otra la del usuario. Y abajo estan otros circulos/botones con las opciónes de piedra, papel o tijera para que seleccióne el usuario.