¿Cómo hacer un juego de triqui en HTML5?

Para aprender algo si estás muy básico en el HTML5 , perfecto; vamos a aprender a hacer un juego de triqui o tic tac toe con HTML básico, y también CSS y Javascript que entenderás hasta si no sabías nada de esto.

Este es el tutorial completo, puedes ver el tutorial resumido y sólo el código, si quieres, dándole click a alguna de las tres pestañas de arriba del todo de la página.

Vamos a empezar por explicar el juego. Triqui o tic tac toe, es un juego de cuaderno conocido de hace mucho por todos, primero, dibujas una cuadrícula con o sin bordes de 3 por 3..:

Es indispensable que hayan, y además sólo, dos jugadores... deciden cuál va a comenzar de alguna manera y éste dibuja la equis en cualquiera de las nueve casillas disponibles:

Sigue el otro jugador, dibujando circunferencias o bolas, y se iran turnando sucesivamente hasta que uno de ellos dibuje tres de su símbolo seguidos en una de las tres filas o una de las tres columnas, o en una de las dos diágonales.

Bueno...

ya entendimos el juego, podría ganar cualquiera o ninguno. Ahora vamos a programarlo; empecemos por el HTML, creemos en una carpeta vacía un archivo llamado index.html.

Primero que nada, tenemos que maquetar el documento HTML básico:

Esto es lo mismo en el caso de cualquier documento HTML, en la etiqueta <title></title> pusimos el nombre del documento.

Ahora, tenemos que maquetar la cuadrícula. Hagamos nueve cajas que puedan contener cosas (una equis o una circunferencia), a su vez dentro de una caja. Un <div></div> es una etiqueta de HTML, justo para esto, además. Una etiqueta de HTML debe abrirse y cerrarse y puede contener texto y/u otras etiquetas de HTML que a su vez deben abrirse y cerrarse.

Para identificar los elementos que creamos usando CSS y Javascript, debemos ponerles atributos identificadores a modo de nombres, como las clases, que pueden tener varios elementos, o los id, que son únicos, para un elemento solamente. Usemos un id para la cuadrícula, que es sólo una, y usemos clases para las casillas que son varias y similares.

Ahora creemos una carpeta en la misma carpeta donde está el archivo HTML, que se llama triqui.html, para contener los estilos CSS, llamada css y creemos allí un archivo llamado style.css. La carpeta donde está triqui.html ahora debería lucir así:

Y abriendo triqui.html deberíamos ver un documento sin nada visible:

Usemos la etiqueta <link> para conectar triqui.html con css/style.css:

Ahora escribamos algunos estilos en CSS. Los estilos de CSS nos permiten definir la forma, el tamaño, el color y muchísimas otras cosas de los elementos de HTML.

Definamos el alto y ancho de #cuadrícula (los id se identifican con un # antes y las clases con un ., antes, también). El alto se llama height en CSS y el ancho width.

display: inline-block; hace que las casillas no se pongan una abajo de la otra sinó una a la derecha de la otra. Las casillas tienen un borde de 1px (un píxel) a cada lado, entonces en vez de ponerles un ancho de 30px a cada uno, les puse un ancho de 28px, para que con los bordes sumara 30px cada casilla, y quedaran de a tres por fila por ende en la cuadrícula las casillas. Pero lidiar con HTML5 significa a veces tener que lidiar con comportamientos de navegadores anticuados de algunos usuarios que visitan nuestro sitio o aplicación web, y algunos resabios del mismo HTML en sí, y de CSS y Javascript; como en nuestro caso, que vemos que no caben perfectas las casillas en la cuadrícula a pesar de que el ancho total de cada una, con el borde, es de 30px. Esto se debe al espacio en blanco entre las casillas, todo lo que está señalado con guiones en este código:

La mejor manera de lidiar con esto, y que funcione en navegadores antiguos, es deshacernos de el espacio en blanco entre elementos literalmente, cambiando el maquetado un poco:

Y cambiémosle el vertical-align a top a las casillas para que se alineen de su parte de arriba con su posición dentro de la cuadrícula:

¡Listo!; ya tenemos nuestra cuadrícula. Ahora creemos una carpeta llamada js y creemos un archivo dentro de ésta llamado main.js. Así debería lucir en este momento la carpeta donde está triqui.html:

Usemos la etiqueta <script></script> para conectar triqui.html con main.js. Tenemos que tener en cuenta que HTML, como Javascript, se leen por el computador síncronamente, esto es, de arriba a abajo, de izquierda a derecha, una sola vez, muuuuuy rápido; mejor dicho, de inmediato, una página tarda en cargar mientras descarga el archivo de HTML y los archivos que esta solicita al servidor, donde están las carpetas con los archivos y las configuraciones de comunicación con el cliente. Entonces si ponemos la etiqueta <script></script> en el <head></head>, no tendrá acceso a los elementos dentro de la etiqueta <body></body>, ni los códigos dentro de etiquetas <script></script> de más abajo. Así conectaríamos triqui.html con js/main.js:

