使用collide（）函数

Question

我正在努力使用P5.play引擎为我的决赛制作所有组件，虽然我在设置迷你游戏方面取得了一些进展但我很难在碰撞。它应该很容易，但无论出于什么原因，当我设置我的两个物体（鱼和垃圾）时，它们不会发生碰撞。我正在设置它，以便当垃圾与鱼碰撞时，鱼被移除或被重置到他们可以继续在屏幕上移动同时计算得分的地方。我设法让玩家精灵收集垃圾并使用overlapPoint添加到分数并将条件放入垃圾对象的更新中。但是当我为垃圾对象上的鱼尝试相同的技术时，会发生错误并且一切都会消失在屏幕上。我注释掉了我尝试过多种方式的部分，包括具有适当条件的对象上的collide（）函数，但似乎没有任何效果。有点令人沮丧。我尝试了其他各种方法。所以我要求专家建议。任何帮助表示赞赏。这是我到目前为止的代码：

var bg;

var player;
var player_stand_sprites;
var player_stand;

var fish_swim_sprites;
var fish_swim; 
var fish = [];

var garbage_drop_sprites;
var garbage_drop;
var garbage = [];

var score = 0;


function preload() {
    bg = loadImage("final-bg.png");

    player_stand_sprites = loadSpriteSheet("player2.png", 100, 100, 1);
    player_stand = loadAnimation(player_stand_sprites);

    fish_swim_sprites = loadSpriteSheet("fish.png", 75, 75, 1);
    fish_swim = loadAnimation(fish_swim_sprites);

    garbage_drop_sprites = loadSpriteSheet("metal.png", 41, 75, 1);
    garbage_drop = loadAnimation(garbage_drop_sprites);
}


function setup() {
    createCanvas(720, 360);

    player = createSprite(100, 0);
    player.addAnimation("stand", player_stand);
    player.setCollider("circle", 0, 0, 32, 32);
    player.depth = 10;
    //player.debug = true;

    //to make fish
    for (var i = 0; i < 10; i++){
        fish.push( new Fish(random(0,width), random(height/2, height)) );
        for (var i = 0; i < fish.length; i++) {
            fish[i].init();
        }
    }
    //to make garbage
    for (var a = 0; a < 5; a++){
        garbage.push( new Garbage(random(0,width), random(width/2, width)));
    }
}


function draw() {
    background(bg);

    player.position.x = mouseX;
    player.position.y = mouseY;

    for (var i = 0; i < fish.length; i++) {
        fish[i].update();
    }
    for (var a = 0; a < garbage.length; a++) {
        garbage[a].update();
    }
    /**for (var b = 0; b < fish.length; b++) {
        if(fish[b].collide(garbage[b])){
            fish[b].remove;
        }
    }**/
    text(score,100,100);

    drawSprites();
}


function Garbage(x,y){
    this.sprite = createSprite(x, y);
    this.sprite.addAnimation("drop", garbage_drop);
    this.sprite.setCollider("circle",0,0,32,32);
    this.speed = random(1,2);
    this.sprite.debug = true;

    this.update = function() {
        this.sprite.position.y += this.speed;
        if(this.sprite.position.y > height){
            this.sprite.position.y = 0;
        }
        if(this.sprite.overlapPoint(player.position.x, player.position.y)){
            this.sprite.position.x = random(0,width);
            this.sprite.position.y = -75;
            score++;
        }
    }
}


function Fish(x,y) {
    this.sprite = createSprite(x, y);
    this.sprite.addAnimation("swim", fish_swim);
    this.sprite.setCollider("rectangle",0,0,75,32);
    this.speed = 0;
    this.sprite.debug = true;
    this.init = function() {
        if (this.sprite.position.x < width/2) {
            this.sprite.mirrorX(-1);
            this.speed = random(1, 2);
        } else {
            this.speed = -random(1,2);
        }
    }
    this.update = function() {
        this.sprite.position.x += this.speed;
        if(this.sprite.position.x > width){
            this.sprite.position.x = 0;
        }else if(this.sprite.position.x < -width){
            this.sprite.position.x = width;
        }
    }

}

Answer 1

我实际上已经找到了我的问题的答案，但我会在这里发布。

最初的问题是精灵不会碰撞，但是一个简单的for循环嵌套在另一个for循环中，并且为每个被检查的对象添加.sprite，我能够让所有元素碰撞正常。

以下是我修改的代码，使其可以使用P5.play.js库无缝地工作：

var bg;
var img;
var dead = false;
var deadFish = 0;

var player;
var player_stand_sprites;
var player_stand;

var fish_swim_sprites;
var fish_swim; 
var fish = [];

