Hi guys, I want to make a collision detection without using canvas just with JavaScript (not JQuery or...), Is there anyone who can write a ***simple*** code (functions or algorithms) for that. I haven't written the code yet but for example imagine one shape is moving automatically and you control the second shape movement, then when it collides with the first shape, the color of first or second shape changes. (I just want the collision code)
p.s. I found this related question๐ but the answers are kinda complicated ๐
https://www.sololearn.com/Discuss/1503786/?ref=app
Gordon thanks alottt I think it's a bit close to my code๐๐น, but why <20 ? and how can we write change color to blue when they hit then when they separate their colors black to their first colors , instead of console.loge collided
It looks like this has already been adequately answered but I haven't seen any mention of the element.getBoundingClientRect() method. This method returns the left, top, right, bottom, x, y, width and height values in pixels for the element it is called on. It's really useful for locating the bounds and position of an element for collision detection.
collisions don't require the canvas at all, they require math ๐
collision between two circles:
function circleCollision(c1, c2){
return Math.hypot(c1.x - c2.x, c1.y - c2.y) < c1.r + c1.r;
}
(c1 and c2 are circles with attributes x, y, r)
the formula is the same as the one Anton provided.
the unit of my circles are in a viewport unit vmin.
in css, i have set them both of width /height 20vmin, so i know that they are of radius 10 vmin each, so the sum is 20.
for changing color, just replace the report "collided" in console with setting red.style.background and green.style.background
and add an else to handle changing their colors back.
