Canvas-单击以指定速度将对象移动到单击的[x，y]

我正在寻找一个解决方案，但找不到任何好的，用简单的方式写的，我希望你能帮助我解决这个问题

我只想实现： ---onClick使用存储在变量中的指定速度完全转到单击的[x，y]坐标，例如速度

我在这里看到有人问类似的问题，但我无法理解。如果你知道答案，请用最简单的方式写出来。先谢谢你

var ctx=document.getElementById'canvas'.getContext'2d'； var cHeight=500； var cWidth=500； ctx.font='30px Arial'； var enemyList={}； 变量播放器={ x:50， y:50， spdX:1， spdY:1， 名称：“P”， hp:10 }; getDistanceBetweenEntity=functionentity1，entity2{ var vx=entity1.x-entity2.x； var vy=实体1.y-实体2.y； 返回Math.sqrtvx*vx+vy*vy； } testCollisionEntity=functionentity1，entity2{ var distance=getDistanceBetweenEntityentity1、entity2； 返回距离<30； } 敌人=功能ID，x，y，spdX，spdY{ var敌人={ x:x， spdX:spdX， y:y， 斯皮：斯皮， 名称：'E'， id:id } enemyList[id]=敌人； } updateEntity=functionentity{ 更新位置实体； 付款人实体； } updateEntityPosition=functionentity{ entity.x+=entity.spdX； entity.y+=entity.spdY； 如果entity.x<0 | | entity.x>cWidth{ entity.spdX=-entity.spdX； } 如果entity.y<0 | | entity.y>cHeight{ entity.spdY=-entity.spdY； } } 付款人=功能实体{ ctx.fillTextentity.name，entity.x，entity.y； } 更新=功能{ ctx.clearRect0，0，cWidth，cHeight； enemyList{ UpdateEntityEnmyList[键]； var isColliding=testCollisionEntityplayer，enemyList[key]； 如果碰撞{ //控制台。日志冲突！； } } 抽屉层； } 敌人“E1”、150、350、10、15； 敌人‘E2’、250、350、10、-15； 敌人‘E3’、250、150、10、-8； SetIntervalueUpdate，1000/30； document.onclick=functionmouse{ var mouseX=mouse.clientX； var mouseY=mouse.clientY； 而mouseX！==player.x&&mouseY！==player.y{ 如果mouseX=player.x{ player.x+=player.spdX； } 如果mouseY=player.y{ player.y+=player.spdY； } } } /* 我只是想实现： -单击“转到”以指定速度单击[x，y]，该速度将存储在变量中，例如var speed； */ 定速行驶 将当前目标x、y的两个属性添加到播放中。如果没有目标，则将其设为null

const player = {
    x: 50,
    y: 50,
    name: 'P',
    hp: 10,        
    targetX : null, // null for no target
    targetY : null,

添加一个速度值，以每帧60Fps像素为单位，使每秒10像素为10/60

    speed : 10 / 60,

添加一个功能，如果有目标集，将移动玩家

    update(){
        if(this.targetX !== null){

获取到目标的x，y距离，然后获取线性距离。如果距离小于速度，则你在那里，因此设置位置并使目标为空

            var xd = this.targetX - this.x;
            var yd = this.targetY - this.y;
            var distToTarget = Math.sqrt(xd*xd+yd*yd);
            if(distToTarget<= this.speed){
                 this.x = this.targetX;
                 this.y = this.targetY;
                 this.targetX = this.targetY = null;
            }else {

矢量xd，yd的长度为1像素。我们可以将其乘以速度，得到x和y方向上以该速度移动的像素数

                 xd *= this.speed;
                 yd *= this.speed;

更新播放机位置和功能结束，并关闭对象播放机

                 this.x += xd;
                 this.y += yd;
             }
         }
   }

当敌人追赶玩家时，你可以对他们执行同样的操作。你可以对他们使用同样的功能，但你只需将目标设置为玩家。让他们稍微沉默一点，这样只需每隔这么多帧设置一次目标，或者使用随机赔率测试，这可能是值得的。参见代码

此外，最好使用requestAnimationFrame而不是setInterval设置动画

我已经在下面重写了你的代码

var ctx=document.getElementById'canvas'.getContext'2d'； var cHeight=500； var cWidth=500； ctx.font='30px Arial'； //当您共享一些功能时，我将共享的功能放在一个单独的对象中 var sharedBehaviour={ x:50， y:50， targetX:null，//null表示没有目标 targetY:null， 速度：100/60， 更新{ 如果this.targetX！==null{ var xd=this.targetX-this.x； var yd=this.targetY-this.y； var distToTarget=Math.sqrtxd*xd+yd*yd； 如果距离目标{ 如果Math.random<1/300{//500分之一，则大约每5秒查找一次玩家 敌人。设定目标； } 敌我更新； 如果敌人.isOnPlayer{ //在这里做你需要做的事 player.hp-=0.1； 敌方.x=Math.random*canvas.width； y=Math.random*canvas.height； 敌方.targetX=null； } } player.update； //最好是全部更新，然后全部绘制 enemyList.forEachenemy=>{ 敌方平局 }; 牌手.平局； 请求动画框架更新； } 请求动画框架更新； 创建敌人'E1'，150，350，60/60； 创建敌人'E2'，250，350，60/60； 创建敌人“E3”、250、150、60/60； document.onclick=functionmouse{ player.targetX=mouse.clientX； player.targetY=mouse.clientY； }

---

这太棒了，我甚至把它打印出来进行分析

---

非常感谢：但我正在努力解决另一个问题，如何在document.onmousedown函数中检查鼠标是否移动并执行某些操作？我想将玩家移动到x和y，但当鼠标被点击并按住时，也会跟随鼠标的x和y。

                 this.x += xd;
                 this.y += yd;
             }
         }
   }