如何實現一個Web版五子棋遊戲的界面？

01-24

最近AI課要做一個小project，我打算做個五子棋遊戲來對應search 部分的知識。用Common Lisp 和Caveman2來實現一個web application，這樣方便演示。但我基本上沒做過複雜的前端（只是會用JS，JQuery，Bootstrap 實現一些應用性的界面而已）不知道這種web「遊戲」如何實現。
所以想請教大家是用HTML Tables實現簡單一些呢，還是用Canvas簡單一些。
希望給出一個具體思路，比如如果用table實現的話怎麼隱藏邊框、怎麼把tables的格子對應到棋盤的交叉處，等等。

PS. 前後端數據傳遞很簡單，就是Ajax上傳一個二維坐標，server返回一個二維坐標。
PS. 如果有現成的第三方庫就更好了。

canvas，遊戲庫很多，隨便找一個

不考慮兼容性當然是canvas咯，canvas的api隨便百度可以知道。

其實也不需要什麼第三方的庫，因為五子棋畫起來很簡單，就分兩個部分：棋盤和棋子。

棋盤就是一個背景+N條橫的豎的直線，背景就不用說了，直線的話橫豎用兩個循環就可以搞定。

至於棋子，可以事先準備好黑白兩個棋子的圖片資源，然後根據坐標點直接貼上去，當然其中還是有不少細節要處理的（比如如何調整一些偏移參數使得棋子剛好貼到交叉點處）。

數據傳遞的話如果你要只上傳一個棋子的坐標和黑子還是白子這兩個數據，就要注意需要在後端存儲整個棋盤的狀態，可能還要帶一個棋盤id之類的參數說明目前正在操作哪個棋盤什麼的。

如果你想要你的遊戲畫面更加絢麗那確實需要一個庫了，否則不妨自己嘗試直接操作canvas

直接一個 canvas 直接畫就是了，反正一個棋盤也不至於遇到性能瓶頸

底層的繪製盡量用寫好的引擎比較好。

http://html5gameengine.com/

估計五子棋沒有啥複雜的效果，所以這上邊隨便哪個都可以。

這種簡單的事情百度一下基本都可以，不用來知乎

推廣一下 http://botzone.org

上次有個哥們兒純 CSS 實現掃雷：孫士權的回答。所以我看用上 JavaScript 是有點殺雞用牛刀了。試著純 CSS 去實現吧！

加油！