P5中的對象在使用碰撞（）函數時不會碰撞

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; 
     } 
    } 
}