Question

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

如果您需要更多细节来回答这个问题，请询问。

Answer 1

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

This fiddle提供了一个粗略的例子（仅适用于“向下”键）。详细说明：

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

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

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

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

在draw调整视口和播放器位置：

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

绘制“额外”图块，以补偿空白区域（示例中未实现）;
动画结束后，再次使用now == 0（在示例中未实现）进行绘制。

仍然存在一些问题，但应作为未来改进的基础。

平滑视图区域过渡

1 个答案: