Collision with image (irregular shape)

Question

I'm currently making flappy bird and I changed it from just rectangles to my own images and such. I can't seem to figure out how to do it so when the bird (irregular shape) hits the rectangle, it dies. I don't know how to code for a collision when it's a weird shape. Here's an image. I draw the bird like this.

var img = document.getElementById("bird");
brush.drawImage(img, 20, this.y);

Attached is a picture of the game, the bird, and the code.

Answer 1

You need to implement colliders. They are ready to use in game-engines such Unity, but if you want to implement this yourself consider the following:

1. Create colliders components for your bird and walls. Collidiers are simplified shapes to make collision detection algorithms easier and faster regarding to CPU speed. For example, for bird it can be circle around it and rectangles for your walls.
2. During your Update frame event check whether your bounding circle of bird intersects with wall rectangles. It is simple mathematics, you can find formulas for "circle rectangle intersection" in google.
3. If collision is detected - your bird should crash down )

That's it!