更改元素及其父元素在javascript中的位置

$player

位于屏幕中央，可以沿鼠标角度方向360度连续移动，当我移动它时，我也会改变

$map

在相反方向的位置，将播放器保持在中央，并在地图中创建“移动”效果

这是在mousedown上启动的：

var top1 = $map.offset().top;
var left1 = $map.offset().left;
var top2 = ($player.offset().top - $player.height()/2) - ($map.offset().top);
var left2 = ($player.offset().left - $player.width()/2) - ($map.offset().left);

if(interval1 == 'false'){
    interval1 = setInterval(function(){
        var speed = 1;
        var deltaX = Math.cos(angle * Math.PI / 180) * speed;
        var deltaY = Math.sin(angle * Math.PI / 180) * speed;

        $map[0].style.left = (left1 -= deltaX)+'px';
        $map[0].style.top = (top1 -= deltaY)+'px';
        $player[0].style.left = (left2 += deltaX)+'px';
        $player[0].style.top = (top2 += deltaY)+'px';
    }, 1);
}

我在mouseup上这样做：

clearInterval(interval1);
interval1 = 'false';

问题是，每次我向下发射鼠标时，它都会给玩家增加一些小间隙，所以每次单击鼠标时，它都会从中间移动一点

---

我如何解决这个问题？如果你有2D游戏，我不知道是什么产生了间隙…

对于每个对象，你必须存储全局坐标，这些坐标与地图位置无关。然后通过对象坐标和“摄影机位置”，您可以计算对象的精确渲染坐标。

由于设置间隔延迟时间太短，您可能会遇到间隙问题。浏览器无法将每一步都画得那么快。尝试用

100

而不是

1

来测试它。它可能无法解决您的问题（您的示例不是an），但不要同时移动这两个对象，因为将浮点转换为整数会使错误更加复杂-为什么要让它变得更糟？只需移动地图。显示的代码永远不会清除间隔。如果在每次鼠标下移事件上创建一个新的间隔，而不取消上一个间隔，则会出现问题。@Tibrogargan我需要更新玩家位置，我不能只移动地图。如何修复浮点/整数转换？@neoDev你为什么不能移动地图？玩家图标的屏幕坐标与玩家在地图上的位置关系不大。当玩家通过单击移动地图来移动地图坐标时，只需移动地图，使玩家的新地图坐标位于屏幕坐标之下。根本不要移动玩家的图标

移动地图“西”10像素

的效果与

移动地图“西”5像素、移动玩家“东”5像素

或

移动玩家“东”10像素

的效果相同。如果你尝试移动11个像素，情况就不同了。