5

I've been working with p5.js a bit, and I've figured out how to get an object to detect collisions, but I'm quite confused on how to handle those collisions. I try setting the player velocity to 0, but then the player gets stuck. I've also tried separated the collisions to each side, but that doesn't work either.

Here is my player constructor with the collision functions:

class Player {

    constructor() {
        this.w = 50;
        this.h = 125;
        this.pos = createVector(0, 0);
        this.vel = createVector();
        this.acc = acceleration;
        this.grav = gravity;
    }

    update() {
      this.vel.y += this.grav;
      this.pos.y += this.vel.y;

      this.vel.x += this.acc;

      this.pos.y = constrain(this.pos.y, 0, canvasHeight - this.h);
      this.pos.x = constrain(this.pos.x, 0, canvasWidth - this.w);
      image(playerImg, this.pos.x, this.pos.y, this.w, this.h);
    }

    run() {
      this.update();
    } 

    isOnFloor() {
      return(this.pos.y >= canvasHeight - this.h);
    }

    collides(x, y, w, h) {
      if (this.pos.x >= x - this.w && this.pos.x <= x+w && 
      this.pos.y >= y - this.h && this.pos.y <= y+h) {
        return true;
      } else {
        return false;
      }
    }
    collidesY(y, h) {
      if (this.pos.y >= y - this.h && this.pos.y <= y+h) {
        return true;
      } else {
        return false;
      }
    }
    collidesX(x, w) {
      if (this.pos.x >= x - this.w && this.pos.x <= x+w) {
        return true;
      } else {
        return false;
      }
    }
    collidesXL(x) { //X axis Left
      if (this.pos.x >= x - this.w) {
        return true;
      } else {
        return false;
      }
    }
    collidesXR(x, w) { //X axis Right
      if (this.pos.x <= x+w) {
        return true;
      } else {
        return false;
      }
    }
    collidesYT(y, h) { //Y axis Top
      if (this.pos.y <= y+h) {
        return true;
      } else {
        return false;
      }
    }
    collidesYB(y) { //Y axis Bottom
      if (this.pos.y >= y - this.h) {
        return true;
      } else {
        return false;
      }
    }
    
}

As you can see, I've created many functions trying to get collision handling working. Here is my main code, with the collision handling on line 62. Line 54 shows code I've commented out because it didn't work.

var canvasWidth = window.innerWidth
var canvasHeight = window.innerHeight

let player;
var playerImg;

let platform;

let speed = 5;
let acceleration = 0.075;
let jumpForce = -10;
let gravity = 0.25;

let velocityDebug = false; //keep this off because of lag

function setup() {
  createCanvas(canvasWidth, canvasHeight)

  player = new Player()
  block = new Block(canvasWidth / 3, canvasHeight / 1.2, 200, 25)

}

function preload() {
  playerImg = loadImage(palyerImageData);
}

function draw() {

  background(50, 200, 255)

  player.run();
  block.display();

  if (keyIsPressed && keyCode === UP_ARROW && player.isOnFloor()) {
    player.vel.y = jumpForce;
  } else if (keyIsPressed && keyCode === RIGHT_ARROW) {
    player.pos.x += player.vel.x;
  } else if (keyIsPressed && keyCode === LEFT_ARROW) {
    player.pos.x -= player.vel.x;
  } else {
    player.vel.x = speed;
  }

  function keyReleased() {
    player.vel.x = speed;
  }

  /*if (player.collides(block.x, block.y, block.w, block.h)) {
      player.vel.y = 0;
      player.vel.x = 0;
      player.grav = 0;
    } else {
      player.grav = gravity;
    }*/

  if (player.collides(block.x, block.y, block.w, block.h)) {

    if (player.collidesXL(block.x)) {

    }
    if (player.collidesXR(block.x, block.w)) {

    }
    if (player.collidesYT(block.y, block.h)) {

    }
    if (player.collidesYB(block.y)) {

    }
  } else {
    player.acc = acceleration;
    player.grav = gravity;
  }

  if (velocityDebug) {
    console.log("Y Vel: " + player.vel.y)
    console.log("X Vel:" + player.vel.x)
  }

}


