Building an Infinite Runner in P5.js

Welcome to IT Girls!

Are you interested in computer programming, web development, game development, or just making fun things? Have you done a bit of programming with Scratch, Snap!, or Blocky and want to transition into a typed programming experience? This class is designed to help you do just that! Don’t worry if this is your first time programming! This is a beginner-friendly exercise that will get you up and programming right away!

You Will Learn

  • Basic JavaScript syntax and structure
  • How to manipulate game sprites
  • How to draw on the HTML canvas
  • How to use JavaScript libraries to make programming easier

To get started, you can click here to get the booklet for this workshop. You can download and print it or view it online. Follow along to build an infinite runner game in JavaScript! Want to see what you’ll be making? Click here to play the game!

Download the Instruction Booklet

 Book Cover

Game Art and Media

Here you will find all of the artwork, sounds, and music referenced in the booklet. You can just copy and paste the necessary code into your preload() function. If you ever feel like changing the theme of your game, just replace the code in the preload() function with your new choice.

Runner Characters

Robot

Little Girl

Red Ninja

Robot

Put this into your preload() function to select the Robot as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/jump09.png'    
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/robot/run07.png'   
);

Little Girl

Put this into your preload() function to select the Little Girl as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/littleGirl/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/littleGirl/jump01.png' 
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/littleGirl/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/littleGirl/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/littleGirl/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/littleGirl/run03.png'
);

Red Ninja

Put this into your preload() function to select the Red Ninja as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/jump09.png'    
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/redNinja/run09.png'    
);

Purple Ninja

Kitty

Puppy

Purple Ninja

Put this into your preload() function to select the Purple Ninja as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/jump09.png'    
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/purpleNinja/run09.png'    
);

Kitty

Put this into your preload() function to select the Kitty as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/jump01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/jump02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/jump03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/jump05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/jump06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/jump07.png'   
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/kitty/run07.png'  
);

Puppy

Put this into your preload() function to select the Puppy as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/jump07.png'   
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/puppy/run07.png'  
);

Adventure Woman

Adventure Man

Leprechaun

Adventure Woman

Put this into your preload() function to select the Adventure Woman as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/jump09.png'    
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureWoman/run07.png'   
);

Adventure Man

Put this into your preload() function to select the Adventure Man as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/jump09.png'    
);
runningAnimation = loadAnimation( 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run03.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/Run04.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run05.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run06.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run07.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run08.png',     
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/adventureMan/run09.png'    
);

Leprechaun

Put this into your preload() function to select the Leprechaun as your character.


jumpingAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/leprechaun/jump00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/leprechaun/jump01.png' 
);
runningAnimation = loadAnimation(
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/leprechaun/run00.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/leprechaun/run01.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/leprechaun/run02.png', 
  'https://la-wit.github.io/build-an-infinite-runner/build/images/sprites/leprechaun/run03.png'
);

Environment Art

background-image

Mountain Scene

background-image

Industrial Scene

background-image

Desert Scene

Mountain Scene

Put this into your preload() function to select the Mountain Scene.


gameBackground = loadImage('https://la-wit.github.io/build-an-infinite-runner/build/images/environments/defaultBackground.png');
platformBackground = loadImage('https://la-wit.github.io/build-an-infinite-runner/build/images/environments/defaultPlatform.png');
gameFont = loadFont('https://la-wit.github.io/build-an-infinite-runner/build/fonts/ARCADE_R.TTF');
gameMusic = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/generic-game-loop-4.mp3');
gameOverMusic = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/over.mp3');
jumpSound = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/jump07.mp3');

Desert Scene

Put this into your preload() function to select the Desert Scene.


gameBackground = loadImage('https://la-wit.github.io/build-an-infinite-runner/build/images/environments/desertBackground.png');
platformBackground = loadImage('https://la-wit.github.io/build-an-infinite-runner/build/images/environments/desertPlatform.png');
gameFont = loadFont('https://la-wit.github.io/build-an-infinite-runner/build/fonts/ARCADE_R.TTF');
gameMusic = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/generic-game-loop-4.mp3');
gameOverMusic = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/over.mp3');
jumpSound = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/jump07.mp3');

Industrial Scene

Put this into your preload() function to select the Industrial Scene.


