Cookie Clicker con HTML+CSS+Javascript (parte 4): Reiniciando el progreso del juego

En esta parte aprenderemos a reiniciar el progreso del juego. Esto permitirá que el jugador borre todo su progreso y comience desde cero si lo desea. Este enfoque enseña cómo manipular el almacenamiento local del navegador y cómo interactuar con el usuario mediante ventanas de confirmación.

Modificar el archivo «index.html»

Vamos a agregar un botón en la página que le dará al jugador la opción de reiniciar su juego. Cuando el jugador haga clic en el botón, se ejecutará la función reiniciarJuego():

...
</body>
    ...

    <div>
        <button onclick="reiniciarJuego()">Reiniciar el juego</button>
    </div>

    ...
</body>
</html>

Modificar el archivo «script.js»

Añadiremos una nueva función JavaScript que agrupará el código que se debe ejecutar cuando el usuario desee reiniciar el juego:

• Función reiniciarJuego(): Esta función se ejecuta cuando el jugador hace clic en el botón de reiniciar. Primero, se le pregunta al jugador si realmente quiere reiniciar (usando confirm()). Si el jugador acepta, la función borra el progreso guardado en localStorage y recarga la página:

...

// Función para reiniciar el juego
function reiniciarJuego() {
    // Pregunta al usuario si realmente quiere reiniciar, y si dice que sí, borra el progreso y reinicia la página
    if (confirm("¿Estás seguro de borrar todo el progreso? (Esto no se puede deshacer)")) {
        localStorage.removeItem('juego');  // Elimina el progreso guardado
        location.reload();  // Recarga la página
    }
}