P5:如何找到与特定精灵的碰撞

问题描述 投票:0回答:2

我正在构建一些演示来比较物理引擎以制作实际的游戏。然而,我被困在 p5.js 上,因为我似乎找不到一个函数来检查一个精灵是否与另一个精灵碰撞,并且只有那个精灵(或精灵组)。有没有这个函数?我似乎无法在 p5play 上找到参考,只有碰撞/重叠功能,但我的不重叠,并且碰撞功能仅检查帧,我认为它不是特定的。

这是我的代码,用于调试目的:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weebloo</title>

    <script defer src="lib/p5.min.js"></script>
    <script defer src="lib/p5.sound.min.js"></script>
    <script defer src="lib/p5play.js"></script>
    <script defer src="lib/planck.min.js"></script>
    <script defer src="lib/p5.input.js"></script>

    <style>
        html, body {
            font-family: "Comic Sans MS", cursive, sans-serif;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>
let sprite;

let floor, wallLeft, wallRight, ceiling;

let bouncyFloor, slipperyFloor;

let jumpPower;
let agility = 2.5;
let jumps = 2;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  frameRate(60);

  sprite = new Sprite(width / 2, height / 2, 30, 30);
  sprite.rotationLock = true;
  sprite.bounciness = 0.15;

  floor = new Sprite(width * 0.5, height, width, 10, "s");
  ceiling = new Sprite(width * 0.5, 0, width, 10, "s");
  wallLeft = new Sprite(0, height * 0.5, 10, height, "s");
  wallRight = new Sprite(width, height * 0.5, 10, height, "s");

  bouncyFloor = new Sprite(width * 0.25, height * 0.75, 100, 10, "s");
  bouncyFloor.bounciness = 1;
  slipperyFloor = new Sprite(width * 0.75, height * 0.75, 100, 10, "s");
  slipperyFloor.friction = 0;

  world.gravity.y = 10;
  jumpPower = world.gravity.y * 0.5;
}

function draw() {
  background(255);
  fill("rgba(0,0,0,0.7)");
  textSize(16);
  textAlign(LEFT);
  text(`fps: ${int(getFrameRate())}`, 10, 20);
  text(`xvel: ${Math.round(float(sprite.vel.x) * 10) / 10}`, 10, 36);
  text(`yvel: ${Math.round(float(sprite.vel.y) * 10) / 10}`, 10, 52);

  fill(0);
  textAlign(CENTER);
  text("bouncy", bouncyFloor.pos.x, height * 0.75 - 10);
  text("slippery", slipperyFloor.pos.x, height * 0.75 - 10);
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    sprite.vel.x = sprite.vel.x - agility;
  } else if (keyCode === RIGHT_ARROW) {
    sprite.vel.x = sprite.vel.x + agility;
  } else if (keyCode === DOWN_ARROW) {
    sprite.vel.y = sprite.vel.y + jumpPower;
  } else if (keyCode === UP_ARROW) {
    if (jumps > 0) {
      sprite.vel.y = sprite.vel.y - jumpPower;
      jumps = jumps - 1;
    } else {
      if (sprite.overlap(floor) == true) {         //
        jumps = 2;                                 //
        sprite.vel.y = sprite.vel.y - jumpPower;   // This goes through the floor? Why?
        jumps = jumps - 1;                         //
      }                                            //
    }
  }
}
javascript p5.js p5.play
2个回答
0
投票

好吧,看来我使用了一些错误的功能。

我使用的代码位于 keyPressed() 事件监听器中。 固定代码位于draw()函数中(每帧运行),如下所示:

// floors is the group of all floor objects that restore jumps.
// jumps is used when the player presses UpArrow.
// maxJumps is the maximum number of jumps possible.

if (sprite.collide(floors)) {
    jumps = maxJumps;
  }

0
投票

我建议使用 P5.play 的文档 要检测两个特定精灵是否发生碰撞,您需要做的是:

if (spriteA.colliding(spriteB) {
do things
}

© www.soinside.com 2019 - 2024. All rights reserved.