【JavaScript】如何製作純網頁遊戲4

接續上一課
本次將說明基本的五子棋PvP回合切換和勝負判定
在上一課中，已經做出讓網頁棋盤動作(回傳索引值)的方法

首先我們要先把點擊棋格的動作更改為
改變棋格圖像為玩家棋色
代表他在這格下了一步棋

做法很簡單
打開上一課教學中的Gomoku.js
找到showBoard()方法中
alert("you click :" eval(this.name));
的這行
用一個新方法取代
詳細在下面用紅色粗體標記

clonePiece = piece[8].cloneNode(true); //將棋格以x方向到y方向排列 board[(y-1)*15+(x-1)]=0; //以棋格名稱作為儲存媒介 clonePiece.name="("+y+"-1)*15+("+x+"-1)"; //設定滑鼠事件 clonePiece.onclick = function(){ //放棋動作 putChess(this); };

接著新增放棋動作
putChess的這個方法
另外有一個引數
piece(棋格物件)

內容很簡單
就是將棋格物件中的圖片來源指向當前行動玩家(turn)的棋色圖片
當turn==1時
是黑色
當turn==2時
是白色
之後停止觸發棋格點擊事件
然後將玩家代表回合存入該棋格索引值中
如下表所示

//棋手下棋 function putChess(piece){ if(turn==1){ //當前行動方為黑 piece.firstChild.src="black.png"; }else{ //當前行動方為白 piece.firstChild.src="white.png"; } //停止觸發棋格點擊事件 piece.style.pointerEvents = 'none'; //記錄下棋點 board[parseInt(eval(piece.name))]=turn; //回合更換 turn=3-turn; }

標記紅色的部分稍作說明
可藉由A=3-A來讓A的直在1和2之間來回變換
也就是換回合的意思

這麼一來點擊下一個棋格
就換成下白棋
再來又換回黑棋
無限循環下去

so,基本的換回合下棋就這樣做完了
看看效果


當然
光是這樣還不夠
因為沒有規則判定

接下來指要加上五子棋規則判定
基本的五子棋遊戲大致上就已經完成了
只是只有玩家對玩家的功能而已(老實說應該不太可能找到人跟你一起坐在電腦前玩這東西)

五子棋的規則在教學2中已經解說
是在橫向、直向、斜向等8個方向連接5個己方棋，即獲得勝利
所以......以下是我設計這個判定的想法



圖解:
以玩家下的棋點作為起始點
設計1個變數初始為1
設計4個方法，
1個讓程式往某個方向以及某個方向的反向，進行連線判定，只要其中一條達到5連線則贏
2則是連線判定的迴圈內容，要是下一格非己方棋或空格則跳出迴圈，回傳最後的判定值
3是當分出勝負時，將遊戲結束的方法
4是判定座標是否超出棋盤範圍(x<15,y<15)

so
將表程式碼加入
記錄下棋點之後--回合更換之前
很重要所以標起來

checkWin(parseInt(eval(piece.name)));

新增一個方法checkWin
有一個引數index:進行勝利判定點

//檢查勝利 function checkWin(index){ var y=Math.floor(index/15); var x=index%15; //橫向判定 if(checkLine(x,y,0,1)+checkLine(x,y,0,-1)+1==5 || //直向判定 checkLine(x,y,1,0)+checkLine(x,y,-1,0)+1==5 || //斜向左上右下判定 checkLine(x,y,1,1)+checkLine(x,y,-1,-1)+1==5 || //斜向右上左下判定 checkLine(x,y,-1,1)+checkLine(x,y,1,-1)+1==5){ if(turn == 1){ showMsg("黑棋贏，白棋輸。"); }else{ showMsg("白棋贏，黑棋輸。"); } endGame(); }; }

現在關於判定連線的方法

//判定連線 function checkLine(x,y,dx,dy){ //連線次數 var link=0; for(var i=0;i<5;i++){ //指向下個棋格 x+=dx; y+=dy; //超出範圍或下個棋格非己方棋則結束連線 if(!valid(x,y) || board[y*15+x] != turn){ return link; } //追加連結次數 link+=1; } return link; }

當然還包刮是否超出棋盤外
以及遊戲結束的方法

//沒超出棋盤 function valid(x,y){ return(x>=0 && y>=0 && x<15 && y<15); }

//遊戲結束 var gameEnd=false; function endGame(){ gameEnd=true; }

function putChess(piece){ if(gameEnd){ return; } ...... }

現在打開瀏覽器看看運作是否正常了
本回教學到此為止
下一回將是最後一篇
集中說明關於AI設計的方法
同時釋出原始碼與資料
感謝參與