// Player class (same as above)
class Player {
  constructor() {
    this.w = 50;
    this.h = 125;
    this.pos = createVector(0, 0);
    this.vel = createVector();
    this.acc = acceleration;
    this.grav = gravity;
  }

  update() {
    this.vel.y += this.grav;
    this.pos.y += this.vel.y;

    this.vel.x += this.acc;

    this.pos.y = constrain(this.pos.y, 0, canvasHeight - this.h);
    this.pos.x = constrain(this.pos.x, 0, canvasWidth - this.w);
    image(playerImg, this.pos.x, this.pos.y, this.w, this.h);
  }

  run() {
    this.update();
  }

  isOnFloor() {
    return (this.pos.y >= canvasHeight - this.h);
  }

  collides(x, y, w, h) {
    if (this.pos.x >= x - this.w && this.pos.x <= x + w &&
      this.pos.y >= y - this.h && this.pos.y <= y + h) {
      return true;
    } else {
      return false;
    }
  }
  collidesY(y, h) {
    if (this.pos.y >= y - this.h && this.pos.y <= y + h) {
      return true;
    } else {
      return false;
    }
  }
  collidesX(x, w) {
    if (this.pos.x >= x - this.w && this.pos.x <= x + w) {
      return true;
    } else {
      return false;
    }
  }
  collidesXL(x) { //X axis Left
    if (this.pos.x >= x - this.w) {
      return true;
    } else {
      return false;
    }
  }
  collidesXR(x, w) { //X axis Right
    if (this.pos.x <= x + w) {
      return true;
    } else {
      return false;
    }
  }
  collidesYT(y, h) { //Y axis Top
    if (this.pos.y <= y + h) {
      return true;
    } else {
      return false;
    }
  }
  collidesYB(y) { //Y axis Bottom
    if (this.pos.y >= y - this.h) {
      return true;
    } else {
      return false;
    }
  }
}

class Block {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color(225, 225, 255)
  }
  display() {
    fill(this.color)
    rect(this.x, this.y, this.w, this.h)
  }
}

