Javascript collision detection: Flappy bird

Question

Hi! I'm making a flappy bird game, but I don't know how to add collision detection. I have tried, but it didn't work.
Does anybody know how to do that?
https://code.sololearn.com/WogHY84VAFKi/?ref=app

Answer 1

this post may help you

https://www.sololearn.com/discuss/1860772/?ref=app

Answer 2

answer part 1

if you treat both as rectangle, check their corners.
https://code.sololearn.com/WOSkh92TwAYI/?ref=app

if you treat both as circles, check their center distance against sum of radius, with Math.hypot()
https://code.sololearn.com/Wox0V9foOMk4/?ref=app

the advanced way, edge-Tracking :
https://code.sololearn.com/WCwKdRy210Ga/?ref=app

Answer 3

answer part 2

at the condition pseudo as collision detection currently (your current line 77), you can replace it with a method named isCollided().

you can do it in three approaches:

1. a Player method accepting a Pipe, that is

bird.isCollided(pipes[i]);

2. a Pipe method accepting a Player, that is

pipes[i].isCollided(bird);

3. a function named accepting two parameters, a Player and a Pipe, that is,

isCollided( bird, pipes[i]);

Either one way will work. As a demonstration, I will use a global function.

https://code.sololearn.com/Wk40ZxE8lcH4/?ref=app

Answer 4

answer part 3

Next, suppose you are treating both as rectangles, and hard code checking the four corners.

to check the corners of player inside the pipe or not.

as a demo of checking corner of square player inside pipe or not, the upper left corner is checked like this :

https://code.sololearn.com/WctetBrJL5On/?ref=app

you can try to follow this approach to finish the other three corners first.

as it is quite clear now, in order not to spoil your fun of achievement, the rest is left for your exercise.

however, if you can't work it out, tag me so i can come back.

Answer 5

Gordon

https://code.sololearn.com/WAjzJ95mx3uQ/?ref=app

Answer 6

You can simply add the same string for collision which you have applied for the bird crashing on ground

Answer 7

nice variation for flappy bird specifically. i can see that you have understood the concept quite well.

just one point of improvement : no need to check the always true

https://code.sololearn.com/W38JXkt2K867/?ref=app

explicitly,

when you compare whether the bird hits the upper part, you don't need to check whether the player is below 0

same for lower part, no need to check above height - 50 (ground)