适合在Canvas中实现的跳棋棋盘游戏的模型，并考虑到动画
就像现在一样，我有一个Board对象，它包含一个8x8的二维数组(我称之为网格)，棋子用int 1/2表示，我使用逐位操作将棋子标记为king。
我还有一个Checkers对象，它处理棋盘的渲染和用户在画布上的点击，等等。Checkers对象有一个Draw方法，它只需迭代board对象上的网格来创建棋盘的图形表示。因此，每次调用Draw()时，都会重新绘制棋盘，并重新计算棋子的位置。
现在我想添加动画。我能够做到这一点的一种方法是跟踪最近的移动(源和目标X、Y坐标)，然后以设定的间隔运行Draw()例程，并让Draw()例程检查它将要绘制的块的坐标是否与前一次移动的目标变量中记录的坐标相同，并相应地调整块的位置。
虽然这是可行的，但我发现它有点乱。
我尝试过的另一种模型是使用对象代替整数，然后我可以记录块上的像素X和Y坐标，并在每次移动后(或在动画循环中)更新它们。我也发现这很混乱，并且不喜欢我的board对象现在被绑定到渲染逻辑中的方式。
在这个领域有经验的人能建议一个更好的方法吗？
值得注意的是，我在服务器端使用相同的Board类(NodeJS)，因此理想情况下，我希望在客户端和服务器上保持Board类相同，以确保客户端执行和验证的操作永远不会被服务器拒绝。
回答 3
Stack Overflow用户
发布于 2011-09-23 20:55:10
我建议你先画出所有不动的棋子，然后沿着插值线从开始到结束位置画出移动的棋子(由时间给出)。
老实说，对于这种级别的图形复杂性，我会坚持使用HTML/CSS/jQuery，使用position: absolute图像来表示各个部分。然后你可以使用jQuery的动画功能来显示最后一块从它的开始位置移动到结束位置真的很容易(并使用像swing或linear这样的参数来获得你想要的行为)。例如：
// 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
});Stack Overflow用户
发布于 2012-04-30 21:34:45
你没有提到浏览器支持，但假设你只使用IE9+，我会坚持使用CSS3 transitions，它允许非常流畅的动画，而你只需要很少的工作。动画可以是硬件加速的，即使在移动设备上也是如此，这意味着它们往往很华丽。
苹果已经使用这项技术制作了跳棋演示:)
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;这将自动为您设置动画:)
Stack Overflow用户
发布于 2013-05-02 02:47:40
如果您想使用canvas：
使用两个，正二完全覆盖在另一个上。
然后，取下一个，绘制所有的静态元素。
上面的一个只绘制动画，也就是移动元素。
这将为您提供最佳性能，因为只有变化的元素才需要重新绘制。
https://stackoverflow.com/questions/7491984
复制相似问题
腾讯云开发者