const palyerImageData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAA0CAYAAACO0MgGAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABagAwAEAAAAAQAAADQAAAAAVBoiPQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABKVJREFUWAnNl0usXlMUx2+13k1VS6US10A0EpGIx0AnEkFC0KAe1Wpuq+mVOxYGRuIxkCYkBDEyqIFHpQyIICZK4lVK00gkEgaox0BKlVv1+52z/6fne3+fkZX8zt577b3XXnudtfd3vgVTvXIsqr+Leg3ltbACjim6ecpv4WXYVXTtOZVqQelIkQEXo9gGP8FO2AO/gsbPgEvhRjgAc/AjHAd/QY9oVNkAX8IVNkbIXfTvBRdSNN4hUdyA9nM4ufSqXwh62mZR0VNMXQT74FwbiH2VpLKclkbPqtVTJ5ZyWLG4dBqWd7oHxtvH6bivdJ7QPWhIO2NfYMy6Mi7OVlt/C+XK0tH9Uou6b3F80V5F+VKpLzJuinH6Gb63MaEkNT9g3lJYAvMxfCYNDSuTeOv4f8ocU+8gVLuOYY054L9KnNFGZTOG96NYVqwemdB6nDLWZpK2auuUnixPVIxTHVtysC5kxiH4BRbqsR3G9ztYC0pSsG4Nf3qAlC3wZlUr7ykrnoNyN+TUTXJAVjPvfcgiiXnj4VY634OIya/37szB4mTjmV15Ur0vLgOlORx186jiXhQfgTEbJV6rXljXlYHZfc+8rOYdrOfPgRfTNOitXq4Cb8BX4Q04H5QOo00s6r5qssY9TfZp4GpYDBfAH/AV/AYvQl6WRnMCqQ6WeJ4Rc1TMbw27QFvywtq6yqsORavhtv1FuA02grF0wUvgJjBfx/aUsZUkXmfT+hrMjofBsKyH10ExW3J6K0Ue/ZSJsWN2wD3wJ6woPE/5O9wP3g3dYUPVu5oLOVjZCa+U0rbxzcu+g/rNcDkYruyQai3dHru6hh8CvXwE8gvhS9KIYgbMwJNgxtju8Lxt2NPkRD25Em4HJV7WrfrpsffiegpMO8WsaeylYgYcglXwIPjWFfXzVa1ewMmKu3EHT4PZ8QAcho6QZAsO/Az0VnEHisYVvbulqtVG45SqjyHzqvF2upLyGmyHt8FOd6DEy+667yKLzlB/DE4Bw1ndx058FNzSNnAHeUlUGzHW7UXscJzXq4fnCfATQDmix3fCatgISvfkWtsZ4+gsD4KePws/gAepStlPqZj8SrZWt+pnXsgzNP3iUXwfbWlnzod0XOO2Ta/9oIF+IUBdSXtydCndpbbMICOww1B8AypN8mHSL8bt8RrVjtfqrIbdVnKV6lAZFP9M0o72drXTLZ2DylEeZ57pW6VbFIPKtpft+qDx6g/r8bgyrseVvf+N4XF3d/SaGzIj+evdkZQcGetRobA/hqep57Or3wkd4ltvVwzM0uUfn3dhZRmWa7U0xy9yR8wx5ZMy7XrKfXB6aU9sPJ7ejQG/47KI9vx18Zo8zQYylnHjmYGz1DWaRdSnby31L2A5KNHXrT7PDNhKn9tPu+1xdP5MaXwZKNHXrdYznm1B5x2dgdG3hjZ9t6LU+KmlM3OasVFsRqOn+ZaIvhnYqqTPz4Q9sLT0Rd8Y2USHnk6Sq3FgHfNMR39Mlcb4DA1/+k8CpR3TWjP4GSPrGaLxJRlqSu0GP5WUfjGtewY/Y3wDQzQ+7U+Jn0tr4AC4Nb9yJhXvEXe5Hbzoz/sX+27EJnwBpM8AAAAASUVORK5CYII=";
body, html {
margin: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

I've been working on this for weeks now, and I've done a ton of tests, but nothing works. I can't seem to stop the player from falling through the platform without changing the player velocity to 0, which of course, makes the player unable to move. Please help. What should I do to fix this?

Here is the full code on replit, along with a demo that you can try:

Code: https://replit.com/@STCollier/Player-Movement-Script?v=1 Demo: https://player-movement-script.stcollier.repl.co/

Thank you so much!

2 Answers 2

2

This is a bit complicated, and I wouldn't be surprised at all if there is a better solution (both in terms of elegance and performance). It seems like you need to consider a couple of difference collision scenarios.

Collision Diagram

In the green cases life is simple, one edge of the player has collided with one edge of the block. Checking for this involves confirming that that edge of the player is overlapping the block and either both of the corners of the player are inside or both of the corners are outside of the block. These cases are green in the diagram. In these cases you can simply constrain the X position for the horizontal collisions and the Y position for vertical collisions.

The complicated cases is when the player collides with the block on the corners. In this case you need to figure out whether the collision would have happened first on the sides or the top/bottom. This can be done by using the horizontal distance between the two corners, multiplied by the slope, and the comparing the resulting position against the respective corner of the block.

Corner Collision Diagram

In this example because the bottom right corner of the player, when offset in the direction of motion to the point of collision is below the top left corner of the block, the players horizontal position should be constrained (i.e. they ran into the side of the block not the top).

Here is example code (slowed down and with highlights to make it easier to see what is happening):

var canvasWidth = window.innerWidth
var canvasHeight = window.innerHeight

let player;
var playerImg;

let platform;

let speed = 5;
let acceleration = 0.075;
let jumpForce = -10;
let gravity = 0.25;

function setup() {
  createCanvas(canvasWidth, canvasHeight)

  player = new Player()
  block = new Block(canvasWidth / 3, canvasHeight / 1.2, 200, 25)
  frameRate(15);
}

function preload() {
  playerImg = loadImage(palyerImageData);
}

let first = true;
function draw() {
  background(50, 200, 255, 20)
 
  let initX = player.pos.x;
  let initY = player.pos.y;
 
  player.update();
  block.display();

  if (keyIsPressed && keyCode === UP_ARROW && player.isOnFloor()) {
    player.vel.y = jumpForce;
  } else if (keyIsPressed && keyCode === RIGHT_ARROW) {
    player.pos.x += player.vel.x;
  } else if (keyIsPressed && keyCode === LEFT_ARROW) {
    player.pos.x -= player.vel.x;
  } else {
    player.vel.x = speed;
  }
  
  // Calculate the direction of movement so we no what edges to detect collisions with.
  let deltaX = player.pos.x - initX;
  let deltaY = player.pos.y - initY;
  
  // This doesn't do anything here. It would need to be declared globally
  /*
  function keyReleased() {
    player.vel.x = speed;
  } */

  if (player.collides(block.x, block.y, block.w, block.h)) {
    let dir = '';
    if (deltaY < 0) dir += 'N';
    else if (deltaY > 0) dir += 'S';

    if (deltaX < 0) dir += 'W';
    else if (deltaX > 0) dir += 'E';

    let tr = block.inside(player.pos.x + player.w, player.pos.y);
    let br = block.inside(player.pos.x + player.w, player.pos.y + player.h);
    let tl = block.inside(player.pos.x, player.pos.y);
    let bl = block.inside(player.pos.x, player.pos.y + player.h);
    push();
    stroke('red');
    strokeWeight(2);
    if (dir === 'E' ||
        deltaX > 0 && player.collidesY(block.y, block.h) &&
        // The player's right side collided with the block's left side
        player.collidesXL(block.x, block.w) &&
        // And either both the top right and bottom right of the player are inside the block or neither of them are.
        xnor(tr, br)) {
      // simple case: our right edge collided with the block's left edge
      player.pos.x = block.x - player.w - 1;
      line(block.x, block.y, block.x, block.y + block.h);
    } else if (dir === 'W' ||
               deltaX < 0 && player.collidesY(block.y, block.h) && player.collidesXR(block.x, block.w) && xnor(tl, bl)) {
      // simple case: our left edge collided with the block's right edge
      player.pos.x = block.x + block.w + 1;
      line(block.x + block.w, block.y, block.x + block.w, block.y + block.h);
    } else if (dir === 'S' ||
               deltaY > 0 && player.collidesX(block.x, block.w) && player.collidesYB(block.y, block.h) && xnor(bl, br)) {
      // simple case: our bottom edge collided with the block's top edge
      player.pos.y = block.y - player.h - 1;
      // reset velocity due to gravity
      if (player.vel.y > 0) {
        player.vel.y = player.grav;
      }
      line(block.x, block.y, block.x + block.w, block.y);
    } else if (dir === 'N' ||
               deltaY < 0 && player.collidesX(block.x, block.w) && player.collidesYT(block.y, block.h) && xnor(tl, tr)) {
      // simple case: our top edge collided with the block's bottom edge
      player.pos.y = block.y + block.h + 1;
      line(block.x, block.y + block.h, block.x + block.w, block.y + block.h);
    } else {
      // nasty case, we collided from a corner, we need to determine whether to constrain the player's position in the X or in the Y direction.
      
      let slope = deltaY / deltaX;
      stroke('limegreen');
      strokeWeight(6);
      // At this point only one corner should be inside the box
      if (tr) {
        // At the point where the player's Top Right intersected the block, was the block's Bottom Left above or below the player's Top Right
        if (initX + player.w >= block.x || initY + (block.x - (initX + player.w)) * slope > block.y + block.h) {
          // Since the players TR was below the block's BL at the time of collision, constrain the Player's Y position
          player.pos.y = block.y + block.h + 1;
        } else {
          player.pos.x = block.x - player.w - 1;
        }
        point(block.x, block.y + block.h);
      } else if (br) {
        if (initX + player.w >= block.x || initY + player.h + (block.x - (initX + player.w)) * slope < block.y) {
          player.pos.y = block.y - player.h - 1;
          // reset velocity due to gravity
          if (player.vel.y > 0) {
            player.vel.y = player.grav;
          }
        } else {
          player.pos.x = block.x - player.w - 1;
        }
        point(block.x, block.y);
      } else if (bl) {
        if (initX <= block.x + block.w ||
            initY + player.h + (initX - (block.x + block.w)) * slope < block.y) {
          player.pos.y = block.y - player.h - 1;
          // reset velocity due to gravity
          if (player.vel.y > 0) {
            player.vel.y = player.grav;
          }
        } else {
          player.pos.x = block.x + block.w + 1;
        }
        point(block.x + block.w, block.y);
      } else if (tl) {
        if (initX <= block.x + block.w ||
            initY + (initX - (block.x + block.w)) * slope > block.y + block.h) {
          player.pos.y = block.y - player.h - 1;
        } else {
          player.pos.x = block.x + block.w + 1;
        }
        point(block.x + block.w, block.y + block.h);
      }
    }
    pop();
  }
  
  player.display();
}

function xnor(a, b) {
  return (a && b) || (!a && !b);
}


// Player class (same as above)
class Player {
  constructor() {
    this.w = 50;
    this.h = 125;
    this.pos = createVector(0, 0);
    this.vel = createVector();
    this.acc = acceleration;
    this.grav = gravity;
  }

  update() {
    this.vel.y += this.grav;
    this.pos.y += this.vel.y;

    this.vel.x += this.acc;

    this.pos.y = constrain(this.pos.y, 0, canvasHeight - this.h);
    this.pos.x = constrain(this.pos.x, 0, canvasWidth - this.w);
  }

  display() {
    image(playerImg, this.pos.x, this.pos.y, this.w, this.h);
  }

  isOnFloor() {
    return (this.pos.y >= canvasHeight - this.h);
  }

  collides(x, y, w, h) {
    if (this.pos.x + this.w >= x && this.pos.x <= x + w &&
      this.pos.y + this.h >= y && this.pos.y <= y + h) {
      return true;
    } else {
      return false;
    }
  }
  collidesY(y, h) {
    if (this.pos.y >= y - this.h && this.pos.y <= y + h) {
      return true;
    } else {
      return false;
    }
  }
  collidesX(x, w) {
    if (this.pos.x >= x - this.w && this.pos.x <= x + w) {
      return true;
    } else {
      return false;
    }
  }
  // Check if the right side of the player is inside the box
  collidesXL(x, w) { //X axis Left
    if (this.pos.x + this.w >= x && this.pos.x + this.w <= x + w) {
      return true;
    } else {
      return false;
    }
  }
  // Check if the left side of the player is inside the box
  collidesXR(x, w) { //X axis Right
    if (this.pos.x <= x + w && this.pos.x >= x) {
      return true;
    } else {
      return false;
    }
  }
  // Check if the top side of the player is inside the box
  collidesYT(y, h) { //Y axis Top
    if (this.pos.y <= y + h && this.pos.y >= y) {
      return true;
    } else {
      return false;
    }
  }
  // Check if the bottom side of the player is inside the box
  collidesYB(y, h) { //Y axis Bottom
    if (this.pos.y + this.h >= y && this.pos.y <= y + h) {
      return true;
    } else {
      return false;
    }
  }
}

class Block {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color(225, 225, 255, 20)
  }
  display() {
    fill(this.color)
    stroke(0, 0, 0, 50);
    rect(this.x, this.y, this.w, this.h)
  }
  inside(x, y) {
    return x >= this.x && x <= this.x + this.w &&
      y >= this.y && y <= this.y + this.h;
  }
}

