我一直在使用 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;
}
}
}
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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";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 的情况下，我似乎无法阻止玩家从平台上坠落，这当然会使玩家无法移动。请帮忙。我应该怎么做才能解决这个问题？
以下是 repli 上的完整代码，以及您可以尝试的演示:
代码:https://replit.com/@STCollier/Player-Movement-Script?v=1
演示:https://player-movement-script.stcollier.repl.co/
太感谢了!
最佳答案
这有点复杂，如果有更好的解决方案(在优雅和性能方面)，我一点也不感到惊讶。似乎您需要考虑几种不同的碰撞场景。
在绿色的情况下，生活很简单，玩家的一个边缘与 block 的一个边缘发生碰撞。检查这一点包括确认玩家的边缘与 block 重叠，并且玩家的两个 Angular 都在 block 内或两个 Angular 都在 block 外。这些案例在图中是绿色的。在这些情况下，您可以简单地限制水平碰撞的 X 位置和垂直碰撞的 Y 位置。
复杂的情况是当玩家与 Angular 落的方 block 发生碰撞时。在这种情况下，您需要确定碰撞是首先发生在侧面还是顶部/底部。这可以通过使用两个 Angular 之间的水平距离乘以斜率，并将结果位置与 block 的相应 Angular 进行比较来完成。
在这个例子中，因为玩家的右下角，当在运动方向上偏移到碰撞点时是以下在街区的左上角，球员的水平位置应该受到限制(即他们跑到街区的一侧而不是顶部)。
这是示例代码(放慢速度并带有突出显示，以便更容易看到正在发生的事情):
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>关于javascript - p5.js 中的碰撞处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69773503/