javascript - p5.js 中的碰撞处理-6ren

javascript - p5.js 中的碰撞处理

转载作者：行者123 更新时间：2023-12-05 00:38:12

我一直在使用 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,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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/

文章推荐： javascript - 使用 SWR 时如何正确传递 header ？

文章推荐： javascript - PWA : How to have dynamic "start_url" in manifest. json

文章推荐： javascript - 装饰器和私有(private)字段 javascript

c - while(*p){p++;}、while (*++p){;} 和 while(*p++){;} 有什么区别？
关于strcat函数。 while (*p) p++; 和 while (*++p) ; 两者都有效，但是 while (*p++) ; 不起作用。我认为 first 和 th
What is "
" in HTML?(HTML中的““是什么
？)
下面例子中的第一行代码是什么。我看到一个YouTuber在写下面的代码，它显示了一个设计在csswar Challenges中。我也尝试了一下，它很管用。但我以前从未在任何HTML教程上看到过它，我在
html - 处理不间断空格 :

vs.

是不间断空格，表示没有换行的空白处。如果我用我在两个段落之间有一个空格(更大的间隔)。如果我使用我在两个段落之间只有一个新行(没有中断)。为什么？最佳答案在 HTML 中
字符* p = "hello"; printf ("%c %c %c %c", *p, *++p, *p++, *p);
这个问题已经有答案了: Why are these constructs using pre and post-increment undefined behavior? (14 个回答) 已关闭 9
c - "for ( ; *p;++p) *p = tolower(*p);"在 c 中如何工作？
我对编程还很陌生，只是想知道为什么这段代码: for ( ; *p; ++p) *p = tolower(*p); 当 p 指向一个字符串时，可以降低 c 中字符串的大小写吗？最佳答案一般来说，这
c - 为什么对于指针 *p，p[0] 是存储在 p 的地址而 p[1] 是 p 本身的地址？
代码 int n = 25; int *p = &n; printf("%x\n %d\n %x\n", p, p[0], p[1]); 返回: \ 当然我永远不会这样做，但在 K&R 中声明
python - 考虑到 p 在 python 中是素数，当我执行 p/p+1 + p+1/p 操作时出错
所以，我想创建一个简单的程序，返回有关连续素数的计算结果。首先，我创建一个包含所有这些素数的列表，然后尝试计算结果，但这给了我一个超出范围的索引。有人可以帮助我吗？我的程序: primes = []
c++ - C/C++ 中 p[i] 、 i[p] 和 *(p+i) 、 *(i+p) 的区别
这个问题在这里已经有了答案: With arrays, why is it the case that a[5] == 5[a]? (20 个答案) 关闭 9 年前。我想知道 C/C++ 中以下四
C++ - *p vs &p vs p
我仍在努力理解 *p、&p 和 p 之间的区别。根据我的理解，* 可以被认为是“指向的值”，而 & 可以被认为是“地址”。换句话说，* 保存值，而 & 保存地址。如果这是真的，那么 *p 和 p 之间
java - 需要更换
你是吗？ [xxxrecipientFirstNamexxx]
和
你是吗？ {recipientFirstName}

需要更换你是吗？ [xxxrecipientFirstNamexxx] 和你是吗？ {recipientFirstName} 。我尝试使用边界匹配器。但结果并不符合预期。我尝试使用下面的代码 "A
c# - query = query.OrderBy(p => p.IsTop).ThenOrderByDescending(p => p.JobId)?
我想按 IsTop 属性升序排序对象，然后按 JobId 属性降序排序: query = query.OrderBy(p => p.IsTop).ThenOrderByDescending(p =
java - Apache POI 数据格式化程序无法应用自定义格式 "0.0 p.p.;(0.0 p.p.)"
在我尝试使用 Apache POI 进行转换的 Excel 文件中，我有一个单元格的数值为 -3.97819466831428，自定义格式为“0.0 p.p.;(0.0 p.p.)”。因此，在 Exc
c# - 如何创建一个扩展方法，允许我调用 ToSerializableDictionary(p => p.ID) 而不是 .ToDictionary(p => p.ID)
我想创建一个扩展方法，允许我调用 ToSerializableDictionary(p => p.ID)而不是 .ToDictionary(p => p.ID)在以下 LINQ 上下文中。虽然我不确定
javascript - $ ("p").each(function (){}) vs for( p in $ ("p") 返回不同的段落数值
在下面的 HTML 代码上运行此 jQuery 代码会返回不同的结果，我认为它们应该返回相同的值。 jQuery 代码: var counter = 0; $("p").each(function()
c++ - 我在哪里可以找到标准中对 *p 和 p[0]、*(p+1) 和 p[1]、... 之间等价关系的引用？
在下面的代码片段中，符号 *p 等同于 p[0]，*(p + 1) 等同于p[1]，依此类推。 int* p = new int[3] { 1, 2, 3}; cout << *p << ' ' <<
c++ - Foo *p = 0;p->p() 如何有效？
这个问题在这里已经有了答案: What will happen when I call a member function on a NULL object pointer? [duplicate]
c - "p = p + (*p)++ * 3 + c;"会导致未定义的行为吗？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Undefined Behavior and Sequence Points 按照标准中的定义，E1 +=
What is "
" in HTML?(在HTML中“
”是什么？)
以下示例中的第一行代码是什么。我看到一个youtube用户写下面的代码，它显示在cssbattle挑战的设计。我也试过，它的作品。但我从来没有见过它在任何HTML教程之前，我在谷歌上搜索它，但它只显示
php - < o : p > & nbsp ; display error
每当我收到来自 MS outlook 的电子邮件时，我都会收到此标记 & nbsp ; (没有空格)哪个显示为？在 <>. 当我将其更改为 ISO-8859-1 时，浏览器页面字符集编码为 UTF-8
python - 获取标签之间的字符串(
p1
TEST
p2
中的 TEST)
代码: from bs4 import BeautifulSoup soup = BeautifulSoup('p1TESTp2') print soup.div() 结果: [p1, p2] 为什么

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城