Collision detection without using canvas

Question

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

Answer 1

https://code.sololearn.com/WDhSn98SlX3b/?ref=app

Answer 2

Calviղ 😊thank you so much 🌹

Answer 3

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

Answer 4

Gordon thanks a bunch 😊 I wrote style.back... but forgot to write else😁🌷🌹

Answer 5

Cbr✔[ ZeroCharisma ] thanks 😊 I can't do that😁 but I'll look at it🌹

Answer 6

Coder yesss😁 they are genius like you👌👍🌹

Answer 7

Anton Böhler wow thanks alot🌹🌹, I should analyze it for myself 😃

Answer 8

Mike Perkowski thanks for the new method 🌹😊

Answer 9

Anton Böhler If there weren't any circles, does this function work with any shapes? I don't think so, because it has r 😁

Answer 10

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.

Answer 11

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)

Answer 12

https://code.sololearn.com/W9iSz3A0HOE1/?ref=app

Answer 13

here collisions between circles rectangles and points:
https://code.sololearn.com/WMg5JEA2551G/?ref=app

Answer 14

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.

Answer 15

Hi