Is it possible to make a collision detection without the use of canvas?

Question

I'm planning to make a game (CSS) which contains a collision detector. I am seeing codes with it but it has canvas. But I am going to sketch the i.e cars with the use of CSS.

Answer 1

Not exactly conventional...but take a look at this code 😅

function in line 112 (checkHits()) checks collision between two divs

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

Answer 2

if you want to check collision between 2 rectangles, the algorithm is something like this...

if(rect1.x < rect2.x + rect2.w &&
rect1.x + rect1.w > rect2.x &&

rect1.y < rect2.y + rect2.h &&
rect1.y + rect1.h > rect2.y)
//collision detected

here the h is for height and w for width

Answer 3

I use css + js (no canvas)
https://code.sololearn.com/W6vPM3o9ysIv/?ref=app

Answer 4

Ehab Samir Thanks man!

Answer 5

It's done with the "element.getBoundingClientRect()" method:

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

Answer 6

Md. Nafis Ul Haque Shifat
How about the x and y? Is that a built-in syntax?

Answer 7

There are multiple ways to get the co-ordinates, like using offsetLeft and offsetTop

Answer 8

Good question 💖💕. Thank you for your information 🙌🤗

Answer 9

https://code.sololearn.com/W1m4HcvBiN8b/?ref=app
look at my code here for moving ball that detects four corners around the screen and apply collision rules .. I didn't need a canvas