Game Ball passing through a paddle in a pong

Question

I am making another pong clone using HTML5 and JavaScript canvas. The problem I am facing can be better described in this diagram:

If the ball moves at a speed of 10 pixels per frame, I can’t just check if the ball touches the blade, since it is possible that the ball exceeded the paddle in this step of the frame.

Is there any way to check if the ball collided with an oar?

Edit: The only 2 solutions that I can think of right now are as follows:

or

Answer 1

you can detect collisions by determining whether the line defined by the paddle and the incremental transit line intersect. If so, then you can apply the failure logic at the intersection.

Hope this helps.

Bean

Take a look here:

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

Remember that geometry is simpler because you have a vertical line as a paddle. Here is a simplification (check out 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 that this is the most effective approach and will give an accurate answer. Moving diagonally through a matrix of pixels will lead to artifacts if you do not have enough resolution.

Answer 2

Complex decision, vector material.

A simple solution, instead, if you move the ball just by adding 10px, move it 1px 10 times and each time check if it collides:

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

Answer 3

Each time your ball jumps ten pixels, you need to calculate each position between them to make sure that it is not trying to pass through a solid object, as you saw, happen.

Answer 4

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

You just need to see if x + dx goes along the x-coordinate of the paddle, say 600, and if so, then for simplicity, let's say 2/3 dx is required to get there, so you can use y + dy * (2 / 3) to find out y where the ball will end when the ball reaches the x-coordinate of the blade.

If this y is less than the top of the paddle (top y) or larger than the bottom of the paddle (bottom y), then this is a miss. Otherwise, it’s a blow.