做一款回憶童年的遊戲,這款遊戲代碼比較簡單,主要是掌握演算法的原理,但是也有一些需要注意的地方。
遊戲介面
進入正題。項目的效果圖如下:
遊戲有一個開始介面可供選擇玩家的角色,然後選擇先手是哪一方,接著開始遊戲。選擇介面做了一個遮罩層,裡面提供給使用者選擇,選擇之後便把遮罩層隱藏並開始遊戲。
具體實現
說了那麼多,可能比較枯燥,下面介紹一下具體的代碼實現。
使用一個二維數組panel儲存棋盤的狀態,1是電腦的值,-1是玩家的值。
winArr儲存所有可能贏的8個棋位組合;維護computerWin和userWin,初始值等於winArr,當電腦或玩家每次下棋時,都分別更新這兩個數組,刪除掉不能贏的棋位組合。在更新panel的時候會分別更新computerWin和userWin。
核心的方法是play,play的執行步驟虛擬碼如下:
如果可以攻擊
遍曆computerWin數組,找到可以攻擊的棋位,下棋,顯示是否贏了。
不能攻擊,如果需要防守
遍曆userWin,根據玩家可贏的組合,找出需要防守的棋位,下棋,更新panel;
不需要防守,如果是電腦先手的第一步
在中心位置下棋,更新panel;
不是先手第一步
如果中心位置沒有被佔去,在中心位置下棋,更新panel;返回
如果是特殊情況,在棱位下棋,更新panel; 返回
如果角位仍有位置,選擇一個角位下棋,更新panel; 返回
最後一種情況,找到剩餘的空位,優先選擇位於computerWin的空位,下棋,更新panel; 返回
play演算法的實現如下:
if(canAttack()) { console.log("attack"); var attackPos = findAttackPos(); updatePanel(attackPos, computerVal);} else if(needDefend()) { console.log("defend"); var defendPos = findDefendPos(); updatePanel(defendPos, computerVal);} else if(firstStep()) { console.log("first"); updatePanel(firstPos, computerVal); running = true;} else { console.log("other"); if(panel[1][1] == 0) { updatePanel(firstPos, computerVal); return; } if(special()) { console.log('special'); var pos = findSpecialPos(); updatePanel(pos, computerVal); return; } var random = Math.floor(Math.random() * 2); if(panel[0][0] == 0 && panel[2][2] == 0) { var pos = (random == 0) ? 0 : 8; updatePanel(pos, computerVal); } else if(panel[0][2] == 0 && panel[2][0] == 0) { var pos = (random == 0) ? 2: 6; updatePanel(pos, computerVal); } else { var otherPos = findEmptyPos(); updatePanel(otherPos, computerVal); }}
總結
在編碼的過程中遇到的一個難題就是JavaScript的數組對象,我在第一次調用play方法開頭輸出panel的時候,得到的是play執行後panel的值,後來請教一位大神,發現是因為panel是一個對象,因為對象遍曆引用的都是同一塊記憶體位址,所以一旦有改變,就全部改了。如果直接使用下標輸出每一個值的話是可以得到初始的值的,也可以用JSON方法將數組字串,然後列印出來查看結果。