矩形碰撞

Question

我正在 Javascript 开发一款游戏，我让一名玩家尝试收集金币。两者目前都是具有不同维度的 rects()，我正在尝试合并一个功能，在用户获得硬币时提醒他们。目前，这是我的播放器和硬币碰撞检测代码。

isTouching(player) {

        return player.x + player.width > this.x &&
               this.x + this.width > player.x &&
               player.y + player.height > this.y &&
               this.y + this.height > player.y;

    }

但是，当我遍历我的硬币数组并检查碰撞时，没有任何反应。为什么是这样？这是我的相关代码：

for (let x = 0; x < 5; x ++) { coins[x].collisions(); }

和...

collisions() {

        if (this.isTouching(player)) {

            alert("you got a coin!");

        }

    }

我的硬币和玩家都有自己的class，我的硬币存储在一个数组中。

let player;
let coins = [];
player =    new Player();
for (let x = 0; x < 5; x ++) { coins.push(new Coin()); }

即使玩家触摸硬币，也没有任何警报。我该如何解决这个问题？

P.S。我知道有很多库能够检查矩形之间的碰撞，但我想利用我自己的函数来检查碰撞。请告诉我 how/if 我需要更改我的碰撞检测系统。

此外，如果我提供的代码不清楚，这里有一个包含我的程序代码的 .zip（下载链接）：https://www.mediafire.com/file/00rz1ta5s55rvzf/game.zip/file

编辑：一条评论建议我使用一个库来检查碰撞，这在技术上是不允许的，但为了测试，我试过了。我导入了过去为我工作的 bmoren's p5.collide2D 库，并使用了这段代码（如下）。但是问题依然存在，根本检测不到对象之间的碰撞。

利用库的新代码：

if (this.touched()) {
        
     alert("you got a coin!");
        
}
        
touched() {
        
     return collideRectRect(this.x, this.y, this.width, this.height, player.x, player.y, player.width, player.height);
        
}

Answer 1

只需阅读您的所有代码。我能够让硬币警报正常工作，这是您需要更改的内容

在game.engine.js中，更改功能设置。我在这里更新了你的循环，问题是你的随机 x 和 y 硬币需要传递给你的硬币 class 实例。

function setup() {

  // Apply classes to empty variables
  console.log("Creating player...");
  player =    new Player();

  console.log("Creating world...");
  world  =    new World();

  console.log("Creating coins...");
  for (let i = 0; i < number_of_coins; i++) { coins.push(new Coin(coin_cords_X[i], coin_cords_Y[i])); }

  console.log("Creating controller...");
  controller = new Controller();

  // Draw canvas with set size
  console.log("Creating game screen...");
  createCanvas(1250, 750);

}

现在，您的 game.coin.js 需要在构造函数中获取传递的 x 和 y 并改为使用它。

class Coin {

    // Setup player attributes
    x;
    y;
    width;
    height;

    constructor(x, y) {

        this.x = x;
        this.y = y;
        this.width = 30;
        this.height = 30;

    }

    show(x) {
        fill(player.color);

        rect(this.x, this.y, this.width, this.height);

    }

  // rest of the methods will be as is
}

完成这两件事后，它应该可以正常工作。

我附上修改后的程序压缩包。 https://www.mediafire.com/file/4krl9e0trdxlcx3/game.zip/file

矩形碰撞

Rect Collisions

javascript

collision-detection

p5.js