En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap.

Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial.

A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea.

Tablero de juego

El tablero de juego es una tabla dinámica que se dibuja a partir de un arreglo. Le he quitado los bordes y he reducido el padding, además de agregarle un color de fondo azul para que parezca el tablero del juego real (es decir, el del mundo real, el físico).

Dentro de cada celda de la tabla (o td) he colocado una imagen que puede ser:

• Espacio vacío
• Jugador 1
• Jugador 2, que a su vez es el CPU cuando se juega contra él

Estas imágenes se pueden cambiar ya sea en el código o realmente en el sistema de archivos. La imagen viene dada por una función que dependiendo del valor devuelve una imagen distinta.

Dibujando tablero de juego

Como lo dije anteriormente, el tablero es una tabla que se ve así:

El encabezado de la tabla tiene un botón que hace que la pieza se coloque en esa columna, es decir, deja caer la pieza.

Debido a que es una matriz o arreglo de dos dimensiones, primero recorremos toda la matriz para tener la fila. Y dentro de esa fila repetimos una celda por cada valor que haya en la fila.

En cada celda habrá una imagen que tendrá como fuente lo que devuelva el método cellImage, el cual veremos a continuación cuando veamos la programación en Vue.

Eso es todo en cuanto al diseño de la interfaz, es momento de pasar a ver el código JavaScript para este juego de Conecta 4 versión web.

Imagen

El método que evalúa la imagen y devuelve la ruta es el siguiente:

Como lo dije, es un simple if. Lo dejé de esa manera para que sea expresivo, aunque si tú quieres, puedes usar diccionarios, concatenar la celda, etcétera, así como usar distintas imágenes.

Constantes personalizables

Podemos definir el tamaño del tablero o el número de piezas que se deben conectar, de este modo se podría jugar a Conecta 3, conecta 5, etcétera.

Si te fijas, cuando se juega conecta 4 contra el CPU, se toma al mismo como el jugador 2.

Resetear juego

Tenemos la siguiente función que resetea el juego. Lo que hace primero es preguntar el modo de juego: jugador contra jugador, o jugador contra CPU.

El siguiente paso es limpiar el tablero de juego, rellenándolo con espacios vacíos. Después, selecciona un jugador al azar, que es el que toma el primer turno.

Finalmente le indica al CPU que haga su movimiento en caso de que sea su turno.

Hacer movimiento de usuario

Cuando el jugador o usuario presiona el botón para colocar la pieza, se ejecuta el siguiente código en donde se valida si la columna todavía no está llena, y se comprueba si hay un empate o si el jugador ha ganado.

El método recibe el número de columna.

La pieza es colocada en la matriz, usando la columna indicada (menos 1) y en la fila superior vacía. Es decir, simplemente se cambia el valor que hay en esa celda y Vue se encarga, automáticamente, de refrescarlo en la tabla.

Finalmente se intercambia de jugador y se le indica al CPU que haga su movimiento en caso de que sea su turno y de que el modo de juego sea CPU contra jugador.

Por cierto, en caso de que exista un empate o un ganador, se le pregunta al usuario si quiere jugar de nuevo. En ese caso, se resetea el juego.

Saber si hay un ganador

En este juego hay un ganador cuando hay 4 piezas conectadas en cualquier dirección en línea recta. Por lo tanto simplemente hay que contar en todas las posibles direcciones para ver si en la matriz existe un Conecta 4 para el jugador en cuestión.

Para ello he creado algunas funciones que realizan el conteo en varias direcciones:

Lo que hace el código es recorrer el tablero de un punto a otro y aumentar un contador en caso de encontrar piezas adyacentes. Si encuentra una pieza que no es del mismo color, entonces reinicia el contador a cero.

La función que decide si es un ganador es la siguiente:

Lo que hace es contar en todas las direcciones, y si detecta que hay una fila seguida de piezas que conectan y que son mayor al número necesario para ganar, entonces regresa true. De lo contrario, false.

Empate en conecta 4

Por otro lado, la función para saber si hay un empate en este juego, se utiliza una función que recorre toda la matriz. Si se encuentra un espacio vacío, significa que todavía no es empate, así que se regresa false.

En caso de terminar de recorrer toda la matriz y no encontrar un espacio vacío, se regresa true.

Inteligencia artificial de conecta 4

Como lo dije anteriormente, este juego soporta jugar contra el CPU. He programado una pequeña inteligencia artificial que elige la mejor columna basándose en el algoritmo para intentar ganar conecta 4.

Primero se verifica si es el turno del CPU y si el modo de juego es jugador contra cpu. Después, se elige la mejor columna y se coloca el valor en el tablero, es decir, se coloca la pieza.

Después de eso, se revisa el estado del juego para saber si hay un empate o un ganador. Si no hay ganador ni empate, se intercambia el jugador y es el turno del humano.

Las funciones que permiten elegir la mejor columna se ven a continuación y se basan en una serie de reglas:

Lo que se hace es simular un movimiento en el tablero (clonando primero al original, para no modificarlo) y a partir del mismo saber:

• Si hay una columna para que el CPU gane
• Si hay una columna para que el humano gane, para tomarla
• El mayor puntaje, para conocer en dónde colocar la pieza para tener más oportunidades de ganar

Poniendo todo junto

Finalmente el código completo de JavaScript queda como se ve a continuación (el proyecto completo lo dejaré al final del post).

No he detallado algunas funciones, pues me parece que son muy simples, por ejemplo, en donde se muestra al ganador o se pregunta el modo de juego usando Sweet Alert 2.

Descargas y código fuente

Como varios de mis proyectos, este software es open source y gratuito. Puedes descargar el código del repositorio de GitHub.

Demostración de Conecta 4

Puedes ver un vídeo en el que se realiza una demostración, además de una explicación con palabras:

Finalmente, puedes probar la versión en línea.

Conclusión

Me emocionó bastante portar este juego a JavaScript con mi framework favorito: Vue. Recuerda que anteriormente ya hice este juego en lenguaje C.

Siempre me ha gustado cómo es que hice que el CPU elija la mejor columna y que, si bien no es invencible, sí que puede ganar algunas veces.

¿Quieres ver más videojuegos programados por mí? click aquí.