I'm making another Pong clone using HTML5 canvas and JavaScript. The problem I'm having can best be described in this diagram:

If the ball is moving at 10px per frame, I can't just test if the ball is touching the paddle, as it is possible that the ball has surpassed the paddle in that frame-step.

Is there any way to test if the ball has collided with the paddle?

Edit: The only 2 solutions I can think of at the moment are:

or

I'm making another Pong clone using HTML5 canvas and JavaScript. The problem I'm having can best be described in this diagram:

If the ball is moving at 10px per frame, I can't just test if the ball is touching the paddle, as it is possible that the ball has surpassed the paddle in that frame-step.

Is there any way to test if the ball has collided with the paddle?

Edit: The only 2 solutions I can think of at the moment are:

or

• javascript
• html

Share Improve this question Follow edited Dec 5, 2010 at 22:49 Matthew Crumley 103k2424 gold badges104104 silver badges131131 bronze badges asked Dec 5, 2010 at 15:25 mikemike 11033 silver badges77 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

you can detect collisions by determining if the line defined by the paddle and the incremental transit line intersect. If they do, then you can apply the bounce logic at the intersection point.

Hope that helps.

Bob

Take a look here:

http://mathcentral.uregina.ca/QQ/database/QQ.09.97/parsons1.html

Remember you geometry is simpler because you have a vertical line as the paddle. Here is the simplification (check my math here):

// line 1 (x1,y1) to (x2,y2)
var x1 = -1.0;
var y1 = 1.0;
var x2 = 1.0;
var y2 = -1.0;
// line 2 (x3,y3) to (x4,y4)
// note: this is the paddle and y3=y4
var x3 = -1.0;
var y3 = 0.5;
var x4 = 1.0;
var y4 = 0.5;

​var ix, iy;
function calculateIntersection(){
  var ixtop = x1*(y2-y3) + x2*(y3-y1);
  var ixbot = y2 - y1;
  var ix = ixtop/ixbot;

  var iy = y3;
}​

I believe this is the most efficient approach and will provide an accurate answer. Moving diagonally through the pixel matrix will result in artifacts if you don't have sufficient resolution.

Complicated solution, vector stuff.

Simple solution, instead if moving the ball by simply adding 10px, move it by 1px 10 times and check each time whether it collides:

for(var i = 0; i < 10; i++) {
   moveBallByOne();
   if (ballCollision()) { // you could check for a simple bounding box overlap here
       invertBallDirection();
       break;
   }
}

Every time your ball hops ten pixels, you have to calculate each position in between to make sure it isn't trying to pass through a solid object, as you have seen will happen.

I assume you either have a dx and dy which is the delta of the ball coordinate per movement, or an angle (say θ = theta), so in this case dx is 10 * cos(th) and dy is 10 * sin(th).

You just need to see, whether x + dx is past the paddle's x-coordinate, say 600, and if so, for simplicity, say it takes 2/3 of dx to reach there, so you can use y + dy * (2/3) to find out the y where the ball will end up, when the ball reach the x-coordinate of the paddle.

If that y is less than the paddle's top edge (the top y), or greater than the paddle bottom edge (the bottom y), then it is a miss. Otherwise, it is a hit.