In this game, you will get acquainted with Grasped. The idea is simple: 5 circles move around the screen in random directions. If a circle reaches the edge of the screen, it bounces back so it does not go out of bounds. As soon as you, the player, click a circle, it disappears.

In the Grasped sandbox, we have 2 global variables: canvas and ctx. These are instances of the classic JavaScript Canvas and Context2D classes. You can freely use them for drawing on the screen. However, for more convenient work with the platform, Grasped also provides an API, which is a wrapper around the standard functionality. It includes functions such as drawLine, drawArc, and so on. For this task, we will need the drawArc function, which helps us draw a circle.

To handle mouse events, we can use the standard JavaScript API:

canvas.addEventListener('click', (e) => { ... })

To make a circle bounce off a wall, it is enough to change the sign of the velocity along the axis where the circle went out of bounds. For example, if it goes past the horizontal boundary, you should do dx = -dx.

To determine whether we clicked a circle, we can use the circle coordinates and the mouse click coordinates to calculate the distance from the center of the circle to the mouse position using the Pythagorean theorem, and then compare that distance with the radius. If the distance is smaller, we hit it.

To make things easier, each task comes with a starter file containing TODO comments that help you find the exact place where changes need to be made.

As you can see, working with Grasped is not difficult. Try using the sandbox and implement this task yourself!