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

Here is a good book on the subject: 2D Game Collision Detection: An introduction to clashing geometry in games by Thomas Schwarzl

It can be found e.g. here http://www.amazon.de/2D-Game-Collision-Detection-introduction/dp/1479298123/ref=sr_1_1?ie=UTF8&qid=1448932508&sr=8-1&keywords=2d+collision

If you can handle rectangular collision, try to fill up the shape of your complex figure with rectangles and test each one of them. In your case try to use a circle for the bird.

Answer 2

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!