我正在创建一个 HTML 5 国际象棋游戏。服务器端是socket.io/node.js/backbone.js。
我现在开始为游戏板编写视图。在画布或 DOM 元素(又名 div)中表示棋盘会更容易吗?忽略浏览器兼容性。
我正在创建一个 HTML 5 国际象棋游戏。服务器端是socket.io/node.js/backbone.js。
我现在开始为游戏板编写视图。在画布或 DOM 元素(又名 div)中表示棋盘会更容易吗?忽略浏览器兼容性。
真的取决于你的动机。
如果您非常了解游戏开发,并且您习惯于将屏幕划分为多个部分以用于碰撞检测或其他目的,并且您可以根据玩家在画布上的位置轻松创建自己的自定义点击事件,每平方/单位单击,然后使用画布,因为您将通过这种方式打开更多高级动画和图形交互的大门。
If you aren't comfortable with that, and would like a straightforward way of knowing which square was clicked, and would like a clean-cut way of knowing if there was a unit in the square you landed on, without having to figure it out based on the X and Y where you clicked inside the game window, then go with the DOM -- really, those are the benefits and most everything else is a side-effect of picking one or the other.
Canvas for animation and "polish", DOM for event-listeners and array-based (or attribute-based) notification of square clicked.
对于您打算做的事情,我认为 DOM 将是最佳选择。不是因为 Canvas 有任何缺点,而是仅仅基于您需要完成的工作量,以及轻松更改电路板外观的能力。
您可以使用div
s 并绝对放置它们,添加 css 样式以在某个方格上显示/隐藏棋子,毕竟,您甚至可以制作一个无背景的大画布并在基于 DOM 的棋盘上绘制特殊效果。
所以总而言之,DOM 应该是适合您的方式。
这取决于你的目标。
如果您的主要兴趣只是通过将棋子的图标呈现为图像来可视化游戏状态,那么使用 DOM(例如表格或 div)作为棋盘位置可能是最简单的。
如果您对高级图形更感兴趣,那么画布可能会更好。
I've developed one of those quite recently and used HTML5 Canvas for graphical interface. It was extremely powerful for drawing the board and moving the pieces.