如何用前端技术方便快捷地实现棋类游戏中棋盘及棋子的绘制？

Question

以前曾用 Canvas 实现了一个简易的五子棋（无AI）。现在心血来潮，又想写一个中国象棋的，

1.中国象棋涉及吃子，不像五子棋棋子画好之后就会要删除，而canvas好像不容易实现这个功能。
2.canvas对于棋子不能绑定点击事件，得自己计算判断。

所以我应该使用何种html元素来实现呢？继续用canvas，还是用div,table 或者是其他什么的。如果用canvas，怎么解决上述问题

也通过Google，GitHub 了解过。貌似用div canvas table 实现的都有，还有奇葩用 css 实现的，所以特来请教。

因为是自己做着玩玩的，所以只要支持主流现代浏览器就可以了，感激不尽.

Answer 1

canvas、svg 或者就是单纯的 dom 都能实现

canvas 可以绑定时间，通过事件委托，将事件绑定到 canvas 元素上，通过坐标计算来计算棋子的移动

象棋的吃子和五子棋的删除实现起来都差不多，理论上只有逻辑的差别

Answer 2

这有几个HTML5实战中给几个游戏的例子，感觉不错https://github.com/html5-ia/html5-ia/tree/master/ch6
推荐是用canvas，svg,webgl,也可以使用three.js等库

Answer 3

我写过一个https://github.com/frei-x/Chi...
功能完整,逻辑都是用的最简便直接的
在线演示https://frei-x.github.io/ChineseChessOnline/