使用 Javascript 在 Mousedown 上使動畫精靈跟隨 cursor

Question

這是我第一個發布的問題，所以要溫柔哈哈。 我正在嘗試制作一個小游戲，該游戲將在 canvas 元素上顯示不同的動畫精靈，該元素位於用戶的網絡攝像頭提要上。 現在我只是在使用一個精靈來獲得正確的功能。 我只希望精靈在按住左鍵時出現並跟隨鼠標。 現在精靈出現在 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 function 確實更新了 x & y 坐標，但鼠標移動時精靈不顯示。 我嘗試創建一個事件偵聽器以在 mousemove 上運行繪圖 function，但它弄亂了 animation，因為它每次瀏覽器更新鼠標 position 時都會觸發。 關於解決這個問題的任何想法？

Answer 1

好的，所以我在這方面做了更多工作，並為運動設置了動畫，而不是再次嘗試調用 function。 我基於動畫按鍵輸入的說明。 它工作得相當好，但是如果我將鼠標快速移動到新的 position 上，它就不會一直跟隨它。

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

如果有人有更好的解決方案，請告訴我！