What are we going to cover?

• Creating an Object that represents a player that can move around with the keyboard
• Create Objects that represent Obstacles that prevent the Player from moving
• Create Rewards that the player can collect
• Play a Sound when a reward is captured

Review Session

output.mp4

Note that the following is the final code from the review session, it covers the same concepts, but it differs slightly from the following code in the examples below which was done at an earlier time:

https://editor.p5js.org/des8963/sketches/YtrHfJEN8

Step 1 - Create an Object that represents a Player

• Create a Class for Player
• Class should Draw
• Class should check if it should move when keyboard is pressed
• Movement should make sure we do not move where we shouldn’t

class Player {
  constructor(aColor) {
    this.x=width/2;
    this.y=15;
    this.d=25;
    this.c=aColor;
  }
  draw() {
    fill(this.c);
    ellipse(this.x,this.y,this.d);
  }

  move(x,y) {
    let oldx=this.x;
    let oldy=this.y;
    let stayInPlace=false;
    
    this.x+=x;
    this.y+=y;
    if ((this.x <= 0) || (this.y <= 0) || (this.x >= width) || (this.y >= height)) {
      stayInPlace=true;
    }

    if (stayInPlace) {
      this.x=oldx;
      this.y=oldy;
    }
  }
  update() {
    if (keyIsDown(LEFT_ARROW)) {
      this.move(-2,0);
    }
    if (keyIsDown(RIGHT_ARROW)) {
      this.move(2,0);
    }
    if (keyIsDown(DOWN_ARROW)) {
      this.move(0,2);
    }
    if (keyIsDown(UP_ARROW)) {
      this.move(0,-2);
    }
  }
}

// Inside Setup
function Setup() {

// ---- this is the code you add to setup for creating a Player
		p=new Player(color(100,0,0));
}

function draw() {

	// This is the code we add to update players position and redraw

  p.update();
  p.draw();
}

Step 2 - Create an Object that represents an Obstacle

Create

Dealing with Collisions

Since all of our objects are going to be circles, we can tell if one circle collides into another if the distance between two circles is smaller than the sum of their radii.

i.e. Circles overlap if distance between two center points is less than r1+r2

let palette=
["#1c110a","#e4d6a7","#e9b44c","#9b2915","#50a2a7"];

let player;
let obstacles=[];

class Obstacle{
  constructor(x,y) {
    this.xpos=x;
    this.ypos=y;
    this.r=20;
  }
  draw() {
    fill(palette[3]);
    circle(this.xpos,this.ypos,this.r*2);
  }
}

class Player{
  constructor(x,y) {
    this.xpos=x;
    this.ypos=y;
    this.r=10;
  }
  isColliding(anObject) {
    let d=dist(this.xpos,this.ypos,anObject.xpos,anObject.ypos);
    return (this.r+anObject.r>=d);
  }
	// Note the following was the code that I used in the Review Session
	// If you attended the review, you may have noticed I had a bug where
	// once the player collided, it would stay collided. No way to move
  moveERROR(x,y) {
    // if player is overlapping an obstacle, don't move...
		//  BUT NOTE THIS IS A PROBLEM. THE PLAYER NEVER MOVES
		//  SEE move(x,y) function below for fix
    for (let i=0; i<obstacles.length;i++) {
      if (this.isColliding(obstacles[i])) {
        return;
      }
    }
    this.xpos+=x;
    if (this.xpos>width) {
      this.xpos=0;
    }
    this.ypos+=y;
    if (this.ypos>height) {
      this.ypos=0;
    }
  }
  
  move(x,y) {
		// we remember the position before we move
		// we only move if there is no collision and if we are still on the canvas
    let oldx=this.xpos;
    let oldy=this.ypos;
    let stayInPlace=false;
    
    this.xpos+=x;
    this.ypos+=y;
    
    if ((this.xpos <= 0) || (this.ypos <= 0) || (this.xpos >= width) || (this.ypos >= height)) {
      stayInPlace=true;
    }
    for (let i=0; i<obstacles.length;i++) {
      if (this.isColliding(obstacles[i])) {
        stayInPlace=true;
      }
    }
		// if there was a collision or we move off canvas, bring back old position
    if (stayInPlace) {
      this.xpos=oldx;
      this.ypos=oldy;
    }
  }
  

  update() {
    if (keyIsDown(RIGHT_ARROW)) {
      this.move(3,0);
    } else if (keyIsDown(DOWN_ARROW)) {
      this.move(0,3);
    } else if (keyIsDown(UP_ARROW)) {
      this.move(0,-3);      
    } else if (keyIsDown(LEFT_ARROW)) {
      this.move(-3,0);      
    } 
  }
  draw() {
    fill(palette[2]);
    circle(this.xpos,this.ypos,this.r*2);
  }
}

function setup() {
  createCanvas(400, 400);
  print("About to initialize player")
  player = new Player(300,200);
  for (let i=0; i<20;i++) {
    let obstacle=new Obstacle(random(400),random(400));
    // THE FOLLOWING WAS ADDED AFTER THE REVIEW SESSION
    // note we do not want to add any obstacles that are currently colliding with Player
    if (!player.isColliding(obstacle)) {
      obstacles.push(new Obstacle(random(400),random(400)));
    }
  }
}

function draw() {
  background(palette[4]);
  player.update();
  player.draw();
  for (let i=0; i<obstacles.length;i++) {
    obstacles[i].draw();
  }
}

See the code: https://editor.p5js.org/des8963/sketches/GrD-1lV3I