1

Es un juego sencillo en el que por el momento solo hay 3 funciones , una para elegir el signo X o O, otra para la jugada del humano dado por un listener de click a la casilla del tateti y la otra función es la jugada de la maquina con math.randompara que la elección se de al azar, pero no entiendo porque una jugada no habilita la otra automáticamente, intente hacerlo con do/while y habilitando según el turno del humano y maquina respectivamente pero no funciona. Que esta pasando?

Dejo el código a mano:

const empates = 0;
const ganadosComputadora = 0;
const ganadosHumano = 0;

const casillas = document.querySelectorAll(".casilla");

let signo;
let signoComputadora;

let turno;
let basta = [];

const elegirOX = () => {
  const eleccion = prompt("Elige O o X");
  if (eleccion === "o") {
    signo = "o";
    signoComputadora = "x";
    turno = "humano";
  } else if (eleccion === "x") {
    signo = "x";
    signoComputadora = "o";
    turno = "computadora";
  } else {
    alert("Elige O o X");
    // elegirOX();
  }
};
elegirOX();

const juegaHumano = () => {
  casillas.forEach((casilla) => {
    console.log(casilla);
    casilla.addEventListener("click", () => {
      casilla.innerText = signo;
      basta.push("1");
      turno = "computadora";
    });
  });
};

const juegaComputadora = () => {
  let jugada = Math.floor(Math.random() * casillas.length);
  console.log(casillas[jugada]);
  casillas[jugada].innerText = signoComputadora;
  basta.push("1");
  turno = "humano";
};

do {
  switch (turno) {
    case "humano":
      juegaHumano();
      break;
    case "computadora":
      juegaComputadora();
      break;
    default:
      console.log("Esperando jugada");
  }
} while (basta.length == 3);

console.log(basta.length);
console.log(turno);
body {
  font-family: "Courier New", Courier, monospace;
  background-color: lightskyblue;
  text-align: center;
}

h1 {
  font-size: 80px;
}

h2,
h3 {
  text-align: center;
  margin: 80px;
  color: whitesmoke;
}

span {
  font-weight: bolder;
  font-size: 40px;
  padding: 30px;
  border: 2px solid lightgray;
  cursor: pointer;
}

#turno {
  background-color: lightblue;
  margin-right: 10px;
  padding: 30px;
  height: 50px;
  width: 200px;
  font-size: 15pt;
  font-weight: bolder;
  color: black;
  font-size: 20px;
  border: 2px solid lightgray;
  /* display: none; */
}

.tateti {
  display: flex;
  justify-content: center;
}

#tablero {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 400px;
  width: 400px;
}

.casilla {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 60px;
  text-align: center;
  height: 80px;
  width: 80px;
  cursor: pointer;
}

#jugadores {
  display: none;
  margin: 0 auto;
  text-align: center;
  font-size: 15pt;
  font-weight: bold;
}

