Javascript 以每秒相同的速度向鼠标移动div

我创建了以下代码，让玩家朝鼠标移动

代码

var mouseX = 0, mouseY = 0;
$(document).mousemove(function(event) {
    mouseX = event.pageX;
    mouseY = event.pageY;
});

$(function(){
    var $map = $(".map");
    var $player = $('.player');

    var centerPlayerX = $player.offset().left + $player.width() / 2;
    var centerPlayerY = $player.offset().top + $player.height() / 2;

    var movingInterval;
    $('.map').on('mousedown', function(event){
            movingInterval = setInterval(function(){
            var clickedPosX = mouseX,
                clickedPosY = mouseY;

            var currentMapPositionX = parseFloat($map.css("background-position-x"));
            var currentMapPositionY = parseFloat($map.css("background-position-y"));

            var moveMapX = currentMapPositionX - clickedPosX/100 + centerPlayerX/100;
            var moveMapY = currentMapPositionY - clickedPosY/100 + centerPlayerY/100;

            $map.css({ "background-position-x": `${moveMapX}px`, "background-position-y":  `${moveMapY}px` });

            var angle = getDirection(centerPlayerX, clickedPosY, clickedPosX, centerPlayerY);
            $player.find('.ship').css('transform', 'rotate('+angle+'deg)');
            }, 10);
    }).on('mouseup', function() {
           clearInterval(movingInterval);
        });;
});

function getDirection(x1, y1, x2, y2){
  var dx = x2 - x1;
  var dy = y2 - y1;

  return Math.atan2(dx,  dy) / Math.PI * 180;
}

问题

    var moveMapX = currentMapPositionX - clickedPosX/100 + centerPlayerX/100;
        var moveMapY = currentMapPositionY - clickedPosY/100 + centerPlayerY/100;

---

问题是我想以设定的速度（px*ps）移动播放器。当前，当玩家将鼠标移离图像更远时，玩家的速度将增加。我目前不知道如何以设定的速度移动玩家。因此，我需要以某种方式删除clickedPosY/X，并将其更改为静态速度，但如果鼠标移动，图像仍应朝前移动，这就是问题所在；您要做的是沿运动矢量投影速度常数。最简单的方法是根据单击点和移动基准之间的速度与距离的比率，将偏移的组件缩放到单击位置：

var distanceX = clickedPosX - centerPlayerX;
var distanceY = clickedPosY - centerPlayerY;

var magnitude = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
var deltaX = distanceX * speed / magnitude;
var deltaY = distanceY * speed / magnitude;

var moveMapX = currentMapPositionX - deltaX;
var moveMapY = currentMapPositionY - deltaY;

---

那么，假设你有一个速度常数；您要做的是沿运动矢量投影速度常数。最简单的方法是根据单击点和移动基准之间的速度与距离的比率，将偏移的组件缩放到单击位置：

var distanceX = clickedPosX - centerPlayerX;
var distanceY = clickedPosY - centerPlayerY;

var magnitude = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
var deltaX = distanceX * speed / magnitude;
var deltaY = distanceY * speed / magnitude;

var moveMapX = currentMapPositionX - deltaX;
var moveMapY = currentMapPositionY - deltaY;

---

我认为您需要使用$（window）.height（）/width（）创建一个公式，然后确定鼠标位于屏幕的哪个象限，然后您可以使用该值填充一个静态速率进行减法，从而将背景移动到正确的方向。这就是我所想的，它需要更多的工作，因为在不稳定的象限之间转换；我认为您需要使用$（window）.height（）/width（）创建一个公式，然后确定鼠标位于屏幕的哪个象限，然后您可以使用该值填充一个静态速率进行减法，从而将背景移动到正确的方向。这就是我所想的，它需要更多的工作，因为在不稳定的象限之间转换；太棒了！太棒了！