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);
}
CLICK HERE to find out more related problems solutions.