Juego de Tic Tac Toe en HTML con ChatGPT en 2 minutos

Considero que muchas personas en el mundo de la programación han aprendido bastante gracias a videos, blogs, libros, y stackoverflow etc... donde se pueden ver tutoriales o extractos de código que nos ayudan a completar algún software que estamos desarrollando para la Universidad o el trabajo.

¿pero y si existiera una herramienta a la que le pudieramos pedir específicamente un bloque de código, una función o inclusive un programa completo?

En este artículo veremos como crear el juego de "Tic Tac Toe" en HTML, CSS y JavaScript utilizando ChatGPT. El propósito de este artículo es que conozcamos un poco más acerca de ChatGPT y entender como gracias a esta tecnología podemos apoyarnos para mejorar nuestras habilidades de programación.

¿Qué es ChatGPT?

ChatGPT es un modelo de aprendizaje automático que ha sido entrenado en grandes cantidades de datos de texto de Internet, lo que le permite generar respuestas coherentes y contextualmente apropiadas a preguntas o declaraciones abiertas.

Los datos de entrenamiento utilizados para entrenar ChatGPT pueden haber incluido texto de una amplia gama de fuentes, incluidos los repositorios de código abierto en Github u otras compañías.

En general, ChatGPT es un modelo de lenguaje poderoso que está cambiando la forma en que interactuamos con las máquinas y haciendo que el procesamiento del lenguaje natural sea más accesible para los desarrolladores y las empresas.

Escribiendo el juego

Basta con acceder a la herramienta de ChatGPT y escribirle que necesitamos que nos genere el juego de Tic Tac Toe en Javascript, y este es el resultado:

Acá dejaré el cada sección de código según el nombre del archivo y comentado para que podamos entender que ha sido lo que generó:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <!-- Importa el archivo de estilos de CSS -->
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <!-- Escribe una tabla con 3 filas y 3 columnas. Cada celda debe tener un id que vaya de 0 a 8.
        Por ejemplo, la celda de la esquina superior izquierda debe tener el id 0,
        la celda de la esquina superior derecha debe tener el id 2, y así sucesivamente. -->
    <table>
      <!-- TR es de table row (fila de tabla) -->
      <tr>
        <td id="0"></td>
        <!-- TD es de table data (datos de tabla) -->
        <td id="1"></td>
        <td id="2"></td>
      </tr>
      <tr>
        <td id="3"></td>
        <td id="4"></td>
        <td id="5"></td>
      </tr>
      <tr>
        <td id="6"></td>
        <td id="7"></td>
        <td id="8"></td>
      </tr>
    </table>

    <!-- Importa el archivo de JavaScript -->
    <script src="script.js"></script>
  </body>
</html>

CSS

/* Usamos el identificador de la tabla para seleccionarla y aplicarle sus estilos. */
table {
  border-collapse: collapse; /*  border-collapse nos permite que las celdas de la tabla se vean separadas. */
}

/* Usamos el identificador de td para seleccionarla y aplicarle sus estilos. */
td {
  width: 50px; /*  width nos permite darle un ancho a las celdas de la tabla. */
  height: 50px; /*  height nos permite darle un alto a las celdas de la tabla. */
  text-align: center; /*  text-align nos permite centrar el texto de las celdas de la tabla. */
  vertical-align: middle; /*  vertical-align nos permite centrar el texto de las celdas de la tabla. */
  border: 1px solid black; /*  border nos permite darle un borde a las celdas de la tabla, el grosor es de 1px sólido y color negro. */
  font-size: 36px; /*  font-size nos permite darle un tamaño a la fuente de las celdas de la tabla. */
}

/* Usamos el identificador de la clase X para seleccionarla y aplicarle sus estilos. */
.X {
  color: red; /*  color nos permite darle un color rojo. */
}

/* Usamos el identificador de la clase O para seleccionarla y aplicarle sus estilos. */
.O {
  color: blue; /*  color nos permite darle un color azul. */
}

JavaScript

let currentPlayer = "X"; // currentPlayer es inicializado como "X" para que el primer jugador sea "X"
let cells = document.querySelectorAll("td"); // Selecciona todos los elementos "td" y los almacena en la variable "cells"

cells.forEach(function (cell) {
  // Itera sobre cada elemento "td" y agrega un evento "click" a cada uno
  cell.addEventListener("click", function () {
    // Cuando se hace click en un elemento "td", se ejecuta la función anónima
    if (cell.textContent === "") {
      // Si el elemento "td" no tiene texto, se agrega el texto del jugador actual
      cell.textContent = currentPlayer; // Agrega el texto del jugador actual al elemento "td"
      cell.classList.add(currentPlayer); // Agrega la clase del jugador actual al elemento "td"
      if (checkWin()) {
        // Si checkWin() retorna true, se muestra un mensaje de victoria y se reinicia el juego
        alert(currentPlayer + " wins!"); // Muestra un mensaje de victoria
        reset(); // Reinicia el juego
      } else if (checkDraw()) {
        // Si checkDraw() retorna true, se muestra un mensaje de empate y se reinicia el juego
        alert("It's a draw!"); // Muestra un mensaje de empate
        reset(); // Reinicia el juego
      } else {
        // Si no se cumple ninguna de las condiciones anteriores, se cambia el jugador actual
        currentPlayer = currentPlayer === "X" ? "O" : "X"; // Si el jugador actual es "X", se cambia a "O", de lo contrario, se cambia a "X"
      }
    }
  });
});

// checkWin() retorna true si el jugador actual tiene 3 celdas en línea
function checkWin() {
  // win es inicializado como false
  let win = false;
  // winningCombos contiene todas las combinaciones de celdas que pueden ganar
  let winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  // Itera sobre cada combinación de celdas
  for (let combo of winningCombos) {
    // Si el contenido de la celda en la posición 0, 1 y 2 de la combinación actual es igual al jugador actual,
    // se retorna true
    if (
      cells[combo[0]].textContent === currentPlayer &&
      cells[combo[1]].textContent === currentPlayer &&
      cells[combo[2]].textContent === currentPlayer
    ) {
      win = true;
      break;
    }
  }

  // Retorna true si el jugador actual tiene 3 celdas en línea
  return win;
}

// checkDraw() retorna true si todas las celdas están llenas
function checkDraw() {
  let draw = true;

  // Itera sobre cada celda
  for (let cell of cells) {
    // Si la celda actual está vacía, se retorna false
    if (cell.textContent === "") {
      draw = false;
      break;
    }
  }

  return draw;
}

// reset() reinicia el juego
function reset() {
  // Itera sobre cada celda
  cells.forEach(function (cell) {
    // Elimina el texto de la celda actual y elimina la clase "X" o "O"
    cell.textContent = "";
    cell.classList.remove("X", "O");
  });
  // Reinicia el jugador actual
  currentPlayer = "X";
}