Juego de Tic Tac Toe en HTML con ChatGPT en 2 minutos
Published: 2023-03-03 19:31:55

---
title: Juego de Tic Tac Toe en HTML con ChatGPT en 2 minutos
published: true
date: 2023-03-03 17:10:13 UTC
tags: 
canonical_url: https://jfbarrios.com/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](https://chat.openai.com/) y escribirle que necesitamos que nos genere el juego de Tic Tac Toe en Javascript, y este es el resultado:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677862396998/e3765174-5daa-4223-a678-a0c8c38966c2.png align="center")

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

```xml
<!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

```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

```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";
}
```

### Y acá el juego en acción

![Tic Tac Toe Game Javascript ChatGPT](https://cdn.hashnode.com/res/hashnode/image/upload/v1677863330572/7e08ced2-e680-49b4-b166-2d8f0fc858fd.gif)