Reiniciar juego con location.reload

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:55

Reiniciar juego con location.reload

Curso Gratis de Programación Básica 2022

Clase 30 de 84

Clase 30 / 84

Recursos

Reiniciar un juego en JavaScript es más sencillo de lo que parece cuando conoces el método correcto. Con location.reload() puedes recargar toda la página y devolver tu Mokepon a su estado inicial, mientras que con la propiedad disabled evitas que los jugadores sigan atacando después de ganar o perder. Esta guía es para ti que estás construyendo tu primer juego con JavaScript y quieres pulir su jugabilidad.

Por qué necesitas un botón de reinicio en tu juego

Cuando tu Mokepon llega a cero vidas, aparece el mensaje de felicitaciones, ganaste o lo siento, perdiste. El problema es que los botones de ataque siguen activos, así que puedes terminar con menos tres vidas o un enemigo con menos cuatro vidas. Eso rompe la lógica del juego.

La solución se divide en dos partes claras: hacer que el botón de reiniciar recargue el juego y deshabilitar los botones de ataque cuando ya hay un ganador.

Dónde colocar la lógica del botón reiniciar

El lugar natural es la función iniciarJuego, porque ahí ya estás seleccionando el resto de botones y asignando sus event listeners. Mantener toda la lógica de eventos en un mismo sitio facilita leer y mantener tu código.

Dentro de iniciarJuego creas una variable nueva con document.getElementById apuntando al ID reiniciar que ya existe en tu archivo Mokepon.html [05:12]. Luego llamas a su método addEventListener escuchando el evento click y le pasas la función que se va a ejecutar, que en este caso se llama reiniciarJuego.

Cómo funciona location.reload en JavaScript

Aquí viene lo interesante. JavaScript te ofrece un objeto llamado location, parecido a window o document, pero que representa la ubicación o URL en la que estás. Una página como platzi.com es una ubicación, y la ruta de tu archivo HTML local también lo es.

Ese objeto tiene un método llamado reload() que recarga la página completa. Si lo ejecutas desde la consola del navegador, verás cómo el HTML vuelve a su estado inicial: vidas completas, sin mascotas seleccionadas y sin ataques registrados [07:45].

¿Qué hace location.reload en JavaScript? Recarga la página actual desde cero, igual que si presionaras F5. Devuelve tu juego a su estado inicial sin que tengas que reiniciar variables a mano.

Dentro de tu función reiniciarJuego solo necesitas escribir location.reload() y listo. Salvas, pruebas en el navegador y verás que al hacer clic en el botón de reiniciar, todo vuelve a empezar.

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

Qué pasa con los botones después de ganar o perder

El segundo problema es distinto. Aunque ya muestres el mensaje final, los botones de fuego, agua y tierra siguen activos. Necesitas desactivarlos justo cuando se decide la partida.

Cómo deshabilitar botones con el atributo disabled

HTML tiene un atributo llamado disabled que, cuando se aplica a un botón, lo vuelve transparente y bloquea el clic. Puedes ponerlo manualmente en el HTML para probarlo, pero lo que necesitas es activarlo desde JavaScript en el momento exacto.

La función crearMensajeFinal es el lugar perfecto, porque solo se llama cuando las vidas del jugador o del enemigo llegan a cero. Ahí seleccionas tus tres botones de ataque y modificas su propiedad disabled poniéndola en true.

javascript botonFuego.disabled = true botonAgua.disabled = true botonTierra.disabled = true

Esto equivale a escribir el atributo disabled directamente en el HTML, pero hecho de forma dinámica desde tu código.

¿Cuál es la diferencia entre disabled en HTML y en JavaScript? En HTML lo escribes como atributo estático en la etiqueta del botón. En JavaScript accedes a la propiedad .disabled del elemento y le asignas true o false según lo necesites en tiempo real.

Por qué separar la lógica de reiniciar y deshabilitar

Son dos responsabilidades distintas. Reiniciar pertenece al ciclo de vida general del juego y vive en iniciarJuego. Deshabilitar pertenece al cierre de una partida y vive en crearMensajeFinal. Mantenerlas separadas hace que tu código sea más predecible y fácil de modificar.

Qué herramientas y conceptos clave usaste en esta clase

Estos son los conceptos que aplicaste para terminar la jugabilidad de tu Mokepon.

document.getElementById: selecciona el botón de reiniciar usando el ID que definiste en el HTML [04:50].
addEventListener con evento click: conecta el botón con la función reiniciarJuego para que se ejecute al hacer clic [05:30].
location.reload(): método del objeto location que recarga la página completa y devuelve el juego a su estado inicial [07:20].
Propiedad disabled en JavaScript: bloquea la interacción del usuario con un botón asignando true [10:15].
Función crearMensajeFinal: contiene la lógica de fin de partida y es el lugar correcto para deshabilitar los botones de ataque [11:00].

Después de salvar y probar, verás que ya no puedes lanzar más ataques cuando alguna mascota llega a cero vidas, y que el botón de reiniciar te permite empezar una revancha sin recargar manualmente la página.

¿En qué otra parte de tu juego usarías location.reload() o el atributo disabled para mejorar la experiencia? Cuéntanos en los comentarios cómo lo resolviste tú.