原生JS Canvas實現五子棋遊戲

2022-01-17 03:39:44 字數 3692 閱讀 4184

先看下現在做完的效果：

線上體驗：

主要功能模組為：

1.人機對戰功能

2.悔棋功能

3.撤銷悔棋功能

從效果圖可以看到，棋盤的橫豎可以放的位置為15*15，通過canvas畫棋盤：

//繪畫棋盤


var drawchessboard = function()


}
知道格仔數後，我們先看五子棋有多少種贏法：

//贏法陣列


var wins = ;


for(var i = 0; i < 15; i++)


}var count = 0; //贏法總數


//橫線贏法


for(var i = 0; i < 15; i++)


count++;}}


//豎線贏法


for(var i = 0; i < 15; i++)


count++;}}


//正斜線贏法


for(var i = 0; i < 11; i++)


count++;}}


//反斜線贏法


for(var i = 0; i < 11; i++)


count++;}}
根據贏法總數定義分別儲存計算機和人贏法的陣列：

for(var i = 0; i < count; i++)
然後就是人開始下棋：

// 我，下棋


chess.onclick = function(e)


if(!me)


var x = e.offsetx;


var y = e.offsety;


var i = math.floor(x / 30);


var j = math.floor(y / 30);


_nowi = i;


_nowj = j;


if(chressbord[i][j] == 0)}}


if(!over)


}// 悔棋功能可用


backbtn.classname = backbtn.classname.replace( new regexp( "(\\s|^)unable(\\s|$)" )," " );          


}
onestep() 方法為落子，要在棋盤上畫乙個棋子：

//畫棋子


var onestep = function(i,j,me)else


context.fillstyle = gradient;


context.fill();


}
接著看計算機怎麼下棋，具體看computerai()方法：

// 計算機下棋


var computerai = function ()


}for(var i = 0; i < 15; i++)else if(mywin[k] == 2)else if(mywin[k] == 3)else if(mywin[k] == 4)


if(computerwin[k] == 1)else if(computerwin[k] == 2)else if(computerwin[k] == 3)else if(computerwin[k] == 4)                        }}


if(myscore[i][j] > max)else if(myscore[i][j] == max)


}if(computerscore[i][j] > max)else if(computerscore[i][j] == max)}}


}}_compi = u;


_compj = v;


onestep(u,v,false);


chressbord[u][v] = 2;  //計算機佔據位置


for(var k = 0; k < count; k++)}}


if(!over)


}
根據相應的權重，計算出計算機應該落子的位置。

要提的是，這裡暫時只能悔一步棋。悔棋功能主要關鍵點是：1、銷毀剛剛下的棋子；2、將之前不可能贏的狀態還原；看下具體的**：

// 悔棋


backbtn.onclick = function(e)


over = false;


me = true;


// 我，悔棋


chressbord[_nowi][_nowj] = 0; //我，已佔位置 還原


minusstep(_nowi, _nowj); //銷毀棋子                                  


for(var k = 0; k < count; k++)


}// 計算機相應的悔棋


chressbord[_compi][_compj] = 0; //計算機，已佔位置 還原


minusstep(_compi, _compj); //銷毀棋子                                  


for(var k = 0; k < count; k++)


}resulttxt.innerhtml = '--益智五子棋--';


returnable = true;


backable = false;


// 撤銷悔棋功能可用


returnbtn.classname = returnbtn.classname.replace( new regexp( "(\\s|^)unable(\\s|$)" )," " ); 


}
minusstep()為銷毀棋子的方法，我們看下是怎麼銷毀的。

//銷毀棋子


var minusstep = function(i,j)
首先通過clearrect()擦掉該圓，然後再重新畫該圓周圍的格仔，注意相應的位置，這裡花了些時間折騰。

悔棋過後，再撤銷，相當於還原悔棋之前的狀態。**比較簡單：

// 撤銷悔棋


returnbtn.onclick = function(e)


// 我，撤銷悔棋


chressbord[_nowi][_nowj] = 1; //我，已佔位置 


onestep(_nowi,_nowj,me);                              


for(var k = 0; k < count; k++)


if(mywin[k] == 5)


}// 計算機撤銷相應的悔棋


chressbord[_compi][_compj] = 2; //計算機，已佔位置   


onestep(_compi,_compj,false);                               


for(var k = 0; k < count; k++)


if(computerwin[k] == 5)


}returnbtn.classname += 'unable';


returnable = false;


backable = true;


}
至此，比較簡單的完成了這三個功能。

參考資料：

原生js實現 五子棋

先初始化棋盤 html css 棋盤 grid 每個棋子落點區域 per zone js 棋盤const grid document.getelementsbyclassname grid 0 棋盤有15列,15行 const column 15 line 15 裝棋子的二維陣列 let grida...

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...