Juego de Tres en Raya | HTML, CSS, JavaScript

Introducción

En este proyecto, aprenderás a crear un juego de Tres en Raya utilizando HTML, CSS y JavaScript. Tres en Raya es un juego para dos jugadores en el que los jugadores toman turnos para marcar una X o una O en una cuadrícula de 3x3. El objetivo es obtener tres marcas en línea, ya sea horizontal, vertical o diagonalmente. Crearás los archivos HTML, CSS y JavaScript necesarios e implementarás la lógica del juego paso a paso.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo establecer la estructura básica del juego de Tres en Raya utilizando HTML.
Cómo agregar estilos CSS para definir la apariencia de los elementos del juego.
Cómo implementar la lógica del juego utilizando JavaScript.
Cómo manejar las interacciones del usuario, comprobar victorias o empates y actualizar puntuaciones.
Cómo renderizar el tablero de juego y actualizar el indicador de turno.
Cómo permitir que los jugadores reinicien el juego y empiecen una nueva ronda.

🏆 Logros

Después de completar este proyecto, podrás:

Estructurar un archivo HTML para una aplicación web.
Estilizar elementos utilizando clases CSS.
Implementar la lógica del juego utilizando JavaScript.
Manejar las interacciones del usuario y actualizar la interfaz de usuario en consecuencia.
Renderizar el tablero de juego y actualizar el indicador de turno.
Crear oyentes de eventos y manejar eventos en JavaScript.

Crea el archivo HTML

Crea un nuevo archivo llamado index.html y agrega el siguiente código a él.

cd ~/proyecto
touch index.html

Este código establece la estructura básica del juego de Tres en Raya.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tres en Raya</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* Estilos CSS para el juego */
    </style>
  </head>

  <body>
    <div id="app">
      <h1 class="text-3xl font-bold mb-4 text-gray-900">Tres en Raya</h1>
      <div id="tablero" class="grid grid-cols-3 gap-4 mb-4">
        <!-- Celdas del tablero de juego -->
      </div>
      <div id="marcador" class="flex justify-between items-center mb-4">
        <!-- Puntuaciones de los jugadores -->
      </div>
      <div
        id="indicador-turno"
        class="text-2xl font-bold mb-4 text-gray-900"
      ></div>
      <button
        id="boton-reiniciar"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Reiniciar Juego
      </button>
    </div>

    <script>
      // Código JavaScript para la lógica del juego
    </script>
  </body>
</html>

✨ Revisar Solución y Practicar

Agrega estilos CSS

Dentro de la etiqueta <style> en la sección <head> del archivo HTML, agrega los estilos CSS necesarios para el juego. Estos estilos definen la apariencia de los elementos del juego, como el tablero de juego, las celdas, las puntuaciones y los botones.

<style>
  .celda-tablero {
    width: 100px;
    height: 100px;
  }

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #222;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  #app {
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    font-size: 32px;
    color: #333;
  }

  .text-gray-900 {
    color: #333 !important;
  }

  .text-2xl {
    font-size: 24px;
  }

  .bg-blue-500 {
    background-color: #4267b2;
  }

  .bg-blue-500:hover {
    background-color: #3b5ca0;
  }

  .bg-blue-700 {
    background-color: #385898;
  }

  .text-white {
    color: #fff !important;
  }

  .redondeado {
    border-radius: 4px;
  }

  .destacado {
    background-color: #ffed4a;
  }
</style>

También puedes agregar style.css al proyecto y vincularlo al archivo HTML usando la etiqueta <link>.

<link rel="stylesheet" href="style.css" />

Elige el método que prefieras.

✨ Revisar Solución y Practicar

Agrega el código JavaScript de la lógica del juego

Dentro de la etiqueta <script> al final del archivo HTML, agrega el código JavaScript que maneja la lógica del juego. Este código lleva un registro del estado del juego, maneja las interacciones del usuario, verifica si hay una victoria o un empate, actualiza las puntuaciones y renderiza el tablero de juego.

<script>
  // Código de la lógica del juego
</script>

✨ Revisar Solución y Practicar

Inicializa las variables del juego

Declara las variables necesarias al principio del código JavaScript. Estas variables almacenarán el estado del juego, las puntuaciones de los jugadores y otras información relevante.

// Lógica del juego
const tablero = ["", "", "", "", "", "", "", "", ""];
let jugadorActual = "X";
let juegoTerminado = false;
let puntuacionJugadorX = 0;
let puntuacionJugadorO = 0;
let celdasGanadoras = [];

✨ Revisar Solución y Practicar

Maneja el clic en una celda

Crea una función llamada manejarClicCelda que se llamará cuando se haga clic en una celda del tablero de juego. Esta función manejará la lógica principal del juego, como actualizar el tablero, comprobar si hay una victoria, actualizar las puntuaciones y cambiar el jugador actual.

function manejarClicCelda(index) {
  if (juegoTerminado || tablero[index] !== "") return;
  tablero[index] = jugadorActual;
  renderizarTablero();

  if (verificarVictoria()) {
    actualizarPuntuacion();
    resaltarCeldasGanadoras();
    alert(`¡El jugador ${jugadorActual} gana!`);
    juegoTerminado = true;
  } else if (tablero.every((celda) => celda !== "")) {
    alert("¡Es un empate!");
    juegoTerminado = true;
  } else {
    jugadorActual = jugadorActual === "X" ? "O" : "X";
    actualizarIndicadorTurno();
  }
}

✨ Revisar Solución y Practicar

Comprueba si hay una victoria

