Another type of scrolling video game is one that scrolls along the Y dimension. There is a program at https://gamedev.cs.gsu.edu/~mweeks/boulder_dodge.html that is a simple game that scrolls along Y. It has a curve in the background in white, and a person. The idea is that the person is walking on a curving road, trying to get to a destination. Sometimes boulders go rolling along the road, and the player has to dodge them. If a boulder impacts the player, the screen turns red, and the game is supposed to be over. If the player makes it to the end, the screen turns green, and it says "you win!". But the game does not quite work as desired.

One problem is that the game keeps going when the boulder hits the player. Another is that the player should be able to pause the game, but this has not been implemented.

Your job is to stop everything when the boulder hits the player. Also, the user should be able to press "p" to pause the game, then any key to un-pause it.

Feel free to make improvements. For example, the player's animation is not as smooth as it could be. Or you could use a different character sprite sheet. The game was originally going to be a space game with a spaceship and asteroids. Or you could add a blaster that can blow-up the boulder.

The idea behind this assignment is to link it to the material about the user interface that we covered. With this in mind, you should let the user know when the game is paused, like with a message that appears over the game screen. Here's how you can do this with JavaScript:

function showPausedText() {
  // Draw a white rectangle
  ctx.fillStyle = "#ffffff";
  // draw a rectangle
  ctx.fillRect(100, 100, WIDTH-200, HEIGHT-200);
  ctx.fillStyle = "blue";
  ctx.font = "bold 16px Arial";
  ctx.fillText('Paused', 200, 240);
  ctx.fillText('Press any key to continue', 200, 280);
}

Turn this in through iCollege: a link to the html file, copies of any javascript files that you created, and the data files.