var garbage_drop_sprites;
var garbage_drop;
var garbage = [];

var score = 0;
//////////////////////////////////////////

function preload() {
    bg = loadImage("final-bg.png");
    img = loadImage("fish.png");

    player_stand_sprites = loadSpriteSheet("player2.png", 100, 100, 1);
    player_stand = loadAnimation(player_stand_sprites);

    fish_swim_sprites = loadSpriteSheet("fish.png", 75, 75, 1);
    fish_swim = loadAnimation(fish_swim_sprites);

    garbage_drop_sprites = loadSpriteSheet("metal.png", 41, 75, 1);
    garbage_drop = loadAnimation(garbage_drop_sprites);
}

//////////////////////////////////////////

function setup() {
    createCanvas(720, 360);

    player = createSprite(100, 0);
    player.addAnimation("stand", player_stand);
    player.setCollider("circle", 0, 0, 32, 32);
    player.depth = 10;
    //player.debug = true;

    //to make fish
    for (var i = 0; i < 10; i++){
        fish.push( new Fish(random(0,width), random(height/2, height)) );
        for (var i = 0; i < fish.length; i++) {
            fish[i].init();
        }
    }

    //to make garbage
    for (var a = 0; a < 5; a++){
        garbage.push( new Garbage(random(0,width), random(width/2, width)));
    }
}

function draw() {  
    scene_start();
}

//////////////////////////////////////////

function scene_start(){
    push();
    background("green");
    fill("white");
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    text("SPOT A FISH", width/2,height/3.5);
    image(img, width/2.3, height/3);
    textSize(15);
    text("Rules: dont let the cans touch the fish. 5 fish die and you must start over", width/2, height/1.5);
    textSize(30);
    text("press up arrow key to start", width/2, height/1.2);
    pop();
    if (keyCode == UP_ARROW) {
        scene_1();
    }
}

function scene_1(){
    background(bg);
    score_card();

      if(!dead){
        player.position.x = mouseX;
        player.position.y = mouseY;

        for (var i = 0; i < fish.length; i++) {
            fish[i].update();
        }

       for (var i = 0; i < garbage.length; i++) {
            garbage[i].update();
        }

        for (var a = 0; a < garbage.length; a++) {
            for (var b = 0; b < fish.length; b++) {
                if(fish[b].sprite.collide(garbage[a].sprite)){
                    fish[b].sprite.position.x = random(-500, -100);
                    deadFish ++;
                    if(deadFish === 5){
                       dead = true;
                   }
                }
            }
        }

        drawSprites();
    }else{
        score_card();
        textSize(30);
        textStyle(BOLD);
        textAlign(CENTER);

        text("YOU DIED PLEASE TRY AGAIN",width/2,height/2);
        text("press any button to start again",width/2,height/1.5);

        if(keyIsPressed === true){
            deadFish = 0;
            dead = false;
        }


    }
}

function Garbage(x,y){
    this.sprite = createSprite(x, y);
    this.sprite.addAnimation("drop", garbage_drop);
    this.sprite.setCollider("circle",0,0,32,32);
    this.speed = random(1,2);
    //this.sprite.debug = true;

    this.update = function() {
        this.sprite.position.y += this.speed;
        if(this.sprite.position.y > height){
            this.sprite.position.y = 0;
        }
        if(this.sprite.overlapPoint(player.position.x, player.position.y)){
            this.sprite.position.x = random(0,width);
            this.sprite.position.y = random(-200,-75);
            score++;
        }
        if(score === 100){
            this.speed = random(2,3);
            score += 1000;
        }else if(score === 1200){
            this.speed = random(3,3.5);
            score += 1000;
        }
    }
}

var score_card = function(){
    fill("black");
    rect(0,0,width,30);
    textStyle(BOLD);
    fill("white");
    text("SCORE: "+score,10,20);
    text("DEAD FISH: "+deadFish,width/1.2,20)
}


function Fish(x,y) {
    this.sprite = createSprite(x, y);
    this.sprite.addAnimation("swim", fish_swim);
    this.sprite.setCollider("rectangle",0,0,75,32);
    this.speed = 0;
    this.sprite.debug = true;
    this.init = function() {
        if (this.sprite.position.x < width/2) {
            this.sprite.mirrorX(-1);
            this.speed = random(1, 2);
        } else {
            this.speed = -random(1,2);
        }
    }
    this.update = function() {
        this.sprite.position.x += this.speed;
        if(this.sprite.position.x > width){
            this.sprite.position.x = 0;
        }else if(this.sprite.position.x < -width){
            this.sprite.position.x = width;
        }
    }  
}