p5.j​​s 中的沖突處理

Question

我一直在使用 p5.js，我已經想出了如何讓對象檢測碰撞，但我對如何處理這些碰撞感到很困惑。 我嘗試將播放器速度設置為 0，但隨后播放器卡住了。 我也試過將碰撞分開到每一側，但這也不起作用。

這是我的帶有碰撞函數的玩家構造函數：

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;
      }
    }
    
}

如您所見，我創建了許多函數來嘗試使碰撞處理正常工作。 這是我的主要代碼，第 62 行包含碰撞處理。第 54 行顯示了我已注釋掉的代碼，因為它不起作用。

 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,+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>

我已經為此工作了幾個星期，我做了大量的測試，但沒有任何效果。 我似乎無法在不將玩家速度更改為 0 的情況下阻止玩家從平台墜落，這當然會使玩家無法移動。 請幫忙。 我該怎么做才能解決這個問題？

這是關於 replit 的完整代碼，以及您可以嘗試的演示：

代碼： https : //replit.com/@STCollier/Player-Movement-Script?v =1演示： https : //player-movement-script.stcollier.repl.co/

非常感謝！

Answer 1

這有點復雜，如果有更好的解決方案（在優雅和性能方面），我根本不會感到驚訝。 似乎您需要考慮幾個不同的碰撞場景。

在綠色情況下，生活很簡單，玩家的一側與方塊的一側發生碰撞。 檢查這一點包括確認玩家的邊緣與方塊重疊，並且玩家的兩個角都在方塊內或兩個角都在方塊外。 這些案例在圖中是綠色的。 在這些情況下，您可以簡單地約束水平碰撞的 X 位置和垂直碰撞的 Y 位置。

復雜的情況是當玩家與角落上的塊發生碰撞時。 在這種情況下，您需要弄清楚碰撞是首先發生在側面還是頂部/底部。 這可以通過使用兩個角之間的水平距離乘以斜率，並將結果位置與塊的相應角進行比較來完成。

在這個例子中，因為玩家的右下角，當在運動方向上偏移到碰撞點的位置低於塊的左上角時，玩家的水平位置應該受到約束（即他們跑到了方塊的側面）塊不是頂部）。

這是示例代碼（放慢速度並突出顯示，以便更容易地看到發生了什么）：

 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,+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>

Answer 2

我認為在這里做的最好的事情是想象我們正在使用矩形。 所以你的火柴人本質上只是一個矩形。

我們需要為您的游戲處理 3 種情況。

1. 玩家降落在平台上
2. 玩家擊中平台左側
3. 玩家擊中平台右側

在1.我們想要完全停止玩家，將他們當前的y速度設置為 0。

2.我們只是想約束玩家，讓他們不能穿過平台

在3.我們想要做與步驟2相同的事情，但是從另一邊。

  // 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;
      }
    }
  }

我整理了一個非常簡單的例子，從你的代碼開始，它應該為你指明正確的方向：

 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>

這當然絕不是一門精確的科學，但是，如果您將平台置於玩家上方的位置，則會出現一個問題，需要額外的代碼來確保玩家撞到他們的頭！

這是我為此創建的p5.j​​s 草圖的鏈接。

另外，我可能會補充說p5.play 庫使碰撞檢測變得輕而易舉，可能值得一看。