.marcador {
  /* display: none; */
  margin-left: 30px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/styles.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1>TA TE TI</h1>
    </header>

    <!-- <section id=ficha>
        <h3>Elige una ficha:</h3>
        <span id="x">X</span>
        <span id="o">O</span>
    </section> -->

    <section class="jugadores">
      <div id="computadora"></div>
      <div id="humano"></div>
    </section>

    <div class="tateti">
      <section id="turno"></section>

      <section id="tablero">
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
      </section>
      <section class="marcador">
        <section id="ganadosHumano"></section>
        <section id="ganadosComputadora"></section>
        <section id="empates"></section>
      </section>
    </div>

    <script src="./src/index.js"></script>
  </body>
</html>

0

1 respuesta 1

1

Lo que sucede es que la condición de tu do-while dice que debe ejecutarse siempre y cuando la longitud de basta sea igual a 3. Cuando lo declaras, el valor de length es 0 (se aumenta en 1 por que sea realiza una jugada), pero de igual forma nunca llega a ser 3, por lo tanto solo se ejecutaría 1 vez.

Por otro lado, no te recomiendo llamar addEventListener (tu función juegaHumano) dentro de un loop o bucle, porque estarías agregando muchos eventos a las casillas y solo necesitas hacerlo 1 vez.

Por último, el problema de utilizar bucles y esperar por un evento del usuario, es que los bucles se ejecutan de forma síncrona, en pocas palabras, tu programa se congelará. Como los eventos creados por addEventListener son asíncronos (ya que esperan por la interacción del usuario) podrías hacer algo como esto:

const empates = 0;
const ganadosComputadora = 0;
const ganadosHumano = 0;

const casillas = document.querySelectorAll(".casilla");

let signo;
let signoComputadora;

let turno;
let basta = [];

const juegaComputadora = () => {
  let jugada = Math.floor(Math.random() * casillas.length);
  console.log(casillas[jugada]);
  casillas[jugada].innerText = signoComputadora;
  basta.push("1");
  turno = "humano";
};

const juegaHumano = () => {
  casillas.forEach((casilla) => {
    console.log(casilla);
    casilla.addEventListener("click", () => {
      casilla.innerText = signo;
      basta.push("1");
      turno = "computadora";
      juegaComputadora(); // Ejecutamos el turno de la computadora al terminar el turno del usuario
    });
  });
};

// Inicializamos los eventos en las casillas y esperamos que el usuario ejecute el evento
juegaHumano();

const elegirOX = () => {
  const eleccion = prompt("Elige O o X");
  if (eleccion === "o") {
    signo = "o";
    signoComputadora = "x";
    turno = "humano";
  } else if (eleccion === "x") {
    signo = "x";
    signoComputadora = "o";
    turno = "computadora";
    juegaComputadora(); // Ejecutamos el turno de la computadora
  } else {
    alert("Elige O o X");
    // elegirOX();
  }
};
elegirOX();

// Evitamos usar el do-while para que no se congele.
//do {
//  switch (turno) {
//    case "humano":
//      juegaHumano();
//      break;
//    case "computadora":
//      juegaComputadora();
//      break;
//    default:
//      console.log("Esperando jugada");
//  }
//} while (basta.length == 3);
//console.log(basta.length);
//console.log(turno);
body {
  font-family: "Courier New", Courier, monospace;
  background-color: lightskyblue;
  text-align: center;
}

h1 {
  font-size: 80px;
}

h2,
h3 {
  text-align: center;
  margin: 80px;
  color: whitesmoke;
}

span {
  font-weight: bolder;
  font-size: 40px;
  padding: 30px;
  border: 2px solid lightgray;
  cursor: pointer;
}

#turno {
  background-color: lightblue;
  margin-right: 10px;
  padding: 30px;
  height: 50px;
  width: 200px;
  font-size: 15pt;
  font-weight: bolder;
  color: black;
  font-size: 20px;
  border: 2px solid lightgray;
  /* display: none; */
}

.tateti {
  display: flex;
  justify-content: center;
}

#tablero {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 400px;
  width: 400px;
}

.casilla {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 60px;
  text-align: center;
  height: 80px;
  width: 80px;
  cursor: pointer;
}

#jugadores {
  display: none;
  margin: 0 auto;
  text-align: center;
  font-size: 15pt;
  font-weight: bold;
}

.marcador {
  /* display: none; */
  margin-left: 30px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/styles.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1>TA TE TI</h1>
    </header>

    <!-- <section id=ficha>
        <h3>Elige una ficha:</h3>
        <span id="x">X</span>
        <span id="o">O</span>
    </section> -->

    <section class="jugadores">
      <div id="computadora"></div>
      <div id="humano"></div>
    </section>

    <div class="tateti">
      <section id="turno"></section>

      <section id="tablero">
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
        <div class="casilla"></div>
      </section>
      <section class="marcador">
        <section id="ganadosHumano"></section>
        <section id="ganadosComputadora"></section>
        <section id="empates"></section>
      </section>
    </div>

    <script src="./src/index.js"></script>
  </body>
</html>

Lo último que te quedaría por hacer, es que tu función juegaComputadora evalúe si la casilla elegida al azar no esté llena, sino, que elija otra.

1
  • Excelente!! Ahora entiendo, te agradezco muchisimo por tu ayudaa ! @C. Rodriguez
    – Tina
    Commented el 6 dic. 2021 a las 20:51

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.