Si ya tienes un juego funcionando con HTML, CSS y JavaScript, el siguiente paso es prepararlo para escalar. Aquí aprenderás a identificar áreas de oportunidad en tu código JavaScript, mover el script al lugar correcto y aplicar el principio don't repeat yourself para que agregar nuevos personajes deje de ser un dolor de cabeza.
¿Por qué necesitas refactorizar tu código JavaScript?
Imagina que tu juego ya funciona y mañana te piden agregar 1.000 o 1.500 personajes nuevos. Si tu única opción es hacer copy paste de cada bloque y editar a mano, vas a perder horas y multiplicar errores.
La refactorización resuelve eso. En lugar de duplicar HTML y JavaScript por cada mascota, automatizas el proceso con clases, objetos y manipulación del DOM, que es la representación de tu HTML que JavaScript puede leer y modificar.
¿Qué es el DOM? Es la estructura que el navegador construye a partir de tu HTML y que JavaScript puede manipular para cambiar elementos, estilos o contenido en tiempo real.
Esto te importa si trabajas como desarrollador y quieres que tu código sea mantenible, escalable y fácil de leer por otras personas del equipo.
¿Dónde debe ir la etiqueta script en HTML?
Un error común es dejar el <script> dentro del <head>. Y aquí viene lo interesante: esa decisión afecta directamente el performance de tu página [01:50].
Cuando el navegador encuentra un script al inicio, deja de procesar el CSS y el HTML para ejecutar JavaScript primero. Eso genera un bloqueo de renderizado y el usuario ve una pantalla en blanco más tiempo del necesario.
¿Cómo evitar el bloqueo de renderizado?
La solución es simple: mueve el <script> justo antes del cierre de </body>. Así el navegador:
- Lee primero el HTML completo.
- Aplica los estilos del CSS.
- Ejecuta el JavaScript al final, cuando ya hay algo visible para el usuario.
Recuerda que JavaScript existe para agregar interacción. Si la página no se ve, la interacción no sirve de nada.
html
<body>
<!-- todo tu HTML aquí -->
<script src="main.js"></script>
</body>
¿Por qué el script va al final del body? Porque el navegador procesa el documento de arriba hacia abajo. Colocar JavaScript al final permite que el HTML y CSS se rendericen primero y mejora la velocidad de carga percibida.
¿Qué significa el principio don't repeat yourself en JavaScript?
Al revisar el archivo de JavaScript del juego notarás varias funciones, cada una con su propósito. El problema aparece cuando dentro de esas funciones se repiten las mismas variables apuntando a los mismos elementos del HTML [04:30].
Por ejemplo, si varias funciones declaran un let para acceder a los botones de ataque, estás escribiendo la misma línea una y otra vez. Eso rompe el principio don't repeat yourself, conocido como DRY.
¿Cómo identificar código repetido en tus funciones?
Revisa cada función y pregúntate:
- ¿Estoy declarando la misma variable en más de un lugar?
- ¿Apunto al mismo elemento del DOM desde funciones distintas?
- ¿Puedo declarar esa referencia una sola vez en un ámbito superior y reutilizarla?
Si la respuesta es sí, ahí tienes un candidato para mover esa variable fuera de las funciones y dejarla disponible globalmente o dentro de una clase.
¿Qué problemas resuelve aplicar DRY?
- Reduces líneas de código y mejoras la legibilidad.
- Cuando algo cambia, lo modificas en un solo lugar.
- Disminuyes la probabilidad de bugs por inconsistencias.
- Facilitas que otra persona entienda y mantenga tu código.
¿Cómo escalar los personajes y ataques sin tocar el HTML?
En la estructura actual, cada personaje y cada botón de ataque está escrito a mano en el HTML. Eso funciona para tres mascotas con tres ataques iguales, pero se rompe en cuanto un personaje tiene dos ataques o ataques distintos.
La solución pasa por clases y objetos en JavaScript. Una clase te permite definir una plantilla de personaje con sus propiedades (nombre, imagen, ataques) y crear instancias que el código inserte automáticamente en el DOM. Así, agregar 1.500 personajes deja de ser copiar HTML y se convierte en agregar entradas a un arreglo de objetos.
Los botones de ataque también se generan dinámicamente: cada personaje trae su propia lista, y al seleccionarlo el JavaScript pinta solo los botones que le corresponden.
Reto: refactoriza antes de la siguiente clase
Antes de avanzar, intenta resolver esto por tu cuenta:
- Identifica todas las variables
let que se repiten dentro de tus funciones.
- Muévelas a un ámbito superior para declararlas una sola vez.
- Verifica que el juego siga funcionando igual después de refactorizar.
Este ejercicio te prepara para entender clases y objetos en la próxima sesión. Cuéntame en los comentarios cómo resolviste tu refactor y qué áreas de oportunidad encontraste en tu código.
