使用 Javascript 在 Mousedown 上制作动画精灵跟随光标

Question

这是我发布的第一个问题，所以请温柔一点，哈哈。我正在尝试制作一个小游戏，该游戏将在覆盖用户网络摄像头提要的画布元素上显示不同的动画精灵。现在我只是在使用一个精灵来获得正确的功能。我只希望精灵出现并在按住鼠标左键时跟随鼠标。现在精灵出现在 mousedown 上并动画，但如果我移动鼠标而不是跟随它就会消失。我只希望它在 mouseup 时消失。我已经到处寻找答案，但一直找不到。这是我的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 上运行绘图函数，但它弄乱了动画，因为每次浏览器更新鼠标位置时它都会触发。有解决这个问题的想法吗？

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);

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