Lo vamos a poner en el head porque vamos a escribirle un código para que espere a que se cargue el documento. El código que usaremos es este:

Ábre triqui.html en otra página para que veas la alerta justo cuando se produce.

Hay varios eventListeners que nos dispone Javascript, que pueden escuchar por ciertos eventos, como interacciones del usuario o eventos del documento; los puedes usar usando la función document.addEventListener(), aquí, usamos el eventListener DOMContentLoaded, y la función que hay como segundo argumento de la función document.addEventListener() es lo que se ejecutará cuando cargen todos los elementos del documento, que es aquello por lo que escucha DOMContentLoaded, y en k estarán disponibles todo el objeto que devuelve el eventListener, o el callback; no usaremos el callback en este caso, sinó que usaremos alert(), que nos permite aparecer un cuadro de diálogo del sistema con el texto que queramos, en este caso, la cantidad, que obtenemos con .length, de las casillas, que obtenemos con document.getElementsByClassName("casilla").

¡Pero hagámoslo más calido y humano!, pongamos un mensaje más largo para dar ese dato:

Míra triqui.html aquí.

Pero hágamos algo diferente cuando cargue la página; lo que íbamos a hacer, el Triqui. Lo que debería suceder cuando se cargue la página es que le pongamos un eventListener a las casillas que nos diga cuando le dio click el usuario; ésto lo hacemos así:

El primero de los 9 elementos que obtenemos con document.getElementsByClassName es el 0 y lo accedemos así: document.getElementsByClassName("casilla")[0]. Vamos a empezar con la casilla 0 y seguir con cada una hasta la 8, que es la novena, por que empiezan en 0 y no en 1, y ponerle a cada una el eventListener para que haga algo cuando le de click el usuario, ¡podemos hasta cambiar el CSS con Javascript!; esto lo podemos hacer con un bucle for(inicialización, condición, incrementador){}. Lo que dice var i= 0; es la inicialización, inicializamos la variable i en 0. Después; lo que dice i < document.getElementsByClassName("casilla").length; es la condición, que i sea menor que la cantidad de casillas, que es nueve, si se cumple, cuando llega el código a la condición luego de la inicialización, que es sólo la primera vez, como el nombre lo dice, entra a ejecutar lo que hay entre llaves {}, luego de la inicialización y de que se haya ejecutado el código entre llaves, el bucle pasa al incrementador, que es lo que dice i++, en este caso aumenta 1 al valor de i, de ahí pasa a la condición y si se sigue cumpliendo ejecuta lo que hay entre llaves.

Así, estaremos con el código dentro de las llaves, que además usa i para denotar la posición de cada una de las nueve casillas, poniéndole el eventListener a cada una. El eventListener en sí cambia el color del fondo de la casilla por otro cuando el usuario le da click.

Ahora, vamos a cambiarle el css a las casillas pero poniéndoles clases, intercalando las clases equis y circulo, al darle click; empecemos por quitar el código que teníamos y definir la variableturno como "equis", así:

Ahora, lo que debe suceder al dar click a una casilla es que se le ponga una clase que será el valor de turno; después le asignaremos estilos de css específicos a los elementos con estas clases.

Así quedaría /js/main.js

Y así quedaría /css/style.css

Y así está el juego en este momento:

En /js/main.js, lo que hicimos fue que cada vez que le diéramos click a una casilla, después de asegurarnos con la función .classList.contains() y con el operador lógico not (!) de que no tenga ni la clase equis ni la clase circulo, con la función .classList.add() le agregáramos como clase el valor de la variable turno y luego de esto, si el valor de la variable turno es "equis", lo cambiamos por "circulo", y si no, lo cambiamos por "equis". En /css/style.css, escribimos estilos para todos los elementos con la clase casilla que además tengan la clase equis, para que tengan un color de fondo rojo, y para los elementos con la clase casilla que además tengan la clase circulo para que tengan un color de fondo azul.

No cambiemos el color de fondo, agreguémosle un pseudo-elemento de html con css, usando :after, así:

Primero, cambiamos algo del css de .casilla, cambiamos el position a relative, el tamaño de fuente a 25px y la fuente a sans-serif. Un pseudo-elemento generado con :after agrega html a un selector de css, content: ""; es el html que vas a agregar, text-align: -; determina si como está el texto alineado horizontalmente, aquí lo centramos; width: -; es el ancho, que va a ser 100% en este caso, para que se centre con respecto a todo el espacio horizontal disponible, y usemos display: -;, en este caso inline-block para que hagan efecto estos estilos; tendremos que usar position: absolute; para poder centrar como queramos verticalmente, por eso usamos top: -; y dimos con la cantidad -2px, con respecto a la posición de la parte de arriba original.

...//