Question

$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';

问题是，每当我点燃mousedown时，它会给玩家增加一些小空隙，所以每次点击它都会从中心移动一点......

如何解决此问题？我无法弄清楚是什么造成了这个差距......

Answer 1

由于您的setInterval延迟时间太短，您可能会遇到间隙问题。浏览器无法快速绘制介于两者之间的每一步。尝试使用100代替1

进行测试

Answer 2

如果您有2D游戏 - 对于每个对象，您必须存储全局坐标，这与地图位置无关。然后通过物体坐标和摄像机位置＆＃34;您可以计算对象的精确渲染坐标。

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

2 个答案: