You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

2.1 KiB

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 div at the position of the mouse on the screen, setting its background to white and its class to circle

  • 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

  • Create a function setBox which sets a box with the class box in the center of the page ; when a circle is inside that box, it has to be purple (use the CSS global variable var(--purple) as background) ; once a circle enters the box, it is trapped inside and cannot go out of it anymore.

Hint: Be careful, a circle cannot overlap the box which has walls of 1px, it has to be trapped strictly inside.

Notions

Provided files

You have at your disposal the following file that you can download to test locally:

  • the HTML file index.html to open in the browser, which includes:

    • the JS script which will allow to run your code
    • some CSS pre-styled classes: feel free to use those as they are, or modify them

Expected result

You can see an example of the expected result here