public/subjects/mouse-trap

Mouse trap

Instructions

Develop a trap to capture the elements when the mouse is getting too close to the center of the page!

• Create a function createCircle: make it fire on every click on the page, and create a white circle at the position of the mouse on the screen

• Create a function moveCircle: make it fire when the mouse moves, and get the last circle created and makes it move along with the mouse

• Set a box in the center of the page ; when a circle is inside that box, it has to be purple ; once a circle enters the box, it is trapped inside and cannot go out of it anymore.

Notions

• addEventListener(): click, mousemove
• removeEventListener()
• Mouse event: click, mousemove / clientX, clientY
• getBoundingClientRect()

Expected result

You can see an example of the expected result here