使用JavaScript和HTML5制作在线桌游GUI的技巧

Question

我对将棋（日本象棋）非常感兴趣，最近我终于让我的朋友也对它感兴趣了。但是我的朋友没有购买软件或真正的棋盘的条件，所以我告诉他我会制作一个在线 GUI，这样我们就可以一起玩。

现在的计划是基本上给用户与真正的棋盘相同的自由度。他可以将任何棋子放在任何地方，而且基本上没有规则。唯一实现的机制是捕获棋子和放置棋子。

它没有 AI，不会识别你违反规则、将军或者游戏结束等情况。当然，这意味着它甚至不知道如何移动棋子。除了自动捕获棋子外，所有操作都由玩家完成。

当然，仍然考虑棋子数量，你只能拥有游戏开始时应该有的棋子数量，没有额外的棋子等。

怎么做才是最好的方法？我想只使用 HTML5 和 JavaScript（jQuery、AJAX 等），不想使用 Java、Flash 或其他类似的东西。只用 HTML5 和 JavaScript，可能还有一些 CSS 特性（也许）。

什么是最好的方法？最困难的部分应该是UI，它应该能够识别9x9棋盘上的每个位置，识别每个被称为的棋子，并且应该能够说：“你不能这样做，你试图移动的棋子不存在。”

- greduan

---

你们为什么不玩现有的将棋在线游戏呢？ - DarkAjax

这有点难，我一直在做一个类似的项目（但是针对普通棋类），你可以看一下源代码，或许能找到一些有用的东西。 - ajax333221

@darkajax 我们尝试过，但可以说它不符合我们的标准。哈哈 - greduan

@Eduan 很遗憾听到这个消息，我希望你能够成功解决它 :) - DarkAjax

@darkajax 谢谢！我相信有一天我一定能做到。 :) - greduan

Answer 1

在github上有很多关于HTML5国际象棋游戏的例子。

如果你想用Javascript从零开始创建游戏，我推荐使用Crafty, 一个优秀的开源Javascript游戏引擎。它们内置了所有必要的东西来帮助你入门，比如基于瓷砖的网格，甚至是等距网格，如果你想让游戏变成2.5d的话。

回答这个问题让我想现在就做一些游戏编程 :) 嗯~

哦，这里还有一个Crafty的绝佳介绍

- Julian Krispel-Samsel

---

太棒了，谢谢！我会看看HTML5国际象棋的。我不认为我会使用Crafty，不是因为它不好，而是因为我更喜欢自己动手做。当然，除了jQuery这类例外。 ;) - greduan

是的，我很欣赏这一点。想要知道并没有错。 - Julian Krispel-Samsel