El juego Tres en Raya, también conocido como «Tic tac toe» o «Gato», es uno de los juegos de mesa más antiguos y populares del mundo. Afortunadamente, gracias a la tecnología, hoy en día podemos programar este juego para jugarlo online. En este artículo, vamos a explicar paso a paso cómo programar el juego del Tres en Raya en JavaScript.
Como programar el Tres en raya en Javascript
Paso 1: Configurar la estructura del HTML
Primero, vamos a crear la estructura básica del HTML. Necesitaremos un contenedor para el tablero de juego y botones para reiniciar el juego y mostrar el resultado.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tres en Raya</title>
<style>
/* Agregamos estilos CSS para el juego */
</style>
</head>
<body>
<div id="game-container"></div>
<button id="reset-button">Reiniciar</button>
<div id="result"></div>
<script src="app.js"></script>
</body>
</html>
Paso 2: Crear el tablero del juego
A continuación, vamos a crear el tablero de juego utilizando una tabla HTML y un bucle for. Cada celda tendrá un identificador único para que podamos manipularla con JavaScript.
const gameContainer = document.getElementById('game-container');
const rows = 3;
const columns = 3;
let currentPlayer = 'X';
let gameStatus = '';
function createBoard() {
let table = '';
for (let i = 0; i < rows; i++) {
table += '<tr>';
for (let j = 0; j < columns; j++) {
table += '<td id="' + i + '-' + j + '"></td>';
}
table += '</tr>';
}
gameContainer.innerHTML = '<table>' + table + '</table>';
}
Paso 3: Agregar eventos de clic a las celdas del tablero
Ahora que tenemos el tablero de juego, necesitamos agregar eventos de clic a las celdas para que los jugadores puedan hacer sus movimientos. Utilizaremos el método addEventListener para agregar el evento de clic a cada celda. También crearemos una función llamada «play» que se encargará de manejar los movimientos de los jugadores.
function addEvents() {
const cells = document.getElementsByTagName('td');
for (let i = 0; i < cells.length; i++) {
cells[i].addEventListener('click', function() {
play(this);
});
}
}
function play(cell) {
if (cell.innerHTML !== '') {
return;
}
cell.innerHTML = currentPlayer;
cell.classList.add(currentPlayer);
checkGameStatus();
}
Paso 4: Comprobar el estado del juego
Cada vez que se hace un movimiento, necesitamos comprobar el estado del juego para saber si un jugador ha ganado o si el juego ha terminado en empate. Para hacer esto, crearemos una función llamada «checkGameStatus» que verificará si hay tres celdas consecutivas con el mismo valor en una fila, columna o diagonal.
function checkGameStatus() {
const cells = document.getElementsByTagName('td');
const winningMoves = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
¡Listo! Hemos acabado nuestro Tres en raya, ya podemos viciarnos 😀