Cuando tu juego ya resta vidas en cada combate, el siguiente paso lógico es detectar cuándo alguna mascota llega a cero y declarar un ganador. Esta lógica de validación es fundamental en cualquier videojuego de turnos y, aunque parece sencilla, requiere pensar bien en qué momento del flujo ejecutarla para que todo funcione correctamente.
¿Dónde colocar la validación de vidas en el flujo del juego?
La ubicación de esta revisión importa más de lo que parece. Al iniciar un combate, ambas mascotas siempre tienen vidas disponibles, por lo que no tiene sentido validar antes de ejecutar el ataque [1:22]. La estrategia correcta es revisar las vidas después de cada combate, una vez que ya se restaron los puntos correspondientes.
Dentro de la función de combate, justo al final de toda la lógica de ataques, empates y resta de vidas, se agrega un llamado a una nueva función llamada revisarVidas [2:07]:
javascript
function revisarVidas() {
if (vidasEnemigo === 0) {
crearMensajeFinal("¡Felicitaciones! Ganaste 🎉");
} else if (vidasJugador === 0) {
crearMensajeFinal("Lo siento, perdiste 😢");
}
}
El condicional evalúa primero si las vidas del enemigo llegaron a cero. Si es así, el jugador ganó. Después, con un else if, se pregunta si las vidas del jugador son cero, lo que indica derrota [2:40]. Si ninguna condición se cumple, simplemente no se hace nada y el juego continúa con normalidad, por eso el bloque else se omite intencionalmente [3:16].
¿Por qué no se necesita un else al final?
Cuando un bloque else no contiene ninguna instrucción, es preferible eliminarlo. Dejarlo vacío solo añade ruido al código. Si ambas mascotas aún tienen vidas, el flujo del juego sigue sin intervención adicional.
¿Cómo crear un mensaje final distinto al de combate?
La función crearMensaje existente está diseñada para mostrar resultados de cada turno: qué atacó cada mascota y si ganó, perdió o empató. Pero un mensaje de fin de juego necesita un formato diferente [4:20].
La solución es crear una función nueva llamada crearMensajeFinal que reciba un parámetro llamado resultadoFinal [5:30]:
javascript
function crearMensajeFinal(resultadoFinal) {
let sectionMensajes = document.getElementById("mensajes");
let parrafo = document.createElement("p");
parrafo.innerHTML = resultadoFinal;
sectionMensajes.appendChild(parrafo);
}
Esta función reutiliza la misma lógica de manipulación del DOM: seleccionar la sección de mensajes con getElementById, crear un elemento p con createElement, asignarle contenido mediante innerHTML y finalmente insertarlo en el HTML con appendChild [5:00].
¿Qué diferencia hay entre crearMensaje y crearMensajeFinal?
crearMensaje recibe los ataques de ambos jugadores y el resultado del turno.crearMensajeFinal recibe únicamente el resultado final como texto libre.- No hay empate posible en el mensaje final: solo victoria o derrota [5:15].
¿Cómo se integra todo en el flujo completo?
Cada vez que el jugador selecciona un ataque, la función de combate ejecuta esta secuencia:
- Compara el ataque del jugador contra el del enemigo.
- Determina si hubo empate, victoria o derrota en ese turno.
- Resta vidas a quien corresponda.
- Llama a
revisarVidas para verificar si alguna mascota llegó a cero [6:30].
Cuando las vidas del enemigo llegan a cero, aparece el mensaje "¡Felicitaciones! Ganaste" al final de la lista de combates [7:05]. Todo el historial de ataques permanece visible, lo que permite al jugador repasar cómo se desarrolló la batalla.
Una práctica recomendable es experimentar con el código: cambiar los mensajes, modificar la cantidad de vidas iniciales o incluso romper algo a propósito para entender mejor cómo funciona cada parte. Comparte en los comentarios tu resultado y el código que modificaste.
