使用 JavaScript 和 HTML5 制作棋盘游戏在线 GUI 的技巧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15304135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tips for making a boardgame online GUI with JavaScript and HTML5
提问by greduan
I'm very interested in Shogi (Japanese Chess), and I finally got my friend interested in it too. But my friend isn't in a position to buy software or a real board, so I told him I would make an online GUI so that we can play together.
我对Shogi（日本国际象棋）很感兴趣，我终于让我的朋友也对它感兴趣了。但是我的朋友没有能力购买软件或真正的电路板，所以我告诉他我会制作一个在线 GUI 以便我们可以一起玩。
Now the plan is that I would basically give the user the same freedom he has than with a real board. He can place any piece anywhere, and he basically doesn't have any rules. The only mechanics that would be implemented would be capturing pieces and dropping them.
现在的计划是，我基本上会给用户带来与真正的电路板相同的自由。他可以在任何地方放置任何一块，而且他基本上没有任何规则。将实施的唯一机制是捕获碎片并丢弃它们。
There would be no AI, it wouldn't recognize when you break rules, it wouldn't recognize check mate, or when the game ends etc. Of course this means that it doesn't even know how pieces move. Everything would be done by the player except the automatically capturing pieces.
不会有人工智能，它不会识别你何时违反规则，它不会识别检查伙伴，或者游戏何时结束等等。当然，这意味着它甚至不知道棋子是如何移动的。除了自动捕获棋子外，一切都由玩家完成。
Of course the amount of pieces is still considered, you can only have the amount of pieces you should have at the start of the game, no extras etc.
当然，棋子的数量还是要考虑的，你只能拥有游戏开始时应该拥有的棋子数量，没有额外的等等。
What would be the best way to go about this? I want to only use HTML5 and JavaScript (jQuery, AJAX etc.), I don't want to use Java, Flash or anything like that. Only HTML5 and JavaScript and possibly some CSS features (maybe).
解决这个问题的最佳方法是什么？我只想使用 HTML5 和 JavaScript（jQuery、AJAX 等），我不想使用 Java、Flash 或类似的东西。只有 HTML5 和 JavaScript，可能还有一些 CSS 功能（也许）。
What would be the best way? The hardest part should be the UI really, it should be able to recognize each spot on the 9x9 board, it should recognize each piece as it's called, and it should be able to say "You can't do that, the piece you're trying to move doesn't exist".
最好的方法是什么？最难的部分应该是 UI，它应该能够识别 9x9 板上的每个位置，它应该能够识别每块被称为的东西，并且它应该能够说“你不能那样做，你的那块”重新尝试移动不存在”。
回答by nimrod
There seem to be plenty of examples on github of HTML5 chess games.
HTML5 国际象棋游戏的github 上似乎有很多示例。
If you want to create your game from scratch with Javascript I'd recommend Craftyan excellent open-source Javascript Game Engine. They have all the stuff in there to get you going, like a tile-based grid, even an isometric grid if you wanted the game to be 2.5d.
如果你想用 Javascript 从头开始创建你的游戏，我会推荐Crafty一个优秀的开源 Javascript 游戏引擎。他们拥有让您前进的所有东西，例如基于图块的网格，如果您希望游戏为 2.5d，甚至可以使用等距网格。
Answering this makes me want to do some game-programming now :) mjam
回答这个让我现在想做一些游戏编程 :) mjam
Oh and here's a great introduction to Crafty
