Here’s the full code block for your Endless Runner – with a few of the Super Skills to get you started.
This piece of code will increase the speed of the game to make it more difficult for the player. Use an if statement to work out when three tiles have passed and, if the game is not yet at a maxSpeed, use the increment operator to speed up the game. Then use new <canvas> APIs to display the player’s speed and how far they have travelled through the game.
This piece of code will make sure that the player is able to jump on to all of the platforms. In the addFutureTiles function, you need to add a biggestJumpableHeight variable that uses an if statement to make sure that the new title generated can only be as tall as the player’s maximum jump height.
This piece of code will let the user control the player to make them jump. You will need to use an eventListener to record when a key is pressed, and set downwardForce to allow the player to jump. To make the player fall back down again, you will need to use an if statement so that when the player reaches the maximum jump height, they fall back to the ground.
Click in the Result preview below to control the player.
This piece of code will add collision detection to the platforms, so that when the player misses a jump and crashes into the edge of a platform the game stops. To do this, you will need to use an if statement and add a stop function. You will also need to fix a bug that allows the player to pass through the platforms by working out when the right-hand side of the player has collided with a platform.
Code a processGravity function to make the player fall to the floor below. Use an if statement to make sure the player does not fall below the top of the platform.
This piece of code will work out the position of the player in the world and how far away they are from the nearest platform. By creating a GetDistanceToFloor function, you can work out which platform is below the right-hand corner of the player and how high that platform is. The applyGravity function will work out how far the player needs to fall to land on the platform.
Use an object literal to create the player and give their location in the world and their size. Use the draw function to draw them on-screen as a green square.
You will use procedural generation in this piece of code to create new tiles. You will need to use Math.floor and Math.random to create a random height for each new tile. By using the new operator with the floor function, you can add new tiles to the screen. Using a loop with the function clearOldTiles will stop too many tiles clogging up the browser’s memory.