How to detect collision

Question

I am doing a small game based on this tutorial http://code.tutsplus.com/tutorials/learn-createjs-by-building-an-html5-pong-game--active-11845

I made my changes but this line is buggy

if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75)

whenever the user hit it fast from the left or the right the ball keep bouncing even in the tutorial, the bug is there, can anybody help me with this ?

Thanks

Not quite sure I understand what the problem is - is it that the ball bounces when it shouldn't becaus the player missed ? — user2808054, Jun 09 '14 at 09:17
if you try the demo in the tutorial, when you hit the ball from the edge it bounces like multiple times it looks like its stuck — Peril, Jun 09 '14 at 09:54
Your line of code will properly determine if the ball is inside the players paddle. But if the ball is going fast enough it will pass through & beyone the paddle before you're testing for a collision. — markE, Jun 09 '14 at 14:33
@markE yes its exactly whats going on, is there's anyway I can fix it ? — Peril, Jun 09 '14 at 21:13
See this post http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection — GillesC, Jun 11 '14 at 08:56

score 3 · Answer 1 · answered Jun 17 '14 at 13:45

I think the easiest solution would be to add a direction variable to the ball and test it. If it's towards the player do the check you've coded, else ignore. If the check passes, change the direction when the player intercepts it. Then when it bounces back, change the direction again. This will also simplify your code a lot and reduce the number of checks going on.

score 2 · Answer 2 · answered Jun 17 '14 at 14:10

I have found right solution for your problum

you should add one more condition that is xSpeed<0 so that your if statement changes to as shown bellow

if(xSpeed<0 && ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75 )
{
    xSpeed *= -1;
    SoundJS.play('hit');
}

I have given you this solution after testing the code.

score 1 · Answer 3 · answered Jun 11 '14 at 08:55

I think this is because ball goes in too far for some reason and it does multiple *= -1; run.

so you should measure distance and bring it back and then *= -1

code would be like this:

if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75)
{   
    ball.x += ball.x-player.x;
    xSpeed *= -1;
    SoundJS.play('hit');
}

so then we can make sure ball is out whenever it is inside bar.

** edited code from the link you posted.

score 1 · Answer 4 · edited May 23 '17 at 12:00

There are two main methods of detecting collisions in 2D:

Pixel by pixel. You should use this method only if you have complex shapes, because this algorithm has O(Height*Width) complexity where Height and Width are sizes of smaller sprite in pixels.
By formulas. You should always use this method when possible. This will usually result in O(1) complexity.

In your case ball is circle(obviously) and player is rectangle, I think.

Answer to question "How to check by formulas if rectangle and circle intersect?" was answered here.

score 0 · Answer 5 · answered Jun 18 '14 at 07:45

Umm If the problem is that the "too fast" ball will go inside paddles, you have three options:

make collision tests with mathematics ie. calculate if the ball will draw a line through the paddle during the current timestep.
make the timestep smaller , ie move the ball in smaller increments and collision check each step.
make the timestep adaptable , so it gets smaller when stuff gets faster and the ball will move approximately the same amount per timestep, regardless of it's speed.

How to detect collision

5 Answers5