Javascript與HTML5利用canvas建構Web五子棋遊戲實作演算法

這只是一個簡單的JAVAscript和HTML5小程序，沒有實現人機對戰。 五子棋棋盤落子點對應的二維數組。數組的元素對應落子點。例如數組元素值為0表示該元素對應的落子點沒有棋子，數組元素值為1表示該元素對應的落子點有白棋子，數組元素值為2表示該元素對應的落子點有黑棋子； 判斷五子棋贏棋的演算法是透過對五子棋棋盤落子點對應的二維數組的操作來實現的。

判斷五子棋贏棋演算法 下邊的函數可以實現判斷五子棋贏棋的演算法，也可以依照教材中對應的演算法來實現。 其中函數的參數xx.yy為數組下標，chess數組實現五子棋盤落子點的資料結構映射。 演算法的思想方法是：以當前落子點對應的下標為基點，向其周圍8個方向進行搜索，如果有同色子連五子，返回1，或2，否則返回0。返回1代表白棋勝，返回2代表黑棋方勝。返回0代表沒有發生贏棋資料結構狀態。

複製代碼 代碼如下:

body { margin: 10px; } var canvas; var context; var isWhite = true;//設定是否該輪到白棋 var isWell = false;//設定該局棋盤是否贏了，如果贏了就不能再走了 var img_b = new Image(); img_b.src = "images/b.png";//白棋圖片 var img_w = new Image(); img_w.src = "images/w.png";//黑棋圖片 var chessData = new Array(15);//這個為棋盤的二維數組用來保存棋盤信息，初始化0為沒有走過的，1為白棋走的，2為黑棋走的 for (var x = 0; x chessData[x] = new Array(15); for (var y = 0; y chessData[x][y ] = 0; } } function drawRect() {//頁面加載完畢調用函數，初始化棋盤 canvas = document.getElementById("canvas"); context = canvas .getContext("2d"); for (var i = 0; i context.beginPath(); context.mToove( 0, i); context.lineTo(640, i); context.closePath(); context.stroke(); context.beginPath(); context.moveTo (i, 0); context.lineTo(i, 640); context.closePath(); context.stroke(); } } function play( e) {//滑鼠點擊時發生 var x = parseInt((e.clientX - 20) / 40);//計算滑鼠點擊的區域，如果點擊了（65，65），那麼就是點擊了（ 1，1）的位置 var y = parseInt((e.clientY - 20) / 40); if (chessData[x][y] != 0) {//判斷該位置是否被下過了 alert("你不能在這個位置下棋"); return; } if (isWhite) { isWhite = false; drawChess(1, x , y); } else { isWhite = true; drawChess(2, x, y); } } function drawChess(s, xches, y) {//參數為，棋（1為白棋，2為黑棋），陣列位置 if (isWell == true) { alert("已經結束了，如果需要重新玩，請刷新"); return; } if (x >= 0 && x = 0 && y if (chess == 1) { context.drawImage(img_w, x * 40 20, y * 40 20);//繪製白棋 chessData[x][y] = 1; } else { context. drawImage(img_b, x * 40 20, y * 40 20); chessData[x][y] = 2; } judge(x, y, chess); } judge(x, y, chess); } judge(x, y, chess); } judge(x, y, chess); } judge(x, y, chess); } judge(x, >} function judge(x, y, chess) {//判斷該局棋盤是否贏了 var count1 = 0; var count2 = 0; var count3 = 0; var count4 = 0; //左右判斷 for (var i = x; i >= 0; i--) { if (chessData [y] != chess) { break; } count1 ; } for (var i = x 1; i if (chessData [y] !=ches chess) { break; } count1 ; } //上下判斷 for (var i = y; i >= 0; i--) { if (chessData[x] != chess) { break; } count2 ; } for (var i = y 1; i if (chessData[x] != chess) { break; } count2 ; } //左上右下判斷 for ( var i = x, j = y; i >= 0, j >= 0; i--, j--) { if (chessData [j] != chess) { break; } count3 ; } for (var i = x 1, j = y 1; i if (chessData [j] != chess) { break; } count3 ; } //右上左下判斷 for (var i = x, j = y; i >= 0, j if (chessData [j] != chess) { break; } count4 ; } for (var i = x 1, j = y - 1; i = 0; i , j--) { if (chessData [j] != chess) { break; } count4 ; } if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { if (chess == 1) { alert("白棋贏了"); } else { alert("黑棋贏了"); } isWell = true;//設定該局棋盤已經贏了，不可以再離開了 } } 你的瀏覽器不支援HTML5 canvas，請使用google chrome 瀏覽器開啟.

Javascript與HTML5利用canvas建構Web五子棋遊戲實作演算法_javascript技巧