Crea una función llamada verificarVictoria que comprueba si existe una condición de victoria en el tablero de juego. Esta función compara los valores en el array del tablero con las combinaciones ganadoras para determinar si un jugador ha ganado el juego.

function verificarVictoria() {
  const combinacionesGanadoras = [
    [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 (let i = 0; i < combinacionesGanadoras.length; i++) {
    const [a, b, c] = combinacionesGanadoras[i];
    if (
      tablero[a] !== "" &&
      tablero[a] === tablero[b] &&
      tablero[a] === tablero[c]
    ) {
      celdasGanadoras = [a, b, c];
      return true;
    }
  }
  return false;
}

✨ Revisar Solución y Practicar

Reinicia el juego

Crea una función llamada reiniciarJuego que restablece el estado del juego a sus valores iniciales. Esta función se llama cuando se hace clic en el botón de reinicio y limpia el tablero, restablece el jugador actual, limpia las celdas ganadoras, actualiza el indicador de turno y renderiza el tablero.

function reiniciarJuego() {
  tablero.fill("");
  jugadorActual = "X";
  juegoTerminado = false;
  celdasGanadoras = [];
  actualizarIndicadorTurno();
  renderizarTablero();
}

✨ Revisar Solución y Practicar

Actualiza las puntuaciones de los jugadores

Crea una función llamada actualizarPuntuacion que actualiza las puntuaciones de los jugadores. Esta función se llama cuando un jugador gana un juego. Incrementa la puntuación del jugador correspondiente y actualiza la visualización de la puntuación en la página.

function actualizarPuntuacion() {
  if (jugadorActual === "X") {
    puntuacionJugadorX++;
    document.getElementById("puntuacion-jugador-x").textContent =
      puntuacionJugadorX;
  } else {
    puntuacionJugadorO++;
    document.getElementById("puntuacion-jugador-o").textContent =
      puntuacionJugadorO;
  }
}

✨ Revisar Solución y Practicar

Actualiza el indicador de turno

Crea una función llamada actualizarIndicadorTurno que actualiza el indicador de turno en la página para mostrar el turno actual del jugador.

function actualizarIndicadorTurno() {
  const indicadorTurno = document.getElementById("indicador-turno");
  indicadorTurno.textContent = `Turno actual: Jugador ${jugadorActual}`;
}

✨ Revisar Solución y Practicar

Destaca las celdas ganadoras

Crea una función llamada destacarCeldasGanadoras que agrega una clase de resaltado a las celdas ganadoras en el tablero de juego. Esta función se llama cuando un jugador gana el juego.

function destacarCeldasGanadoras() {
  const celdas = document.querySelectorAll(".celda-tablero");
  celdas.forEach((celda, índice) => {
    if (celdasGanadoras.includes(índice)) {
      celda.classList.add("destacado");
    }
  });
}

✨ Revisar Solución y Practicar

Dibuja el tablero de juego

Crea una función llamada dibujarTablero que actualiza el tablero de juego en la página de acuerdo con el estado actual del arreglo tablero. Esta función se llama después de cada movimiento del jugador para actualizar la visualización.

function dibujarTablero() {
  const celdas = document.querySelectorAll(".celda-tablero");
  celdas.forEach((celda, índice) => {
    celda.textContent = tablero[índice];
    celda.classList.remove("destacado");
  });
}

✨ Revisar Solución y Practicar

Agrega oyentes de eventos

Agrega oyentes de eventos a las celdas del tablero de juego y al botón de reinicio. Estos oyentes de eventos llaman a las funciones correspondientes cuando ocurren los eventos.

// Oyentes de eventos
const celdas = document.querySelectorAll(".celda-tablero");
celdas.forEach((celda, índice) => {
  celda.addEventListener("click", () => manejarClicCelda(índice));
});

const botonReinicio = document.getElementById("boton-reinicio");
botonReinicio.addEventListener("click", reiniciarJuego);

✨ Revisar Solución y Practicar

Renderizado inicial

Al final del código JavaScript, agrega el código para el renderizado inicial. Este código configura el estado inicial del juego, actualiza el indicador de turno y renderiza el tablero de juego.

// Renderizado inicial
actualizarIndicadorTurno();
dibujarTablero();

✨ Revisar Solución y Practicar

Ejecuta el proyecto

Ahora puedes ejecutar el proyecto y jugar al Tres en Raya!

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Esto abrirá el proyecto en la pestaña Web 8080.

Haz clic en las celdas para hacer tus jugadas y haz clic en el botón de reinicio para comenzar un nuevo juego.

✨ Revisar Solución y Practicar

Resumen

¡Felicidades! Has creado con éxito un juego de Tres en Raya utilizando HTML, CSS y JavaScript. El proyecto incluyó la creación del archivo HTML, la adición de estilos CSS, la implementación de la lógica del juego y el manejo de las interacciones del usuario. El juego permite que dos jugadores tomen turnos, verifica si hay un ganador o un empate, actualiza las puntuaciones y resalta las celdas ganadoras. Ahora puedes ejecutar el proyecto y disfrutar de jugar al Tres en Raya.

Construir una aplicación web de Tres en Raya

Introducción

👀 Vista previa

🎯 Tareas

🏆 Logros

Crea el archivo HTML

Agrega estilos CSS

Agrega el código JavaScript de la lógica del juego

Inicializa las variables del juego

Maneja el clic en una celda

Comprueba si hay una victoria

Reinicia el juego

Actualiza las puntuaciones de los jugadores

Actualiza el indicador de turno

Destaca las celdas ganadoras

Dibuja el tablero de juego

Agrega oyentes de eventos

Renderizado inicial

Ejecuta el proyecto

Resumen