https://codepen.io/DraguLL/pen/gOXmJgo hola a todos, cómo cambiar el código para que el cuadrado se mueva a la posición del mouse en exactamente un segundo, sin importar dónde esté y dónde esté la posición del mouse
const myElement = document.getElementById('cir'); let x = 0; let y = 0; let xMouse = 0; let yMouse = 0; window.addEventListener('mousemove', e => { xMouse = e.clientX; yMouse = e.clientY; }); setInterval(() => { if (xMouse === x && yMouse === y) { x = xMouse; y = yMouse; } else { if (xMouse > x) { x++; } else { x--; } if (yMouse > y) { y++; } else { y--; } } myElement.style.top = y + 'px'; myElement.style.left = x + 'px'; }, 1); .cir { position: fixed; background: red; top: 10px; left: 10px; width: 10px; height: 10px; } <div class ="cir" id = "cir"></div>Puede usar setTimeout y luego usar la transición CSS para hacer ese efecto suave de punto rojo en movimiento.
const myElement = document.getElementById('cir'); let x = 0; let y = 0; let xMouse = 0; let yMouse = 0; let timer; window.addEventListener('mousemove', e => { xMouse = e.clientX; yMouse = e.clientY; clearTimeout(timer); timer = setTimeout(mouseMove, 1000); }); function mouseMove() { x = xMouse; y = yMouse; myElement.style.transition = "1s ease"; myElement.style.top = y + 'px'; myElement.style.left = x + 'px'; } .cir { position: fixed; background: red; top: 10px; left: 10px; width: 10px; height: 10px; } <div class ="cir" id = "cir"></div>