I need some help with a project for school if anyone is willing this is the task we use canvas-javascript'When you start the game, a circle is generated in the center of the screen. We call that circle main circle; ● The player controls the movement of the main circle by moving the mouse. The circle moves across the canvas by following the mouse arrow. More precisely, it is necessary to move the center of the main circle to the direction of the current cursor position on the canvas at a certain speed (for example, 20px / s); ● The game starts when the player moves the mouse (ie the main circle);
Since you only want to make a circle that follow the mouse, so a combination of mousemove and clientX/clientY will be a good option.
let div = document.querySelector('#cursor')
document.querySelector('canvas').onmousemove = function(event){
//track mouse position and change for custom cursor
div.style.left = event.clientX-5+'px'
div.style.top = event.clientY-5+'px'
};canvas{
width: 50vw;
height: 50vh;
border: 2px solid red;
}
#cursor{
width: 10px;
height: 10px;
background: red;
position: absolute;
top: 25%;
left: 25%;
border-radius:50%;
}<canvas></canvas>
<div id=cursor></div>