适合在Canvas中实现跳棋棋盘游戏的模型，考虑到动画

Suitable model for a Checkers board game implemented in Canvas, with animations in mind

本文关键字：棋盘游戏 模型 动画 考虑到 Canvas 实现      更新时间：2023-09-26

现在我有一个Board对象，它包含一个8x8的二维数组(我称之为网格)，棋子用整数1/2表示，我使用按位操作将棋子标记为国王。

我也有一个Checkers对象，它处理板的渲染和用户在画布上的点击等。Checkers对象有一个Draw方法，它简单地迭代Board对象上的网格来创建棋盘的图形表示。因此，每次调用Draw()时，棋盘被重新绘制，棋子的位置被重新计算。

现在我想添加动画。我能够做到这一点的一种方法是跟踪最近的移动(源和目标X Y坐标)，然后以设定的间隔运行Draw()例程，并让Draw()例程检查即将绘制的棋子的坐标是否与之前移动的目标变量中记录的坐标相同，并相应调整棋子的位置。

虽然这个可以工作，但我发现它有点乱。

我尝试的另一种模型是使用对象而不是整数，然后我可以记录碎片上的像素X Y坐标，并在每次移动后更新它们(或在动画循环中)。我也发现这很混乱，并且不喜欢我的board对象现在被绑定到渲染逻辑的方式。

在这方面有经验的人能提出更好的方法吗?

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

我建议你首先画出所有不移动的部分，然后沿着一些插值线从它的开始到结束位置(由时间给定)画出移动的部分。

老实说，对于这种复杂程度的图形，我会坚持使用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
});

你没有提到浏览器支持，但假设你只使用IE9+，我会坚持使用CSS3过渡，它允许非常流畅的动画，你的工作很少。动画可以硬件加速，甚至在移动设备上，这意味着它们通常是华丽的。

苹果公司已经使用这种技术制作了checkers演示:)

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;

这将自动为您动画:)

如果你想使用canvas:
使用两个，位置正好在彼此上方。

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

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

相关文章：