Is my idea of collision detection correct?

I am creating brick breaker game for my project, I need to use limited three.js.

My idea is to create function which runs with every update = setInterval(‘draw()’, 12);

This function will check position of ball and every brick.

Whenever brick is created variable ‘count’ is increased, and whenever ball is detected near brick area it will destroy it and reduce ‘count’ by 1, rest of the bricks will be rearranged by -1.

For example if count = 5 and brick number 3 gets destoyed, brick 4 becomes 3 and brick 5 becomes 4, count–.

But how about hitboxes?

Should I create x, y, width and height variables for every object or is there an easy way to detect it from object properties?

If anyone wants to see code

main: https://pastebin.com/cwnQFpu5

three.js (some of it is in main): https://pastebin.com/6WC06FWi

Hi, welcome to three.js !

This is a perfect use-case for Axis-Aligned Bounding Box (AABB) collision detection.
Check this video, the guy explains everything : https://www.youtube.com/watch?v=ghqD3e37R7E

Besides, if you are doing a brick game, you can expect the ball to sometimes go through bricks undetected if you don’t check for collision 120 times/sec.
I had this issue for which I asked for help here.
The issue was solved by updating game state several times per frame, depending on frame rate, by putting this into the function that get called with requestAnimationFrame :

delta = clock.getDelta();

ticks =  Math.round( delta / ( 1 / 120 ) );

for ( let i = 0 ; i < ticks ; i++ ) {

    updateGameLogic( delta / ticks );

};

You just have to update the position of the ball then check for collision into the function “updateGameLogic”.

2 Likes