正如你在JSFiddle中看到的那样:http://jsfiddle.net/EychPixels/pABPv/1/,当你使用箭头键移动角色直到视图区域随之移动时,角色似乎向后移动1个瓦片然后向前移动1个瓦片。有没有办法解决这个问题,就像用角色动画视图区域一样?为了动画我用jQuery使用.animate
的角色,是否可以对视图区域做同样的事情?如果是这样,我可以使用我的代码看到这个例子吗?
如果您需要更多细节来回答这个问题,请询问。
答案 0 :(得分: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
(在示例中未实现)进行绘制。
仍然存在一些问题,但应作为未来改进的基础。