Learn Rectangular Collision Detection in Javascript!
Why Stack Overflow recommends it
Stack Overflow users link it when answering JavaScript collision questions, especially to explain the simple 'are they NOT overlapping' axis-check logic for rectangles.
Recommended by 2 people across 2 different months, 2019 to 2020.
What it is
A short tutorial by PothOnProgramming that shows how to write a JavaScript function detecting collisions between arbitrary rectangles and squares. It covers detection only, not collision response, and links to source code and a live example.
What people said
Recommends Nihar Kashyap · 2019-06 · Stack Overflow · on “A maze game for touch-devices”
Judging by the example you gave you can do this by placing the walls around the item. Whenever the system detects collision with the walls movement of the item will stop. I have mostly used this functionality with Unity Engine so i am afraid i can't provide you with specific codes. Check this video: [this video] I think you will be able to figure this out after watching it.
Recommends John Lord · 2020-08 · Stack Overflow · on “Collision detection not working (Javascript)”
your actual collision detection can be simplified by reversing the logic to determine that they are NOT colliding and then reversing that. See this video: [this video] but basically if you are completely out of range in at least one of the cardinal directions, there is no collision.
Cites decod decod · 2019-04 · Stack Overflow · on “How to pass or bubble a click event to another layer?”
you could probably just implement a collision detector witch when a square is clicked will check the collision detector and it would return and array of all the elements which are being in collision with. [this video]