Funcionalidad de Reinicio y Desactivación de Botones en Juego

Cuando un juego llega a su desenlace, ya sea victoria o derrota, necesitas dos cosas fundamentales: impedir que el jugador siga interactuando con los controles y ofrecer la opción de volver a empezar. Estas dos funcionalidades son esenciales para una experiencia de usuario completa, y resolverlas con JavaScript resulta más sencillo de lo que parece.

¿Cómo hacer funcionar el botón de reiniciar con location.reload?

El primer paso es conectar el botón de reiniciar con una función que recargue todo el juego. Dentro de la función iniciarJuego, donde ya se encuentran todos los event listeners de los botones de mascotas y ataques, se crea una nueva variable para seleccionar el botón de reiniciar [03:30]:

javascript let botonReiniciar = document.getElementById('boton-reiniciar') botonReiniciar.addEventListener('click', reiniciarJuego)

La función reiniciarJuego utiliza una herramienta poderosa del navegador: location.reload() [05:10]. El objeto location representa la ubicación actual en la que se encuentra el navegador. No es lo mismo que window o document; location se refiere específicamente a la URL o ruta que está cargada. Su método reload funciona exactamente como presionar el botón de recargar del navegador:

javascript function reiniciarJuego() { location.reload() }

Al ejecutarse, la página se recarga por completo: las vidas vuelven a su valor original, no hay mascotas seleccionadas y no existen ataques previos. Es un reinicio limpio y total.

¿Por qué es necesario deshabilitar los botones de ataque al terminar?

Existe un problema que ocurre cuando una mascota llega a cero vidas: los botones de ataque siguen activos. Esto permite que el jugador continúe lanzando ataques incluso después de que el juego ha terminado, generando resultados absurdos como vidas en números negativos [06:20].

Para solucionarlo se utiliza el atributo disabled, una propiedad de los elementos HTML que impide la interacción con un botón [07:05]. Cuando un botón tiene este atributo, se muestra visualmente más transparente y no responde a clics.

¿Cómo aplicar disabled desde JavaScript?

En lugar de escribir disabled directamente en el HTML, se puede controlar dinámicamente desde JavaScript. Dentro de la función crearMensajeFinal, que solo se ejecuta cuando alguna mascota llega a cero vidas, se seleccionan los tres botones de ataque y se les asigna la propiedad disabled como true [08:15]:

javascript function crearMensajeFinal() { // lógica del mensaje de victoria o derrota

let botonFuego = document.getElementById('boton-fuego')
botonFuego.disabled = true

let botonAgua = document.getElementById('boton-agua')
botonAgua.disabled = true

let botonTierra = document.getElementById('boton-tierra')
botonTierra.disabled = true

}

Esta es la diferencia entre hacerlo en HTML y hacerlo en JavaScript: en HTML se escribe el atributo disabled directamente en la etiqueta del botón, mientras que en JavaScript se modifica la propiedad del elemento del DOM en el momento preciso que se necesita.

¿Cuál es el flujo completo del final del juego?

El flujo funciona así:

• El jugador o el enemigo llega a cero vidas.
• Se ejecuta crearMensajeFinal, que muestra el mensaje de victoria o derrota.
• Dentro de esa misma función, los tres botones de ataque se deshabilitan con disabled = true.
• El jugador ya no puede lanzar más ataques.
• Al presionar el botón de reiniciar, location.reload() recarga la página y el juego comienza desde cero.

Con estos dos mecanismos trabajando juntos, la jugabilidad queda controlada: no hay ataques después del final y siempre existe la posibilidad de una revancha. Si implementaste una solución diferente para alguno de estos problemas, comparte tu enfoque en los comentarios.