const palyerImageData = "data:image/png;base64,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";
body, html {
margin: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

1

I think the best thing to do here is to imagine we're working with rectangles. So your stickman is, in essence just a rectangle.

There are 3 scenarios we need to handle for your game.

  1. The player lands on the platform
  2. The player hits the left of the platform
  3. The player hits the right of the platform

In 1. we want to stop the player altogether, setting their current y velocity to 0.

in 2. we just want to constrain the player so they can't walk through the platform

in 3. we want to do the same as step 2 but from the other side.

  // touched along the x axis
  if (player.pos.x + player.w >= block.x && player.pos.x <= block.x + block.w) {
    if (player.pos.y + player.h >= block.y &&player.pos.y + player.h <= block.y + block.h) {
      // landed on top
      player.pos.y = block.y - player.h;
      player.vel.y = 0;
    }

    if (player.pos.y >= height - player.h) {
      // player is not above or on the platform
      if (player.pos.x + player.w >= block.x && player.pos.x <= block.x + block.w / 2) {
        // hit the left of the block
        player.pos.x = block.x - player.w;
      } else if (player.pos.x <= block.x + block.w && player.pos.x >= block.x + block.w / 2 ) {
        // hit the right of the block
        player.pos.x = block.x + block.w;
      }
    }
  }

I've put together a really simple example, starting from your code that should point you in the right direction:

let platform;
let speed = 2;
let acceleration = 0.001;
let jumpForce = -5;
let gravity = 0.25;
function setup() {
  createCanvas(500, 500);

  player = new Player();
  block = new Block(width / 3, height / 1.2, 200, 25);
}

function draw() {
  background(50, 200, 255);

  // touched along the x axis
  if (player.pos.x + player.w >= block.x && player.pos.x <= block.x + block.w) {
    if (player.pos.y + player.h >= block.y &&player.pos.y + player.h <= block.y + block.h) {
      // landed on top
      player.pos.y = block.y - player.h;
      player.vel.y = 0;
    }

    if (player.pos.y >= height - player.h) {
      // player is not above or on the platform
      
      if (player.pos.x + player.w >= block.x && player.pos.x <= block.x + block.w / 2) {
        // hit the left of the block
        player.pos.x = block.x - player.w;
      } else if (player.pos.x <= block.x + block.w && player.pos.x >= block.x + block.w / 2 ) {
        // hit the right of the block
        player.pos.x = block.x + block.w;
      }
    }
  }



  if (keyIsPressed && keyCode === UP_ARROW) {
    player.vel.y = jumpForce;
  } else if (keyIsPressed && keyCode === RIGHT_ARROW) {
    player.pos.x += player.vel.x;
  } else if (keyIsPressed && keyCode === LEFT_ARROW) {
    player.pos.x -= player.vel.x;
  } else {
    player.vel.x = speed;
  }
  
  player.run();
  block.display();
}

class Player {
  constructor() {
    this.w = 50;
    this.h = 125;
    this.pos = createVector(0, 0);
    this.vel = createVector();
    this.acc = acceleration;
    this.grav = gravity;
  }

  update() {
    this.vel.y += this.grav;
    this.pos.y += this.vel.y;

    this.pos.y = constrain(this.pos.y, 0, height - this.h);
    this.pos.x = constrain(this.pos.x, 0, width - this.w);
    rect(this.pos.x, this.pos.y, this.w, this.h);
  }

  run() {
    this.update();
  }

  isOnFloor() {
    return this.pos.y >= height - this.h;
  }
}

class Block {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color(225, 225, 255);
  }
  display() {
    fill(this.color);
    rect(this.x, this.y, this.w, this.h);
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="player.js"></script>
    <script src="block.js"></script>
  </body>
</html>

This is of course by no means an exact science, however, one issue would occur if you were to have the platform in a position where it was above the player, extra code would be needed to ensure the player hits their head!

Here's a link to p5.js sketch I created for this.

Also, I might add that the p5.play library makes collision detection an absolute breeze, might be worth taking a look at.

2
  • weird things happen when the player collides with the block while moving diagonally. Commented Oct 29, 2021 at 23:07
  • Yeah, as stated it's not an exact science, I didn't think it was possible to move diagonally in the OPs game, now I can see it's possible to move diagonally down. I still don't think the outcome is weird enough to warrant a more complicated solution. Commented Oct 30, 2021 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.