Si has estado buscando una manera práctica y divertida de mejorar tus habilidades en Javascript, programar el famoso juego del gato puede ser una excelente opción. Este sencillo juego de mesa, también conocido como Tic Tac Toe, presentará un reto divertido mientras mejoras tu dominio del lenguaje.
Para los que no estén familiarizados, el juego de gato es un simple juego para dos jugadores que se juega en una cuadrícula de 3 por 3. Los jugadores alternan para colocar sus marcas (generalmente ‘X’ y ‘O’) e intentar crear una hilera de tres de sus marcas, ya sea horizontal, vertical o diagonalmente.
Así que, ¿cómo se estructura este título de entretenimiento en Javascript? Pasemos al código.
var board = ['','','','', '', '', '', '', ''];
var player = 'X';
function drawBoard() {
var boardElement = document.createElement('div');
boardElement.className = 'board';
for (var i = 0; i < board.length; i++) {
var cellElement = document.createElement('div');
cellElement.innerHTML = board[i];
cellElement.className = 'cell';
cellElement.dataset.cellIndex = i;
cellElement.addEventListener('click', function(e) {
if (board[e.target.dataset.cellIndex] == '') {
board[e.target.dataset.cellIndex] = player;
player = player == 'X' ? 'O' : 'X';
drawBoard();
}
});
boardElement.appendChild(cellElement);
}
document.body.appendChild(boardElement);
}
drawBoard();
Todo comienza creando un tablero como un array vacío de 9 elementos. Cada elemento representa una celda del tablero de juego, desde la esquina superior izquierda hasta la esquina inferior derecha, de izquierda a derecha y de arriba a abajo. En ese array, guardaremos el estado de cada celda: si está vacía ('') o ya tiene alguna figura ('X' o 'O').
Luego, creamos la función drawBoard. Esta función elimina el tablero de juego actual, si existe, y luego lo recrea. En este punto se crean las 9 celdas del tablero, todas con un evento click asociado. Cuando se hace click en una celda, se verifica si ya ha sido jugada. Si no es el caso, se actualiza el array del tablero con el símbolo del jugador actual y se cambia el turno al otro jugador.
La lógica del juego es relativamente simple. Sin embargo, el desafío real es manejar adecuadamente las condiciones de victoria. Es necesario comprobar después de cada turno si hay un ganador, es decir, si hay alguna hilera (vertical, horizontal o diagonal) de marcadores idénticos.
function checkWin() {
var winCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (var i = 0; i < winCombinations.length; i++) {
if (board[winCombinations[i][0]] != '' &&
board[winCombinations[i][0]] == board[winCombinations[i][1]] &&
board[winCombinations[i][0]] == board[winCombinations[i][2]]) {
return true;
}
}
return false;
}
En la función checkWin, se declaran todas las combinaciones ganadoras y se verifican una por una. Cuando se encuentra una combinación ganadora, se retorna true; si después de revisar todas las combinaciones no se encuentra ninguna, se retorna false.
Al programar el juego del gato en Javascript, no sólo practicas la manipulación del DOM y el manejo de eventos, sino también la estructura de control de flujo, como bucles y condicionales. Es un buen proyecto para principiantes que desean profundizar en sus habilidades de programación. Disfruta el proceso inspirador y recuerda que la práctica hace al maestro.