hmtl5 canvas collision with multiple objects?

Question

So i am doing a flappy bird clone as coding exercise... and now i got to the part where i have to detect the collision bettwen the bird and the pipes. I would to know how would you suggest be the best way of detecting the collision of the bird with the pipes, taking into account that i am pushing the pipes into an array

this are the main parts of the code

 //Pipes proto that the bird most avoid
function Pipes(x1, y1, height1, width1, dx1, dy1, x2, y2, height2, 
width2, dx2, dy2) {

this.x1 = x1;
this.y1 = y1;
this.height1 = height1;
this.width1 = width1;
this.dx1 = dx1;
this.dy1 = dy1;

this.x2 = x2;
this.y2 = y2;
this.height2 = height2;
this.width2 = width2;
this.dx2 = dx2;
this.dy2 = dy2;
this.draw = function () {
    c.fillStyle = "green";
    c.fillRect(x1, y1, height1, width1)

    c.fillStyle = "green";
    c.fillRect(x2, y2, height2, width2)
}
this.update = function () {
    x1 += -dx1;
    x2 += -dx2;
    this.draw();
}
}

 function Bird(x, y, dx, dy, radius, color, flap) {
 this.x = x;
 this.y = y;
 this.dx = dx;
 this.dy = dy;
 this.radius = radius;
this.color = color;
this.draw = function () {
    c.beginPath();
    c.arc(x, y, radius, 0, 2 * Math.PI, false);
    c.fillStyle = color;
    c.fill();
};
this.update = function (){
    flap = false;
    x += dx
    //gravity manager
    var gravity = 0.4;
    y += dy
    dy += gravity;

    //Screen collision manager
    if (y + dy > innerHeight) {
        y = innerHeight - radius;
    }
    if(radius < crashObj.x1 || radius < crashObj.x2 || radius < 
     crashObj.x1){
    }
    this.draw()
}
};



//Main GameLoop
function animate() {
c.clearRect(0, 0, innerWidth, innerHeight);
//canvas Color
c.fillStyle = "#C5D3E2";
c.fillRect(0, 0, window.innerWidth, window.innerHeight);

//Updates pipes
for (var i = 0; i < pipesArr.length; i++) {
    pipesArr[i].update();
}
//draw and update bird into the screen
bird.update();

requestAnimationFrame(animate);
}

animate();

thanks in advance fo the answer!

Lucas Bebber · Accepted Answer · 2018-06-05 23:42:46Z

0

What you are looking for is a circle-rectangle collision.

User markE has posted an in-depth answer on how to achieve it, along with a JS Fiddle demonstrating it.

Then on the update function, run through all the Pipes and check each of them for collision. For example:

for(var i = 0; i < pipesArr.length; i++){
    ...
    if(RectCircleColliding(bird, pipe)){
        die()
    }
}

answered Jun 5, 2018 at 23:42

Lucas Bebber

2461 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

hmtl5 canvas collision with multiple objects?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related