使用Javascript使动画精灵跟随鼠标上的光标

Question

这是我发布的第一个问题，所以请温和一点，哈哈。我正在尝试制作一个小游戏，在用户的网络摄像头上的画布元素上显示不同的动画精灵。现在我只是使用一个精灵来获得正确的功能。我只希望精灵出现并在按住鼠标左键时跟随鼠标。现在，精灵出现在mousedown上并设置动画，但如果我移动鼠标而不是跟随，它就会消失。我只想它在鼠标悬停时消失。我到处找答案，但一直找不到。这是我的js:

'use strict';
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const errorMsgElement = document.querySelector('span#errorMsg');
canvas.width = window.innerWidth;
canvas.height =window.innerHeight;
const constraints = {
//  audio: true,
video: {
//  width: 1280, height: 720
width: window.innerWidth,
height: window.innerHeight
}
};
// Access webcam
async function init() {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
} catch (e) {
errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}
// Success
function handleSuccess(stream) {
window.stream = stream;
video.srcObject = stream;
}
// Load init
init();
//Code for drawing sprite on Canvas
var image = new Image();
image.src = "Starsprite.png";
var ctx = canvas.getContext("2d");
let magic = false;
var spriteWidth = 187; 
var spriteHeight = 60; 
var rows = 1; 
var cols = 3; 
var width = spriteWidth/cols; 
var height = spriteHeight/rows; 
var curFrame = 0; 
var frameCount = 3; 
let x =0;
let y =0; 
var srcX=0; 
var srcY=0; 
function startPosition(e){
magic =true;
x =e.clientX;
y =e.clientY;

}
function movePosition(e){

ctx.clearRect(x,y,width,height);
x =e.clientX;
y =e.clientY;
}
function endPosition(){
magic =false;
ctx.clearRect(x,y,width,height);
}
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mousemove",movePosition);
canvas.addEventListener("mouseup", endPosition);
canvas.addEventListener("mousedown",draw);

function updateFrame(){
curFrame = ++curFrame % frameCount;                 
srcX = curFrame * width;  
}

function draw(){
if (!magic) return;
ctx.clearRect(x,y,width,height);
updateFrame();
ctx.drawImage(image,srcX,srcY,width,height, x,y,width,height);
console.log(x + ", " + y);

}

setInterval(draw,200);

movePosition函数确实更新了x&y坐标，但在鼠标移动时精灵不会显示。我尝试创建一个事件侦听器来运行mousemove上的draw函数，但它会打乱动画，因为每次浏览器更新鼠标位置时都会触发它。有什么解决这个问题的想法吗？

Answer 1

好的，所以我对它做了更多的工作，并为移动设置了动画，而不是试图再次调用函数。我是根据按键输入的动画说明来做这件事的。它工作得相当好，但如果我很快将鼠标移动到一个新位置，它不会一直跟着它。

//Code for drawing on Canvas
var image = new Image();
image.src = "Starsprite.png";
var ctx = canvas.getContext("2d");
let magic = false;
var spriteWidth = 187; 
var spriteHeight = 60; 
var rows = 1; 
var cols = 3; 
var width = spriteWidth/cols; 
var height = spriteHeight/rows; 
var curFrame = 0; 
var frameCount = 3; 
let x =0;
let y =0; 
let mousex =0;
let mousey =0;
var stillx =0;
var stilly =0;
var srcX=0; 
var srcY=0; 
var left =false;
var right =false;
var up = false;
var down = false;
var speed = 60;
var lift = 30;
var buffer = 100;

function startPosition(e){
magic =true;
x =e.clientX;
y =e.clientY;
}
function moveDirection(e){

stillx = x + buffer;
stilly = y + buffer;
mousex = e.clientX;
mousey = e.clientY;
if(mousex>stillx){
left = false;
right = true; 

}
if(mousex<stillx){
left = true;
right = false; 
}
if(mousey>stilly){
down = true;
up = false; 
}
if(mousey<stilly){
down = false;
up = true; 
}

}

function endPosition(){
magic =false;
ctx.clearRect(x,y,width,height);
}
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mousemove",moveDirection);
canvas.addEventListener("mouseup", endPosition);
canvas.addEventListener("mousedown",draw);
function moveSprite(){
if(right && x<canvas.width-width){
x+=speed; 
// x+=speed;
right =false;
}
if(left && x>0){
x-=speed; 
left=false;
}
if(down && y<canvas.height-height){
y+=lift; 
down=false;
}
if(up && y>0){
y-=lift; 
up=false;
}
}
function updateFrame(){
curFrame = ++curFrame % frameCount;                 
srcX = curFrame * width; 
moveSprite();

}

function draw(){
if (!magic) return;
ctx.clearRect(x,y,width,height);
updateFrame();
ctx.drawImage(image,srcX,srcY,width,height, x,y,width,height);


}
setInterval(draw,200);

如果有人有更好的解决方案，请告诉我！