原生js實現 五子棋

先初始化棋盤

html:

/*

棋盤*/
.grid
/*每個棋子落點區域
*/.per-zone

棋盤

const grid = document.getelementsbyclassname('grid')[0];

//棋盤有15列,  15行
const column = 15 , line = 15;
//裝棋子的二維陣列
let gridarr =;
//初始化二維陣列
function
init() 
}//事件委託， 效能優化
grid.addeventlistener('click', (e) =>, 
false)}
init();
function
createzone(x, y) )`;
return
div}

不要犯密集恐懼症哦，

我們用事件委託來繫結事件， 這樣事件只需要繫結一次而不用繫結15 * 15次，

很大地提公升了效率，

開始寫點選事件：

//

計數， 用來判定落黑子還是落白子
let count = 0;
//黑：value =1 ； 白： value = 2
function
begin(target) )`;
// 判斷是否結束
judgefinish();
count ++ ;
}

}

很有成就感是不是，就差最後一步也最是核心的一步

判斷橫著， 豎著， 斜著 是否有5個以上相同顏色的棋子

function

judgefinish() 
//判斷是否五子連珠
const result =judgeline(i, j);
if (result === 1)  
else
if (result === 2) 
}}}//
判斷向下， 向右， 向斜上， 向斜下四個方向
function
judgeline(x, y) 
//只要有乙個方向不為0 遊戲結束
return result1 | result2 | result3 |result4
}function
replay() 

1& 1& 1& 1& 1 = 1 

2 & 2 &2 &2 &2  = 2  

為什麼初始值設成3 呢， 因為任何數 & 3  都不會變     

先轉化成2進製 再運算  3 =》 11   

最後的效果：

原生JS Canvas實現五子棋遊戲

先看下現在做完的效果 線上體驗 主要功能模組為 1.人機對戰功能 2.悔棋功能 3.撤銷悔棋功能 從效果圖可以看到，棋盤的橫豎可以放的位置為15 15，通過canvas畫棋盤 繪畫棋盤 var drawchessboard function 知道格仔數後，我們先看五子棋有多少種贏法 贏法陣列 var...

Java實現五子棋

一定義常量類 public class constant二定義我們的棋盤類 public class chess private void playchess 錯誤輸入 if str.length 2 正常輸入的情況 判斷是否越界 if isoverstep str else end if 判斷是否...

C 實現五子棋

自己寫了一下午，但是還是除錯的時候存在很多問題 繼續改善繼續調整 game.h define game h define row 5 define col 5 void displayboard char board row col int row,int col void gameplayer c...