Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Ejercicio – Dos jugadores
Hacer el juego del tres en raya para dos jugadores.
Dibujaremos un tablero cuadrado de 9 casillas (3 casillas por lado). Cada jugador, por turnos, irá poniendo una X o una O en las casillas, sin superponerse, hasta que uno de los dos logre poner 3 fichas iguales en línea (en vertical, horizontal o diagonal).
1. Hacemos el código HTML del ejercicio.
2. Cuando pulsemos en un botón, este debe cambiar su color.
3. Cuando pulsemos en un botón y el contador de tiradas es par, pinto el botón de verde, si no, lo pinto de rojo.
4. Los jugadores no podrán colocar su ficha en una casilla ocupada con un color. Si lo hacen se mostrará un mensaje de alerta.
5. Cada vez que un jugador mueve, evaluamos si ha ganado. Para ello, haremos una función evaluateWin que recogerá los colores de cada botón en el momento de hacer click y comparará si las horizontales, verticales y diagonales tienen el mismo color. Para recoger los colores de los botones, podemos usar este código:
const colors = Array.from(document.querySelectorAll("button"))
.map((obj) => obj.style.backgroundColor
);6. Al terminar el juego, este se reseteará y volveremos a empezar la partida.
Un solo jugador
El método juegaPlayer1() quedará así:
function juegaPlayer1(){
board[getComputerMove()] = "X";
}Por tanto, debemos crear un método getComputerMove() que creará una copia del tablero, moverá la ficha sobre esta copia y en función del resultado decidirá dónde mover en el tablero real. Para realizar el movimiento:
- Comprobamos si la máquina puede hacer un movimiento y ganar la partida. (utilizaremos el método evaluateWin, creado en el ejercicio anterior).
- Comprobamos si tras mover, el humano puede hacer un movimiento y ganar la partida.
- Comprueba si el centro está libre. Si lo está, la máquina mueve al centro.
- Comprueba si hay alguna esquina libre. Si lo está, la máquina mueve a la esquina.
- Mueve a cualquiera de las casillas restantes.