Javascript 画布与棋盘的DOM

我正在创建一个HTML5国际象棋游戏。服务器端是socket.io/node.js/backbone.js

---

我现在开始为游戏板编写视图。在画布或DOM元素（又名div）中表示棋盘会更容易吗？忽略浏览器兼容性。

这取决于您的目标

如果您的主要兴趣只是通过将棋子的图标呈现为图像来可视化游戏状态，那么使用DOM（例如，表或div）作为棋盘位置可能是最简单的

---

如果您对高级图形更感兴趣，那么画布可能会更好

对于您计划做的事情，我认为DOM是最好的选择。这并不是因为画布有任何缺点，而是基于您需要完成的工作量，以及更改电路板外观的能力

您可以使用

div

s绝对放置它们，添加css样式以显示/隐藏某个正方形上的棋子，然后，您甚至可以制作一个无背景的大画布，并在基于DOM的棋盘上绘制特殊效果

---

因此，总的来说，DOM应该是你的出路。

真正的原因在于你的动机

如果您对游戏开发非常了解，并且对于将屏幕划分为多个部分以用于碰撞检测或其他目的感到满意，那么您可以根据玩家在画布上单击的位置，轻松创建自己的自定义单击事件（每平方/单位），然后使用画布，这样，您将打开更多进入高级动画和图形交互的大门

如果你对此感到不舒服，想用一种简单的方法知道你点击了哪个方块，想用一种简洁的方法知道你降落的方块中是否有一个单位，而不必根据你在游戏窗口中点击的X和Y来计算，然后使用DOM——真的，这些都是好处，其他大部分都是选择其中一个的副作用

---

画布用于动画和“抛光”，DOM用于事件侦听器和基于数组（或基于属性）的方形单击通知。

我最近开发了其中一个，并将HTML5画布用于图形界面。它在绘制棋盘和移动棋子方面非常强大。

如果你打算验证棋子的移动并实现任何真正的国际象棋逻辑，你必须首先将其表示为一个对象。从这里开始，将其绘制到画布与将其写入表格几乎完全相同。画布可能会给你更好的动画控制。所有的逻辑都已经完成了，现在我只是把棋盘/棋子渲染成角色。。。只需更改视图（mvc）即可正确渲染。我倾向于画布。这是一个学习的好机会。。。Easel.js似乎是一个很好的方法？你能解释一下如何为动画制作画布吗？