HTML5 Canvas中平滑走动的精灵。

Question

我正在开发一个基于Canvas和JavaScript的等角HTML5游戏。我的网格由列 (x) 和行 (y) 组成。

目前我的玩家可以穿过地图，但是他会从一个坐标跳到另一个坐标。

我想让他用精灵动画平滑地从一个瓷砖走到另一个瓷砖，但我不知道该如何实现，也找不到任何涵盖此机制的文章，因此再次向您求助！

如果您知道如何做到这一点，或者知道解释此问题的文章或教程，那就太好了！

提前感谢您，

Nick Verheijen

更新：我现在正在使用的行走代码：

Player.move = function(direction)
{
 var newX = Player.positionX;
 var newY = Player.positionY;

 switch( direction )
 {
    case 'up':
        Player.moveDirection = 'up';
        newY--;
    break;
    case 'down':
        Player.moveDirection = 'down';
        newY++;
    break;
    case 'left':
        Player.moveDirection = 'left';
        newX--;
    break;
    case 'right':
        Player.moveDirection = 'right';
        newX++;
    break;
}

Player.positionX = newX;
Player.positionY = newY;
}

注意：我正在保存玩家的移动方向，以便显示正确的图像。

此外，我没有使用任何类库，如EaselJS。这是因为几乎没有文档或示例，我必须自己解决所有问题。

- Nick Verheijen

---

你能在你的问题中添加一些代码吗？那会很有帮助的 - 我之前也遇到过同样的问题... - Barrie Reader

Answer 1

你需要使用基于时间的动画。请参阅以下文章：

使用Canvas在JavaScript中进行位图精灵动画

。

- Infeligo