1、棋譜的繪製
（1），這裡主要是用到html5中的canvas標籤，他代表畫布的意思。定義乙個canvas標籤，給他的乙個寬度和高度，就相當於準備好畫畫的畫布。因為canvas是乙個行內標籤，所以要讓其水平居中，只有乙個margin:0 auto是不夠的，還要配合display:block將其變為塊級標籤後才能水平居中。
（2），利用js載入一張水印
var img=new image();
img.src="的路徑";
img.onload=function(){
context.drawimage(img,left,top,right,bottom);// 左上點座標 右下點座標
（3），就要利用js去在畫布上實現棋譜的繪製。分為三個步驟：
①拿到畫布這個物件 var ocanvas=document.getelementbyid("canvas的id名字");
②獲取繪畫的許可權 var context=ocanvas.getcontext("2d");//因為畫的是平面圖，所以選擇2d
③開始繪畫
i:設定起點context.moveto(x,y);
ii:設定終點context.lineto(x,y);
iii:設定畫線顏色context.strokestyle("顏色**");
iv:開始畫線context.stroke();
（4），js實現棋子的繪製，棋子的繪製簡單來說就是畫圓
開始路徑：context.beginpath();
畫圓 ：context.arc(x,y,r,0,2*math.pi);//圓心橫座標 圓心縱座標 半徑（預設px） 0 周長
結束路徑：context.closepath();
畫乙個黑色棋子，需要填充色：context.fillestyle="顏色**";context.fill();
開始繪畫：context.stroke();
這樣的話就能畫出乙個黑色的棋子，可是這樣的棋子沒有立體感，只是乙個黑色的圓。如果一直畫圓，從外圓到內圓，讓其有不同的填充色的話，就會有立體感了。
開始路徑：context.beginpath();
畫圓 ：context.arc(x,y,r,0,2*math.pi);//圓心橫座標 圓心縱座標 半徑（預設px） 0 周長
結束路徑：context.closepath();
設定乙個漸變色：var gradient=context.createradialgradient(x,y,r,x,y,0);//從最外圓畫到最內圓
gradient.addcolorstop(0,"#0a0a0a");
gradient.addcolorstop(1,"#636767");
畫乙個黑色棋子，需要填充色：context.fillestyle=gradient;context.fill();
開始繪畫：context.stroke();
2、最終效果圖
3、實現人工智慧——人機大戰
五子棋人機對戰
參考 人機對戰 填子遊戲的攻防策略 關於機器的應對策略，在前文中有所表述，不一一解釋，本文進行了修繕和補強，但漏銅依然存在。增加了乙個倒計時功能，測試了一下，感覺一般，還是留在那裡，表明曾經研究過，供今後完善 增加了棋譜儲存功能和回放功能 增加了悔棋功能，這個還是有些用處的。另外策略中增加了禁手。如...
JS五子棋之人機對戰
文章目錄 1.效果圖 2.ui篇 3.ai篇 先來看看最終實現的效果吧！勝利顯示 主要是使用canvas繪製棋盤以及棋子 canvas繪製棋盤 for var i 0 i 9 i canvas繪製棋子部分 var onestep function i,j,me i，j表示棋盤索引，me表示黑棋或白棋...
人機對戰五子棋 權值法
前面介紹了監聽機制，窗體使用，重繪機制，畫筆使用，物件傳遞等等概念，接下來我們來談一點演算法的東西，相信大家都玩過五子棋這個遊戲吧，在不包括先手禁手等複雜規則之下，我們只考慮最簡單的15 15格仔的棋盤，規則是只要沒有落子的地方均可下子，某一方連成五個棋子則獲勝，遊戲結束。權值法在五子棋遊戲中是一種...