Necesito ayuda con un proyecto para la escuela si alguien está dispuesto esta es la tarea que usamos canvas-javascript'Cuando inicias el juego, se genera un círculo en el centro de la pantalla. Llamamos a ese círculo círculo principal; ● El jugador controla el movimiento del círculo principal moviendo el ratón. El círculo se mueve por el lienzo siguiendo la flecha del ratón. Más precisamente, es necesario mover el centro del círculo principal en la dirección de la posición actual del cursor en el lienzo a cierta velocidad (por ejemplo, 20px/s); ● El juego comienza cuando el jugador mueve el ratón (es decir, el círculo principal);
Dado que solo desea hacer un círculo que siga al mouse, una combinación de mousemove y clientX / clientY será una buena opción.
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>