How to Reset Your HTML5 Game - dummies

By Andy Harris

Of course, if your HTML5 game can stop, you need a way to restart it. The easiest way is to use a dirty trick. Because the game is in a web page, all you have to do is refresh the web page in the browser, and the game will restart.

You can cause the browser to refresh in JavaScript by setting the document.location.href property to the value “”. This will effectively reload the current page in the browser, restarting the game in the process. It’s not hard to implement this feature.

  1. Add a button to your page.

    Use an ordinary HTML button to trigger the reset. If you want, you can position the button with CSS to appear exactly where you want it to be. (Use position: absolute along with the left and top attributes to set the position of your button.)

  2. Tell the button to call the restart() function.

    Every button has an onclick attribute. Use this to determine a JavaScript function to run when the button is clicked. In this case, you call the restart() function.

  3. Build a restart() function.

    Of course, if you’re going to call a restart() function, you need to create it.

  4. Reload the current document.

    The easiest way to restart a JavaScript program is to reload the current page in the browser. This will not only reload the HTML code but also the JavaScript, starting all the code over from the beginning.

  5. Set document.location.href to nothing.

    If you set the document.location.href attribute to the empty string (“”) you will in effect reload the current page. This is the easiest way to restart the game.