2

正如您在此 JSFiddle 中看到的那样：http: //jsfiddle.net/EychPixels/pABPv/1/，当您使用箭头键移动角色直到视图区域随之移动时，角色似乎向后移动 1 格然后向前1个瓷砖。有没有办法解决这个问题，比如用角色为视图区域设置动画？对于我用 jQuery 使用的角色动画.animate，是否可以对视图区域做同样的事情？如果是这样，我可以使用我的代码查看此示例吗？

如果您需要更多详细信息来回答问题，请询问。

4

1 回答 1

1

对于您当前的代码，阻力最小的路径（即需要更改更少代码的方式）将是now在动画期间传递给绘图函数，如果视口也应该动画。然后您可以按照@jimjimmy1995 的建议（撤消player.x更改并进行相反的world.x更改）。

这个小提琴提供了一个粗略的例子（仅适用于“向下”键）。细节：

  1. 确定视口是否在动画期间移动：

       var move = Math.round(playerY+1) - Math.floor(0.5 * vHeight) > vY;

  2. now将函数传递给draw（仅当视口移动时）：

            step: function(now) {
           playerY = now;
            draw(move ? now-start : 0);
        }

  3. 在draw调整视口和玩家位置：

    function draw(now) {
    if ( !now )
        now = 0;
    ...
            theY = (y-now) * 32;
    ...
    context.fillRect((playerX-vX)*32, (playerY-vY-now)*32, 32, 32);

  4. 绘制一个“额外”的瓦片，以补偿空白空间（示例中未实现）；

  5. 当动画结束时，再次绘制它，使用now == 0（示例中未实现）。

仍然存在一些小故障，但应该作为未来改进的基础。

于 2013-03-03T02:02:46.947 回答