Implementing the Space Mode feature

The T-Rex Runner game is sprite-based. Changing the sprite image alters the game's characters and graphics. Here you will learn how to make this change.

The HTML for the game's web page is stored in index.html. In that HTML code, there's a section which loads the graphic and audio resources:

<div id="resources">
  <img id="resources-1x" src="images/100-percent/100-sprite.png" />
  <img id="resources-2x" src="images/200-percent/200-sprite.png" />
  <div id="audio-resources">
    <audio id="sound-press" src="sounds/button-press.mp3"></audio>
    <audio id="sound-hit" src="sounds/hit.mp3"></audio>
    <audio id="sound-reached" src="sounds/score-reached.mp3"></audio>
  </div>
</div>

There are two sprite images:

• The image that starts with 100- is for regular displays
• The image that starts with 200- is for high-resolution displays

What you need to change

Your Space Mode sprites are:

• ./images/100-percent/100-sprite-space.png: regular displays
• ./images/200-percent/200-sprite-space.png: high-resolution displays

Without feature flags, you would change the src attribute in the resources-1x and resources-2x divs to the *00-sprite-space.png files, and this change would be visible to all users all at once.

<img id="resources-1x" src="/images/100-percent/100-sprite-space.png" />
<img id="resources-2x" src="/images/200-percent/200-sprite-space.png" />

If you want to go back to the dinosaur graphics, you have to edit the code again. What if you want to switch between the two modes without having to change the code each time?

This is what feature flags are for: changing what code does without changing the code itself.

Implementing the feature flag requires some initial code changes.