Detectar cuándo termina una batalla en un juego hecho con JavaScript es clave para anunciar al ganador. Aquí aprenderás a validar las vidas en cero y disparar un mensaje final dinámico en el DOM, usando condicionales y funciones reutilizables.
Este flujo es útil si estás construyendo tu primer videojuego con HTML, CSS y JavaScript y necesitas cerrar el ciclo del combate sin que el juego siga corriendo cuando alguien ya perdió.
Dónde colocar la validación de vidas en el flujo del combate
La pregunta inicial es sencilla: ¿en qué momento revisas las vidas? La respuesta vive dentro de la función de combate, justo al final, cuando ya se calcularon los resultados de empate, victoria o derrota y se actualizó el HTML.
No tiene sentido validar antes del combate, porque al iniciar el juego ambas mascotas tienen vidas completas. La validación cobra sentido después de cada round, cuando alguno de los jugadores podría haber llegado a cero.
En lugar de dejar un comentario suelto, conviene reemplazarlo por una llamada limpia a una función nueva, por ejemplo revisarVidas() [04:18]. Así el código queda legible y cada función mantiene una sola responsabilidad.
¿Cuándo debo revisar las vidas en un juego por turnos? Después de cada combate, no antes. Al iniciar siempre hay vidas completas, así que validar al final evita falsos positivos y mantiene la lógica clara.
Cómo escribir la función revisarVidas con if y else if
La función revisarVidas evalúa dos variables: vidasJugador y vidasEnemigo. La estructura usa un condicional if para el primer caso y un else if para el segundo [05:42].
La lógica se lee así:
- Si
vidasEnemigo === 0, ganaste tú.
- Si
vidasJugador === 0, perdiste.
- Si ninguna llega a cero, el juego sigue su curso normal.
Un detalle interesante: el else final no es necesario. Como no hay ninguna acción que ejecutar cuando ambos siguen vivos, omitirlo deja el código más limpio y comunica que ahí no pasa nada. Menos código que no hace nada es mejor que código vacío que confunde.
Por qué separar la lógica en una función propia
Meter toda la validación dentro de la función de combate funcionaría, pero la haría más larga y difícil de leer. Crear revisarVidas como función independiente sigue el principio de responsabilidad única: una función, una tarea.
Además, si más adelante quieres agregar lógica extra al final del juego, como guardar puntajes o reiniciar el tablero, ya tienes el lugar exacto donde hacerlo.
Cómo crear el mensaje final con innerHTML y appendChild
La función original crearMensaje recibe nombres de mascotas, ataques y un resultado de empate, victoria o derrota. Pero el mensaje final es distinto: necesitas anunciar el cierre del juego, no narrar un round más.
La solución elegante es duplicar la función y adaptarla. Copia crearMensaje, renómbrala a crearMensajeFinal y simplifica los parámetros [09:35]. En vez de recibir varios datos, solo necesita uno: resultadoFinal.
Dentro de la función, el flujo se mantiene parecido:
- Selecciona la sección de mensajes en el DOM.
- Crea un nuevo párrafo con
document.createElement.
- Asigna
parrafo.innerHTML = resultadoFinal.
- Adjunta el párrafo con
sectionMensajes.appendChild(parrafo).
La diferencia con la función original está en el innerHTML: ya no concatena ataques ni resultados de combate, solo muestra el texto que recibe como argumento.
¿Qué hace appendChild en JavaScript? Inserta un elemento como hijo dentro de otro nodo del DOM. Aquí lo usas para que el párrafo del mensaje final aparezca dentro de la sección de mensajes en el HTML.
Cómo enviar el texto de victoria o derrota
Dentro de revisarVidas, cuando detectas que ganaste, llamas a crearMensajeFinal("Felicitaciones, ganaste 😀"). Cuando detectas que perdiste, llamas a crearMensajeFinal("Lo siento, perdiste 😢").
Los emojis son opcionales, pero ayudan a que el feedback se sienta más vivo. Puedes personalizar los textos como quieras: lo importante es que el argumento llegue tal cual al innerHTML del párrafo.
Por qué duplicar funciones a veces es buena idea
Reutilizar código está bien, pero forzar una sola función para casos muy distintos termina ensuciando la lógica con condicionales innecesarios. Tener crearMensaje y crearMensajeFinal por separado deja cada función con un propósito claro.
La nomenclatura también importa. Llamar al parámetro resultadoFinal en vez de simplemente resultado evita confusiones cuando lees el código semanas después. Un nombre más explícito te ahorra dolores de cabeza.
¿Cuándo conviene duplicar una función en lugar de reutilizarla? Cuando los parámetros y el comportamiento difieren tanto que reutilizar requeriría más condicionales que el código duplicado. Claridad gana sobre DRY mal aplicado.
Cómo probar la validación en el navegador
Al recargar la página y jugar varios rounds atacando con fuego, agua y tierra, las vidas del enemigo bajan hasta llegar a cero. En ese momento aparece el mensaje final de victoria justo debajo del historial de combates [13:48].
Si quieres romper el código y experimentar, prueba cambiar los textos, añadir más emojis, mostrar estadísticas finales o incluso un botón para reiniciar el juego. Cuéntame en los comentarios si ganaste o perdiste y comparte tu código para que la comunidad te ayude a llevarlo más lejos.
