程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> 基於jsp的井字游戲實例

基於jsp的井字游戲實例

編輯:關於JSP

做一款回憶童年的游戲,這款游戲代碼比較簡單,主要是掌握算法的原理,但是也有一些需要注意的地方。

游戲界面

進入正題。項目的效果圖如下:

游戲有一個開始界面可供選擇玩家的角色,然後選擇先手是哪一方,接著開始游戲。選擇界面做了一個遮罩層,裡面提供給用戶選擇,選擇之後便把遮罩層隱藏並開始游戲。

具體實現

說了那麼多,可能比較枯燥,下面介紹一下具體的代碼實現。

使用一個二維數組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方法將數組字符串,然後打印出來查看結果。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved