Question

就像现在一样，我有一个Board对象，其中包含一个8x8二维数组（网格，就像我所说的那样），而各个部分用整数1/2表示，我使用按位运算将一个部分标记为王。

我还有一个Checkers对象，用于处理棋盘的渲染和用户在画布上的点击等.Checkers对象有一个Draw方法，它简单地遍历Board对象上的网格，以创建一个图形表示板。因此，每次调用Draw（）时，都会重新绘制棋盘并重新计算棋子的位置。

现在我要添加动画。我能够实现这一目标的一种方法是跟踪最近的移动（源和目标XY坐标），然后以设定的间隔运行Draw()例程，并具有Draw()例程检查它要绘制的棋子的坐标是否与前一个棋子的目标变量中记录的坐标相同，并相应地调整棋子的位置。

虽然这有效，但我觉得它有点混乱。

我尝试过的替代模型是使用对象而不是整数，然后我可以在片上记录像素X Y坐标，并在每次移动后（或在动画循环中）更新它们。这个我也发现了凌乱，并且不喜欢我的棋盘对象现在被绑定到渲染逻辑的方式。

任何有这方面经验的人都能提出更好的做事方式吗？

值得注意的是，我在服务器端（NodeJS）使用相同的Board类，所以理想情况下我希望在客户端和服务器上保持Board类相同，以确保客户端所做的移动和验证永远不会被服务器拒绝。

Answer 1

我建议你先从你那里画出所有不移动的棋子，然后沿着一条插入线从它的起点到终点绘制移动的棋子（由时间给出）。

老实说，对于具有这种图形复杂程度的东西，我会坚持使用HTML / CSS / jQuery，使用position: absolute图像来表示碎片。然后你可以使用jQuery的animate函数来显示从它的开始到结束位置移动的最后一个部分（并使用swing或linear之类的参数来获得你想要的行为）。 e.g：

// Assumes pieces are objects with id and position properties
// and for each piece there is an image with id: piece.id

$('#'+piece.id).animate({
    left:  piece.position.x * board_scale,
    top:   piece.position.y * board_scale
});

Answer 2

您没有提及浏览器支持，但假设您只使用IE9 +，我会坚持使用CSS3 transitions，这样可以实现非常流畅的动画，而您的工作却很少。动画可以硬件加速，即使在移动设备上也是如此，这意味着它们通常很华丽。

Apple已经使用这项技术制作了跳棋演示：）

https://developer.apple.com/safaridemos/checkers.php

// css
.piece {
   -webkit-transition: all ease-in .75s;
   -moz-transition: all ease-in .75s;
   transition:  all ease-in .75s;
}

// js
var aPiece = document.getElementById('aPiece');
var newLocation = "translate(20px, 30px)";
aPiece.style.webkitTransform = newLocation;
aPiece.style.mozTransform = newLocation;
aPiece.style.transform = newLocation;

这将自动为您设置动画：）

Answer 3

如果你想使用canvas：
使用两个，恰好位于彼此之上。

然后，取下面的一个，绘制所有静态元素而上面的一个只绘制动画，即移动元素。

这将为您提供最佳性能，因为只需重新绘制更改的元素。

用于在Canvas中实现的Checkers棋盘游戏的合适模型，其中考虑了动画

3 个答案: