那些遇到过的问题

p5.j​​s 中的碰撞处理

Sco*_*ier 5 javascript collision p5.js

我一直在使用 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;
      }
    }
    
}
Run Code Online (Sandbox Code Playgroud)

正如您所看到的，我创建了许多函数来尝试使碰撞处理正常工作。这是我的主要代码，第 62 行有碰撞处理。第 54 行显示了我已注释掉的代码，因为它不起作用。

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;
      }
    }
    
}
Run Code Online (Sandbox Code Playgroud) 
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,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";
Run Code Online (Sandbox Code Playgroud) 
body, html {
margin: 0;
width: 100%;
height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

我已经为此工作了几周，并且做了大量测试，但没有任何效果。如果不将玩家速度更改为 0，我似乎无法阻止玩家从平台上掉下来，这当然会使玩家无法移动。请帮忙。我应该怎么做才能解决这个问题？

以下是 replit 的完整代码，以及您可以尝试的演示：

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

太感谢了！

Luk*_*gan 1

我认为这里最好的做法是想象我们正在使用矩形。所以你的火柴人本质上只是一个矩形。

我们需要为您的游戏处理 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;
      }
    }
  }
Run Code Online (Sandbox Code Playgroud)

我整理了一个非常简单的示例，从您的代码开始，它应该为您指明正确的方向：

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);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<!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>
Run Code Online (Sandbox Code Playgroud)

当然，这绝不是一门精确的科学，但是，如果您要将平台放置在玩家上方的位置，就会出现一个问题，需要额外的代码来确保玩家击中头部！

这是我为此创建的p5.js 草图的链接。

另外，我可能会补充一点，p5.play 库使碰撞检测变得轻而易举，可能值得一看。

归档时间：

查看次数：

1283 次

最近记录：

4 年，1 月 前
相关归档
如何使用带有.reset()方法的jQuery重置表单 244
适用于iPhone/iPad的javascript滚动活动？ 105
在Yii Framework中包含CSS,javascript文件 96
验证单选按钮AngularJS 77
"JavaScript的:无效(0);" vs"return false"vs"preventDefault()" 73
错误:尝试在已清除的作用域上运行compile-and-go脚本 67
简单的油门在js 56
按数据属性的数值对元素进行排序 53
JavaScript数组如何在物理内存中表示？ 46
用逗号分隔字符串但使用Javascript忽略双引号内的逗号 45
难疑归档
如何检查jQuery中是否隐藏了一个元素？ 7481
如何用JavaScript更改元素的类？ 2650
如何在Bash中连接字符串变量 2624
如何让Git忽略文件模式(chmod)的变化？ 2188
方法和函数之间有什么区别？ 1665
如何修复java.lang.UnsupportedClassVersionError:不支持的major.minor版本 1532
何时使用虚拟析构函数？ 1420
使用*args和**kwargs 1367
为什么我需要一直做`--set-upstream`？ 1364
C中的函数指针如何工作？ 1170