javascript - 使用 Collide() 函数时，P5 中的对象不会发生碰撞

Question

我正在努力使用 P5.play 引擎将我的决赛的所有组件组合在一起，虽然我在设置迷你游戏的各个方面取得了一些进展，但我在碰撞方面遇到了困难。这应该很容易，但无论出于何种原因，当我设置两个对象(鱼和垃圾)时，它们都不会发生碰撞。我正在尝试进行设置，以便当垃圾与鱼碰撞时，鱼要么被移除，要么被重置到可以在计算分数时继续在屏幕上移动的位置。我设法让玩家 Sprite 收集垃圾并使用重叠点添加到分数中，并将条件放置在垃圾对象的更新中。但是，当我尝试对垃圾对象上的鱼使用相同的技术时，会发生错误，屏幕上的所有内容都会消失。我注释掉了我已经尝试了多种方法的部分，包括具有适当条件的对象上的 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

我实际上不久前找到了我的问题的答案，但我将把它发布在这里。

最初的问题是 Sprite 不会碰撞，但是通过嵌套在另一个 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;
        }
    }  
}