Solutions to "Further Challenges"

Here you will find solutions to the "Further Challenges" in the back of your booklet. Each challenge is explained below. Click the "Show Solution" button to see the code for how to solve the challenge.

Progressive Difficulty

Right now, your character runs at a steady speed. But what if you want him to run a little faster as time goes on? You know how to add to a variable, and you know that our player’s speed is a variable. So how would you add to the speed variable as time went on? Tip: runnerSpeed doesn’t need to change much for you to notice the effect. Try increasing it by very small numbers, decimals even.

This one is relatively simple, so we only need one line of code! Let's think about what we know and then we'll dive into solving the problem.

What we know
  • The variable runnerSpeed controls how quickly our character runs.
  • We can add to a variable by using the compound assignment operator.
  • We want the change to be gradual as time goes on.

Solution

We'll want to use the compound assignment opertator inside of the draw() function's if(!gameOver) section. We're going to it by a very small amount (0.01) everytime the draw function calls. The result with be a gradual speeding up. If you find that the game speeds up too quickly, you can increase it by an even smaller factor like 0.005! Play around with the number until you find a rate that you like.

Put this in your draw() function in the if(!gameOver) section.

playerScore += 0.01;

Mobile-Friendly Play

We built this game for computers with keyboards. But suppose you want to show your friends on the run? P5.js has a function call touchStarted() that works a lot like keyWentDown() but detects touchscreen touches. How would you use touchStarted() to make your game take touchscreen inputs? Find out more about the touchStarted() function at http://p5js.org/reference/#/p5/touchStarted.

This one may be a bit tricky because we're using a brand new function. Let's think about what we know about keyWentDown() and how we can apply what we know about it to using touchStarted().

What we know
  • The touchStarted() function measures if a player interacted with the game on the last execution of draw().
  • We already have a function that makes the player jump with they hit the UP_ARROW key, we just need to add a new touchStarted() function to trigger the jump on touch.
  • We'll need to detect touch under two circumstances.
    • During gameplay, when the player jumps from platform to platform.
    • At the game over screen, when the player wants to restart.

Solution

We'll define the actions we want to occur in a new touchStarted() function at the bottom of our code. We'll put the same actions as are inside of jumpDetection(). We'll also add a condition for if the game is over that resets the same things as the newGame() function. Note: According to the p5.js website, touchStarted() is a built-in function that is called automatically and watched for in draw(). This means that we don't have to call it inside of our draw() function because it's already taken care of.

Define the touchStarted() function at the bottom of your code like this.

function touchStarted(){
  runner.changeAnimation("jump");
  runner.animation.rewind();
  runner.velocity.y = -jumpPower;
  if(gameOver){
    platformsGroup.removeSprites();
    backgroundTiles.removeSprites();
    gameOver = false;
    updateSprites(true);
    runnerSpeed = 15;
    runner.position.x = 50;
    runner.position.y = 100;
    runner.velocity.x = runnerSpeed;
    currentPlatformLocation = -width;
    currentBackgroundTilePosition = -width;
    playerScore = 0;
  }
}

Jumping Sounds

Keen observers may have noticed yet another variable we haven’t addressed. The variable jumpSound holds a cute little sound for when our character jumps. You know how to play sounds. You know how to stop sounds. Where should you put the commands for playing and stopping jumpSound? Hint: We only need to hear the sound when the character jumps.

This one is pretty straight forward. Let's dive right in.

What we know
  • We can make a sound play with the name of the variable the sound is in followed by .play().
  • We can make a sound stop with the name of the variable the sound is in followed by .stop().
  • We have a functions that detect jumping and make the character jump.

Solution

We'll add playing jumpSound to the list of instructions for jumpDetection() and touchStarted(). Next, we'll add a command to stop playing jumpSound when our player hits the ground.

Add this to the top of your jumpDetection() and touchStarted() functions.

jumpSound.play();

Add this at the top of your solidGround()function.

jumpSound.stop();