Question

我有一个非常简单的动画：http://jsfiddle.net/k5uf9bm5/

我有一个矩形（播放器），当我点击某个地方的文件时，玩家会朝着目标位置移动。

问题在于它无法达到它 - 它无休止地来回振荡。

这对我来说很奇怪，因为它总是在其他语言中工作，实际上与其他游戏使用的实现类似。什么可能成为我的问题？

这是代码，为了完成问题：

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var pos = {x: 0, y: 0}
var target = null
var $player = $("#player")

$(document).click(function(e) { target = {x: e.pageX, y: e.pageY} })

function update() {
    $player.css({left: pos.x + 'px', top: pos.y + 'px'})

    if(target) {
        var dx = target.x - pos.x
        var dy = target.y - pos.y
        var len = Math.sqrt(dx*dx + dy*dy)
        dx /= len
        dy /= len

        /*var theta = Math.atan2(target.y - pos.y, target.x - pos.x)
        var dx = Math.cos(theta)
        var dy = Math.sin(theta)*/

        pos.x += dx
        pos.y += dy
    }

    setTimeout(update, 25)
}

update()
</script>
<style>
#player {
  position: absolute;
  width: 15; height: 15;
  background-color: black;
}
</style>
<body>
<body>
  <div id="player">x</div>
</body>
</html>

Answer 1

你好像错过了休息状态。 len包含目标距离。

 var len = Math.sqrt(dx*dx + dy*dy)

在你的代码中你总是朝着单位向量的目标移动..现在假设到目标的距离是3.5个单位..那么你将永远围绕目标振荡。在步骤4，您将超过0.5。然后在步骤5下冲0.5，依此类推......

你应该确保如果len <1然后不除以它，只需使pos等于目标位置，然后停止调用更新。

如果len == 0

，这也将解决可能除以零的问题

Answer 2

这让我想起了我前一段时间给出的答案看看我的answer :)。

问题是关于角度，但是如果你看看他的小提琴，你会看到他的跟踪也在摆动。
在我的小提琴中，它没有（好吧，它也加速和减速，并且我认为......有更好的转向）。

更具体地说，我有这样的事情：

// time to decelerate
if (distance <nextDecleration ){
   nextDecleration = decelerate(distance);
 }
// within 10 px, do nothing
else if (distance -10 < nextDecleration)       { 
  // do nothing
}
// bigger than 10, accelerate
else {
  nextDecleration = accelerate(distance);
}

这意味着：如果你对这一点有所了解，那就足够了。停在那里。

朝向一个方向的运动在接近目标时振荡

2 个答案: