How to check if an object is hitting another object during animation.

Question

Hello and thanks for your time and help. I am building a mini golf game using HTML 5 Canvas. I have a golf ball that is able to be hit around with a specific power and direction and stoping and slowing down accordingly.

However, i am stuck on finding a optimal way of detecting wether the ball is hitting or over an obstacle on the course. I have each of the obstacle objects stored in an array. So it is easy to access the x,y,height, and width of the object. I was thinking it would be best to have a for loop that goes through each of the objects checking if the ball is hitting any of them during animation. Also the x and y of the golf ball is easily accessible, its values are stored in a dictionary.

Any suggestions of testing to see if any of the obstacles are being hit?

Here is the code on how i am testing for the boundaries and having the ball bounce back correctly

function animateGolfBall(timestamp){
    if(powerBar.widthChange != 0){
        context.clearRect(0, 0, canvasTag.width, canvasTag.height);    

        if (golfBall.x > canvasTag.width - 5 || golfBall.x < 5 ) {
           golfBall.angle = 180 - golfBall.angle;
           updateGolfBall();
           drawEverything();
        } 

        else if (golfBall.y > canvasTag.height - 5 || golfBall.y < 5) {
            golfBall.angle = 360 - golfBall.angle;
            updateGolfBall();
            drawEverything();
        }
        else{
            updateGolfBall();
            drawEverything();
        }

        window.requestAnimationFrame(animateGolfBall);
        powerBar.widthChange -= 1;
    }
    else{
        golfBall.isMoving = false;
        drawEverything();
    }
}

Here is the code where the obstacles are being redrawn, and where i believe the check should be placed to see if the golf ball is hitting them

function drawObstacle(){  
    for(var i = 0; i < obsticles.length; i++){
        obsticles[i].createSquare(obsticles[i].squareX/canvasTag.width,
                                  obsticles[i].squareY/canvasTag.height,
                                  obsticles[i].squareWidth/canvasTag.width,
                                  0,
                                  obsticles[i].squareHeight/canvasTag.height,
                                  0,"pink",3,"yellow"); 


       // if { need help with logic here

            //And what to put here, and how ever many logical statements will be needed    

       // } 

}

Any help or tips would be much appreciated. If you need more code or i wasn't clear on something please let me know and ill update my question.

score 1 · Accepted Answer · answered Nov 09 '15 at 00:01

1

This is called collision detection. There are many ways to deal with collisions. Depending on the shape of your objects (are they circles or squares or car-shaped) and what you want to happen when a collision occurs. Does the ball bounce back? Does it stop? Is it of the most importance that the collision is detected at the edge of the object?

You can read about simple collision detection working with either square or circle shaped objects here.

answered Nov 09 '15 at 00:01

Tobias Beuving

630
6
18

Very much appreciate the information. The objects will be squares, and yes if a collision occurs would like the golf ball to bounce back in respect to laws of physics, i,e at the proper angle in which it hits the square. It will be a circle hitting a square, since the golf ball is a circle and the square is the obstacle. The link looks very helpful, i am going to read up on it now – Jared Smith Nov 09 '15 at 01:32
The link discusses squares hitting squares and circle hitting circles, but not circle hitting squares. As far as you can tell, can I apply square hitting square logic but using the circles information such as x,y,width, and height (diameter). For example, do you see any problem using the square collision logic but for the circle use diameter to make a square around it simply for collision testing. The square will not appear on the game. – Jared Smith Nov 09 '15 at 01:42
Yes you can do it either way, each has it's drawbacks. You can also combine them, it is up to you. Maybe first implement one of them and then go from there. There is a thread about it, check it out - it has lots of info: http://stackoverflow.com/questions/401847/circle-rectangle-collision-detection-intersection – Tobias Beuving Nov 09 '15 at 02:43
Awesome, very much appreciated. I got the first example to work with making a square around the ball example. So thanks, ill mark the your answer correct. I'll also look into the thread. My issue now is that it knows if it its the square from the side, and it will bounce back correctly, however, if it hits it from the the top, nothing happens. Can you see a way to know if the side is being hit or the top is being hit, or how I can modify the square collision example from the link your provided to detect that? Since if the ball hits from the top I need to adjust the angle differently. – Jared Smith Nov 09 '15 at 02:57
My intuition says to break up the if statement into two statements, i am going to try that now and see what happens. – Jared Smith Nov 09 '15 at 02:59
for that you can use direction vectors i will look into it tomorrow, i am on my phone in bed now :-) cool to hear you got something working already! :-) – Tobias Beuving Nov 09 '15 at 03:04
Any more info would be very much appreciated, thanks! Have a great night, and thanks again for all your help :) – Jared Smith Nov 09 '15 at 03:42
I have been looking at some articles, and this might be a nice one to start with. https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls – Tobias Beuving Nov 09 '15 at 10:19
In the example the ball bounces off the walls, but you can easily use that approach to have it bounce of rectangular shapes. Next thing you want (probably) is gravity and acceleration, this somewhat more comlpicated, this is a fiddle I forked from someone a while ago. If you click 'add obstacles' you'll see some objects where it will bounce off off: http://jsfiddle.net/tobiasbeuving/ZmyGc/ – Tobias Beuving Nov 09 '15 at 10:23
Very much appreciated good sir, this is exactly the info I needed to see, and I think it adds great information as a whole to the initial question. I will work on it more after reading and playing with these examples. Thanks a ton for your time and help! – Jared Smith Nov 10 '15 at 02:21

How to check if an object is hitting another object during animation.

1 Answers1