Beginner Tutorials: How to build a game in Elm — Part 3

Part 3 of 12 — Add the Pause

Previous: Part 2 — Add Keyboard Support

Next: Part 4—Add the Players (coming soon)

Add the pause

This is what we are making in this part 3 of the tutorial

The Game Loop never stop also when nobody is playing the game. Some browser may put it on hold when the page is not seen (either because below some other tab or because below under other applications) but better to handle our own way to pause the game.

Doing so, we can save CPU cycles (and power consumption).

Using The Elm Architecture is very simple to unsubscribe from listening to an event because the subscription function also get the model as argument. So we can add this if condition:

if model.isPaused then
    []
else
    [ Browser.Events.onAnimationFrameDelta Frame ]

So when the flag model.isPaused that we added to the model is true, we do not subscribe to the onAnimationFrameDelta.

Now we need to set this flag. The Browser.Events.onVisibilityChange function help us here.