gameBackground = loadImage('https://la-wit.github.io/build-an-infinite-runner/build/images/environments/industrialBackground.png');
platformBackground = loadImage('https://la-wit.github.io/build-an-infinite-runner/build/images/environments/industrialPlatform.png');
gameFont = loadFont('https://la-wit.github.io/build-an-infinite-runner/build/fonts/ARCADE_R.TTF');
gameMusic = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/generic-game-loop-4.mp3');
gameOverMusic = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/over.mp3');
jumpSound = loadSound('https://la-wit.github.io/build-an-infinite-runner/build/sounds/jump07.mp3');

Code Snippets

In this section, you'll find code snippets to make following the lesson easier. Just copy the text you need and paste into your code.

Setting Up Our P5.js Environment


Add this to your index.html file.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>IT Girls 2018</title>

  <script type="text/javascript" src="https://la-wit.github.io/build-an-infinite-runner/build/js/lib/p5.js"></script>
  <script type="text/javascript" src="https://la-wit.github.io/build-an-infinite-runner/build/js/lib/p5.play.js"></script>
  <script type="text/javascript" src="https://la-wit.github.io/build-an-infinite-runner/build/js/lib/p5.sound.js"></script>
</head>
<body>
  <script>
  
    function setup(){
      createCanvas(840,390);
      background(200, 200, 200);
    }
    function draw(){

    }
    
  </script>
  </body>
</html>

Introduction to P5.js


Setting Up Our P5.js Structure

Put this in the <script> tag of your index.html file..


function setup(){

}
function draw(){

}
// We'll define our own functions below here.

Creating the Canvas

Put this in your setup() function.


createCanvas(840,390);
background(200, 200, 200);

Drawing a Circle

Put this in your draw() function.


ellipse(100,200,30,30);

Giving the Circle Color

Put this in your draw() function.


fill(23,55,100);

Follow The Cursor

Replace the ellipse function with this in your draw() function.


ellipse(mouseX,mouseY,30,30);

Automatic Movement

Declare this variable at the top of your code


var circlePosition;

Put this in your setup() function.


circlePosition = 100;

Replace the ellipse() function with this in your draw() function.


ellipse(circlePosition, 200,30,30);

Put this in your draw() function.


circlePosition = circlePosition + 1;

Put this in your draw() function.


background(200,200,200);

Using P5.play to Code Your Game

Clear out both your setup() and draw() functions and delete your circlePosition variable when you start this section.


Follow The Cursor

Declare this variable at the top of your code


var runner;

Put this in your setup() function.


createCanvas(840,390);
runner = createSprite(50,100,25,40);
runner.depth = 4;

Put this in your draw() function.


background(200);
drawSprites();

The Preload Function

Add this function before the draw()


function preload(){

}

Adding Images and Animations

Declare these variables at the top of your code


var runningAnimation;
var jumpingAnimation;
var gameBackground;
var platformBackground;
var gameFont;
var gameMusic;
var gameOverMusic;
var jumpSound;

Put this in your setup() function.


runner.addAnimation('jump', jumpingAnimation);
runner.addAnimation('run', runningAnimation);
runner.setCollider("rectangle", 0,0,10,41);

Conditional Statements

Replace the code in your draw() function with this.


if(!gameOver){
    background(200);
    drawSprites();
  }

  if(gameOver){

  }

Is the Game Over?

Declare and assign this variable at the top of your code


var gameOver = false;

Making Our Own Functions


Adding the Platforms Group

Declare this variable at the top of your code


var platformsGroup;

Put this in your setup() function.


platformsGroup = new Group;

Adding Platforms to the Game

Declare this variable at the top of your code


var currentPlatformLocation = -width;

Declare this function at the bottom of your code


function addNewPlatforms(){
  if(platformsGroup.length < 5){
    var currentPlatformLength = 1132;
    var platform = createSprite((currentPlatformLocation * 1.3), random(300,400), 1132, 336);
    platform.collide(runner);
    currentPlatformLocation += currentPlatformLength;
    platform.addAnimation('default', platformBackground);
    platform.depth = 3;
    platformsGroup.add(platform);
  }
}

Put this in your draw() function.


addNewPlatforms();

Adding Physics

Declare this variable at the top of your code


var gravity = 1;

Put this in your draw() function.


runner.velocity.y += gravity;

Collision Detection

Put this in your draw() function.


runner.collide(platformsGroup, solidGround);

Declare this function at the bottom of your code


function solidGround(){
  runner.velocity.y = 0;
  runner.changeAnimation("run");
  if(runner.touching.right){
    runner.velocity.x = 0;
    runner.velocity.y+= 30;
  }
}

Jumping

Declare and assign this variable at the top of your code


var jumpPower = 15;

Put this in your draw() function.


jumpDetection();

