Ejercicio N en Raya con JavaScript

Descripción

Este repositorio recopila el ejercicio "N en Raya" de la asignatura Lenguaje de Marcas realizado en el segundo trimestre del Primer curso del Grado Superior en Desarrollo de Aplicaciones Multiplataforma (DAM). La práctica se centra en la creación de una versión dinámica y personalizable del clásico juego "Tres en raya", permitiendo al usuario elegir el tamaño del tablero para una partida de "N en raya". El proyecto está desarrollado íntegramente con tecnologías web front-end: HTML5, CSS3 y JavaScript.

Objetivo

El objetivo principal de esta práctica es aplicar los conocimientos fundamentales de JavaScript para la manipulación del DOM y la gestión de eventos. Se busca construir una aplicación web interactiva y funcional desde cero, implementando la lógica del juego, la creación dinámica del tablero y la validación de las condiciones de victoria o empate.

Estructura del Repositorio

El proyecto se organiza de la siguiente manera:

• index.html: Archivo principal que contiene la estructura HTML de la página, incluyendo los contenedores para el tablero, los controles del juego y la información de la partida.
• assets/css/estilos.css: Hoja de estilos que define la apariencia visual del juego, el tablero, los botones y la tipografía, buscando una interfaz limpia y agradable.
• assets/js/script.js: Contiene toda la lógica del juego escrita en JavaScript. Se encarga de:
  • Generar dinámicamente el tablero según la selección del usuario.
  • Gestionar los turnos de los jugadores.
  • Manejar los eventos de clic en las celdas.
  • Validar las jugadas para determinar si hay un ganador (en filas, columnas o diagonales) o si se ha producido un empate.
  • Reiniciar el juego.
• assets/img/: Carpeta que almacena las imágenes utilizadas en el juego, como los íconos para cada jugador y la imagen de fondo de las celdas.

Requisitos

Para ejecutar este proyecto, solo necesitas un navegador web moderno que soporte HTML5, CSS3 y JavaScript (ES6). No se requiere ninguna instalación adicional.

1. Clona o descarga este repositorio.
2. Abre el archivo index.html en tu navegador de preferencia.

Nota

La estructura del ejercicio ha sido establecida por el profesor de la asignatura, dando la libertad de abordarlo según criterio personal. Este repositorio tiene fines educativos y refleja el progreso en el aprendizaje de HTML5, CSS3 y JavaScript durante el primer curso de DAM.

Reflexión sobre el Aprendizaje Adquirido

El desarrollo de este proyecto ha sido una excelente oportunidad para consolidar varios conceptos clave. A nivel personal, he podido aprender:

• Practicar la manipulación del DOM, creando, modificando y eliminando elementos HTML desde JavaScript para construir el tablero de forma dinámica.
• Implementar la gestión de eventos como click en las celdas y change en el selector de tamaño, lo que ha sido fundamental para conseguir la interactividad del juego.
• Afrontar el desafío de diseñar e implementar algoritmos para validar la victoria. Esto me ha obligado a pensar en cómo recorrer el estado del tablero de múltiples maneras (horizontal, vertical y diagonal) y gestionar los contadores para cada jugador.
• Mejorar la modularidad de mi código al separar la lógica en funciones específicas, lo que ha hecho que el código sea legible y fácil de mantener.
• Utilizar las clases de CSS para gestionar estados de la aplicación, y no solo para aplicar estilos, descubriendo una práctica muy común en el desarrollo web.

En resumen, este ejercicio me ha permitido aplicar la teoría en un caso práctico y entretenido, reforzando mis bases en el desarrollo web front-end.