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.random
para 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>