Implementar un sistema de vidas dinámicas en JavaScript es el paso que convierte un combate estático en un juego real. Aquí aprendes a manipular el DOM con getElementById e innerHTML para que las vidas del jugador y del enemigo cambien según el resultado de cada ataque, usando variables globales y operadores de decremento.

Por qué necesitas variables globales para las vidas del jugador

El HTML solo muestra un número fijo, pero JavaScript no sabe cuántas vidas quedan tras cada combate. Sin una variable que guarde ese estado, nunca podrás restar correctamente.

La solución es declarar dos variables globales con el valor inicial conocido: ambas mascotas arrancan con tres vidas. A diferencia del ataque del jugador o del enemigo, donde el valor inicial era desconocido, aquí sí sabes el estado por defecto del juego.

javascript let vidasJugador = 3; let vidasEnemigo = 3;

¿Qué es una variable global en JavaScript? Es una variable declarada fuera de cualquier función que puedes leer y modificar desde cualquier parte del código. Sirve para guardar estados que cambian con el tiempo, como las vidas en un juego.

Cómo preparar el HTML con IDs únicos

Para que JavaScript pueda tocar el contador de vidas, cada span necesita su propio identificador. En la sección de seleccionar ataque, los números que envuelven el contador pasan a tener id="vidas-jugador" y id="vidas-enemigo".

Con esos IDs, document.getElementById puede traer el elemento exacto y modificar su contenido con innerHTML. Sin esa marca, el navegador no sabría cuál de los dos span debe actualizar.

Dónde colocar la lógica de restar vidas en el combate

La función ideal para actualizar el marcador es la función de combate, porque ahí ya vive el condicional que decide si ganaste, perdiste o empataste. Mezclar esa decisión con la actualización del DOM mantiene la lógica en un solo lugar.

Dentro de la función creas dos referencias al inicio:

• spanVidasJugador apunta al span del jugador con getElementById.
• spanVidasEnemigo apunta al span del enemigo con la misma técnica.
• Ambas se reutilizan en cada rama del condicional.

Luego, en la rama donde el jugador pierde, restas una vida con el operador de decremento vidasJugador-- y reflejas el cambio en pantalla con spanVidasJugador.innerHTML = vidasJugador. El operador -- baja el valor en uno cada vez que se ejecuta, así que tres pasa a dos, dos a uno y uno a cero.

¿Cuándo uso innerHTML en lugar de escribir el número directo? Usa innerHTML cuando el valor depende de una variable que cambia. Si escribes el número fijo, el contador siempre mostrará lo mismo sin importar cuántos combates hayan pasado.

Cómo replicar la lógica para el enemigo cuando ganas

Cuando el resultado es victoria del jugador, quien pierde vidas es la mascota enemiga. Aquí cambias el sujeto: vidasEnemigo-- y spanVidasEnemigo.innerHTML = vidasEnemigo.

Este bloque se copia en las tres ramas donde el jugador gana, ya que cada combinación ganadora (agua vs fuego, fuego vs tierra, tierra vs agua) debe restar una vida al enemigo. En el empate no se toca nada, porque ninguna mascota pierde puntos.

Qué bug aparece cuando las vidas llegan a cero

Al probar el flujo completo seleccionando a Capi Pepo contra Ratigueya, el contador funciona: tres, dos, uno, cero. Pero si sigues atacando, el enemigo termina con menos uno vidas, algo imposible en un juego real.

El error nace porque el código permite seguir lanzando ataques aunque una mascota ya tenga cero vidas. Falta una validación que revise las vidas antes de ejecutar un nuevo combate y declare al ganador definitivo cuando alguien llega a cero.

Resolver ese control es el siguiente paso lógico para cerrar la mecánica del juego. ¿Qué condición agregarías tú dentro de la función de combate para frenar los ataques cuando una mascota ya cayó? Cuéntalo en los comentarios.