Collision detection of array objects

Question

I'm making a small game in p5.js and when the avatar hits a specific object that object needs to trigger a specific scene. The object in questions are 4 hourglasses contained in an array, how do I "access" the array to implement a different collision detection for each object? I hope I've been clear enough.

class HourGlass {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.w = 60
    this.h = 65
  }
  body() {
    imageMode(CENTER);
    for (let i = 0; i < timekNum; i++) {
    image(hourglass, this.x+(i*150) , this.y+(sin(frameCount/(i+10))*(i+20)), this.w, this.h)
  }
  }
  
  checkCollision1(){
    if (me2.x + me2.w > this[0].x && me2.x < this[0].x + me2.w && me2.y + me2.h/2 > this[0].y && me2.y < this[0].y + this[0].h){
      scene = 5
    } 
  }

here is the link to the "full" game https://editor.p5js.org/larie438/sketches/uufycStNE (it should be run in Chrome, for some reason, it runs like garbage in Safari)

Thanks in advance for the help!

Pipe Soto · Accepted Answer · 2020-11-07 05:38:48Z

2

The problem is in the function checkCollision1(), replace this[0] for only this.

 checkCollision1(){
    if (me2.x + me2.w > this.x && me2.x < this.x + me2.w && me2.y + me2.h/2 > this.y && me2.y < this.y + this.h){
      scene = 5
    } 
  }

If you want select the scene of the collision, i recommend use params like that:

  checkCollision(sceneWanted){
    if (me2.x + me2.w > this.x && me2.x < this.x + me2.w && me2.y + me2.h/2 > this.y && me2.y < this.y + this.h){
      scene = sceneWanted;
    } 
  }

And when you check the collisions use this new function:

function hourGlassroom() {
  push()
  background(25, 25, 50)
  for (var i = 0; i < stars.length; i++) {
    stars[i].body();
  }
    for (let i = 0; i < timekNum; i++) {
  timekeeper[i].body()
    }
  me2.body()
  me2.move2()
  timekeeper[0].checkCollision(5)
  timekeeper[1].checkCollision(6)
  timekeeper[2].checkCollision(7)
  timekeeper[3].checkCollision(8)
  pop()
}

After this point maybe you will have a problems with that the only timekeeper that work is the first, this is because you created all timekeeper with the same X and Y params.

function setup() {
  createCanvas(640, 360);
  noStroke();
  frameRate(fps);
  y = 359;
  vid.loop();
  vid.hide();

  for (let i = 0; i < cloudNum; i++) {
    clouds[i] = new Cloud(random(width), random(height - 180));
  }

  me = new Emi(10, 220);
  
  me2 = new Emi(20, 300);
  for (let i = 0; i < timekNum; i++) {
    timekeeper[i] = new HourGlass(100, height / 2);
  }
  //All timekeeper with the same X and Y params HERE !!.

  for (var i = 0; i < 1000; i++) {
    stars[i] = new Star();
  }
}

Effectively you move all timekeepers in the canvas, but you need update his X and Y params like this.

 body(i) {
    imageMode(CENTER);
    this.x = 100+(i*150);
    this.rad += 0.05;
    if(this.rad > 2*PI) this.rad = 0;
    this.y = (height/2 + sin(this.rad)*20);
    image(hourglass, this.x , this.y, this.w, this.h);
  }

edited Nov 7, 2020 at 5:38

answered Nov 7, 2020 at 4:49

Pipe Soto

3302 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M0bi0usOne Over a year ago

Thanks! but when I substitute your code in my sketches the hourglasses don't show up Am I doing it right

function hourGlassroom() {   push()   background(25, 25, 50)   for (var i = 0; i < stars.length; i++) {     stars[i].body();   }   for (let i = 0; i < timekNum; i++) {     timekeeper[i].body(i)   }   me2.body()   me2.move2()   timekeeper[0].checkCollision(5)   timekeeper[1].checkCollision(6)   timekeeper[2].checkCollision(7)   timekeeper[3].checkCollision(8)   pop() }

sorry I don't know how to make it pretty

M0bi0usOne Over a year ago

editor.p5js.org/larie438/sketches/tUfC1rFte

Pipe Soto Over a year ago

@M0bi0usOne This is the changes that i made: editor.p5js.org/piponsio96/sketches/mAJVlSLQ3

Collectives™ on Stack Overflow

Collision detection of array objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related