Mostrar información visual a los jugadores es fundamental en cualquier juego web. En lugar de obligar a los usuarios a revisar la consola del navegador para conocer el resultado de cada ataque, lo ideal es generar párrafos dinámicos directamente en el HTML cada vez que ocurre un combate. Esto se logra combinando tres métodos clave de manipulación del DOM: createElement, innerHTML y appendChild.
¿Por qué no basta con innerHTML para mostrar mensajes de combate?
Cuando ya existe un párrafo estático en el HTML con un texto como "Tu mascota atacó con fuego", ese contenido no refleja lo que realmente sucede en el juego. El problema es doble: el texto no se actualiza y, además, si solo usamos innerHTML sobre un elemento existente, estaríamos reemplazando el contenido en lugar de agregar uno nuevo con cada ataque.
Lo que se necesita es crear un nuevo párrafo por cada ronda de combate, de manera que el jugador pueda ver un historial completo de ataques. Para eso entra en juego un método distinto.
¿Cómo funciona document.createElement para generar elementos desde JavaScript?
El método document.createElement permite crear cualquier etiqueta HTML directamente desde JavaScript [3:48]. Su sintaxis es sencilla:
javascript
let parrafo = document.createElement('p')
Este código crea un elemento <p> en memoria, pero todavía no lo inserta en la página. Es importante notar que createElement acepta como argumento el nombre de la etiqueta que queremos generar: 'p' para párrafos, 'div' para contenedores, entre otros.
Una vez creado el elemento, le asignamos su contenido con innerHTML usando concatenación para insertar los valores de las variables globales:
javascript
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' y la mascota del enemigo atacó con ' + ataqueEnemigo
Aquí se aprovecha una ventaja de las variables globales [5:15]: aunque ataqueJugador y ataqueEnemigo se asignan en funciones diferentes, ambas están disponibles dentro de la función crearMensaje porque comparten el mismo ámbito global.
¿Qué es la concatenación y por qué es útil aquí?
La concatenación es la unión de cadenas de texto mediante el operador +. Permite combinar texto fijo con el valor dinámico de variables. En este caso, el mensaje se construye uniendo fragmentos de texto con los valores de ataqueJugador y ataqueEnemigo, de modo que el párrafo siempre refleje los ataques reales de la ronda.
¿Dónde se inserta el párrafo con appendChild?
Crear un elemento no es suficiente. JavaScript no adivina en qué parte del HTML debe aparecer. Para eso existe appendChild [7:52], un método que toma un elemento ya creado y lo inserta como hijo dentro de otro elemento del DOM.
Primero seleccionamos la sección destino:
javascript
let sectionMensajes = document.getElementById('mensajes')
Después insertamos el párrafo:
javascript
sectionMensajes.appendChild(parrafo)
Cada vez que el jugador presiona un botón de ataque, se ejecuta la función crearMensaje, que crea un párrafo nuevo, le asigna el texto correspondiente y lo agrega a la sección de mensajes. Así se construye un historial visual de combate.
¿Cuál es el flujo completo para mostrar los ataques en pantalla?
El proceso sigue un orden lógico:
- El jugador hace clic en un botón de ataque (fuego, agua o tierra).
- Se asigna el valor a la variable global
ataqueJugador.
- Se llama a la función
ataqueAleatorioEnemigo, que define ataqueEnemigo.
- Se invoca
crearMensaje para generar y mostrar el párrafo [9:00].
javascript
function crearMensaje() {
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' y la mascota del enemigo atacó con ' + ataqueEnemigo
let sectionMensajes = document.getElementById('mensajes')
sectionMensajes.appendChild(parrafo)
}
Un detalle importante durante la clase fue un error de escritura o typo al llamar a la función como createMensaje en lugar de crearMensaje [8:32]. JavaScript respondió con un error indicando que la función no estaba definida. Este tipo de errores son comunes y se resuelven verificando que el nombre de la función coincida exactamente en su declaración y en su llamada.
También se eliminó el párrafo estático del HTML para que solo aparezcan los mensajes generados dinámicamente, evitando información falsa antes de que el jugador realice su primer ataque.
Con estos tres métodos combinados —createElement, innerHTML y appendChild— ya es posible mostrar cada ronda de combate directamente en la página. Lo que queda pendiente es determinar si el jugador ganó, perdió o empató en cada enfrentamiento. ¿Ya intentaste implementar esa lógica por tu cuenta?