Declare this function at the bottom of your code


function jumpDetection(){
  if(keyWentDown(UP_ARROW)){
    runner.changeAnimation("jump");
    runner.animation.rewind();
    runner.velocity.y = -jumpPower;
  }
}

Running

Declare and assign this variable at the top of your code


var runnerSpeed = 15;

Put this in your draw() function.


runner.velocity.x = runnerSpeed;

The Virtual Camera

Put this in your draw() function.


camera.position.x = runner.position.x + 300;

Garbage Collection

Put this in your draw() function.


removeOldPlatforms();

Declare this function at the bottom of your code


function removeOldPlatforms(){
  for(var i = 0; i < platformsGroup.length; i++){
      if((platformsGroup[i].position.x) < runner.position.x-width){
        platformsGroup[i].remove();
    }
  }
}

Background Art

Declare these variables at the top of your code


var currentBackgroundTilePosition;
var backgroundTiles;

Put this in your setup() function.


currentBackgroundTilePosition = -width;
backgroundTiles = new Group;

Put this in your draw() function.


addNewBackgroundTiles();
removeOldBackgroundTiles();

Declare these functions at the bottom of your code


function addNewBackgroundTiles(){
  if(backgroundTiles.length < 3){
    currentBackgroundTilePosition += 839;
    var bgLoop = createSprite(currentBackgroundTilePosition, height/2, 840, 390);
    bgLoop.addAnimation('bg', gameBackground);
    bgLoop.depth = 1;
    backgroundTiles.add(bgLoop);
  }
}

function removeOldBackgroundTiles(){
  for(var i = 0; i < backgroundTiles.length; i++){
      if((backgroundTiles[i].position.x) < runner.position.x-width){
        backgroundTiles[i].remove();
    }
  }
}

Adding a Lose Condition


Checking for Falls

Put this in your draw() function.


fallCheck();

Declare this function at the bottom of your code


function fallCheck(){
  if(runner.position.y > height){
      gameOver = true;
    }
}

Adding Game Over Text

Put this in your draw() function.


gameOverText();
updateSprites(false);

Declare this function at the bottom of your code


function gameOverText(){
    background(0,0,0,10);
    fill('white');
    stroke('black')
    textAlign(CENTER);
    textFont(gameFont);

    strokeWeight(2);
    textSize(90);
    strokeWeight(10);
    text("GAME OVER", camera.position.x, camera.position.y);

    textSize(15);
    text("Jump to try again", camera.position.x, camera.position.y + 100);
}

Restarting the Game

Put this in your draw() function.


if(keyWentDown(UP_ARROW)){
  newGame();
}

Declare this function at the bottom of your code


function newGame(){
  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;
}

Adding the Finishing Touches

Point Counter

Declare this variable at the top of your code


var playerScore = 0;

Put this in your draw() function.


updateScore();

*Be sure to put this function after the drawSprites() function or the code won't work.

Declare this function at the bottom of your code


function updateScore(){
  if(frameCount % 60 === 0){
    playerScore++;
  }
  fill('white');
  textFont(gameFont);
  strokeWeight(2);
  stroke('black');
  textSize(20);
  textAlign(CENTER);
  text(playerScore, camera.position.x + 350, camera.position.y + 160);
}

Updating Previous Functions

Put this at the bottom of your gameOverText() function.


textSize(20);
text("You ran " + playerScore + ' yards!', camera.position.x, camera.position.y + 50);

Put this in your newGame() function.


playerScore = 0;

Adding Sound

Put this in your setup() function.


gameMusic.play();

Put this in your fallCheck() function.


gameMusic.stop();
gameOverMusic.play();

Put this in your newGame() function.


gameOverMusic.stop();
gameMusic.play();

Custom Loading Screen

Put this in your HTML section of your Codepen Window.


<div id="p5_loading" class='loading-screen'><p>LOADING</p></div>

Styling Your Webpage

Put this in your CSS section of your Codepen Window.


body {
  background: #777;
  background: url('https://la-wit.github.io/build-an-infinite-runner/build/images/bg.png') repeat;
}
canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.loading-screen {
  background: black;
  min-width: 840px;
  min-height: 390px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  align-text: center;
}
.loading-screen p {
  -webkit-animation: pulse 1s linear 2s infinite alternate;
          animation: pulse 1s linear 2s infinite alternate;
}
@-webkit-keyframes pulse {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Resources List

Here you will find a list of resources for further study

Click the links below to get to the resources

Contact Keisha

You can email Keisha at ksp@keishasperkins.com