做一款回憶童年的游戲，這款游戲代碼比較簡單，主要是掌握算法的原理，但是也有一些需要注意的地方。
游戲界面
進入正題。項目的效果圖如下：
游戲有一個開始界面可供選擇玩家的角色，然后選擇先手是哪一方，接著開始游戲。選擇界面做了一個遮罩層，里面提供給用戶選擇，選擇之后便把遮罩層隱藏并開始游戲。
具體實現
說了那么多，可能比較枯燥，下面介紹一下具體的代碼實現。
使用一個二維數組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方法將數組字符串，然后打印出來查看結果。
您可能感興趣的文章:- jsp+servlet實現猜數字游戲
- JSP實現百萬富翁猜數字游戲
- jsp實現剪子石頭布小游戲
- jsp網頁實現貪吃蛇小游戲
