How to check image collision in js?
I already made an image follow the mouse, but how can I check it?
I'm making a minecraft pickaxe brake a cobblestone (that's for my friend's bday)
7 Replies
What is the part you are missing? Getting the dimensions of both objects? Compare the dimensions of the objects if they are intersecting?
For the latter I would try IntersectionObserver first.
it might be enough to just do a mouseover event on the cobble that checks if you have the pickaxe? Hard to tell without code.
the code is made of a ton of stuff including video calling, that's the mouseover (follow image)
window.addEventListener('mousemove', (event) => {
const mouseX = event.pageX;
const mouseY = event.pageY;
const pickaxe = document.getElementById("pickaxe");
pickaxe.style.display = "block";
pickaxe.style.position = "absolute";
pickaxe.style.left = mouseX+"px";
pickaxe.style.top = mouseY+"px";
const cobblestone = document.getElementById("cobblestone");
});
I think it'll just check the mouse position
Get the bounding box and use AABB collision detection
Or just use AABB with an imaginary box around the cursor
what's AABB collision?
and I finished the site
but just for the next time
Axis-Aligned Bounding Box (2 rectangles that haven't been rotated)
any reason you can't just do this? https://codepen.io/jochemm/pen/abXvJmj