JS實現五子棋——AI篇

內容介紹

上一篇我們講到五子棋的UI篇的實現，現在這一篇我們來講五子棋的AI篇的實現。如果你還沒看過UI篇，建議先到我的主頁上找一下UI篇看一下。
我們在這里把這個實現的過程分成幾部分：

  • 贏法數組
    用一個三維的數組記錄五子棋的所有贏法。
  • 每種贏法的統(tǒng)計數組
    我們用一維數組來記錄每種贏法
  • 如何判斷輸贏
    判斷輸贏的方法
  • 實現計算機落子
    這部分是重點，算法設計精準，計算機的棋藝就高

所有代碼在上一篇的UI的基礎上實現，建議首先閱讀UI篇。在UI篇的JS文件下打代碼。

贏法數組

首先定義一個三維的數組，用于存放所有贏的情況。

//贏法數組
var wins = [] ;
//三維數組
for(var i=0; i<15; i++){
    wins[i] = [] ;
    for(var j=0;j<15; j++){
        wins[i][j] = [] ;
    }
}

定義count用于記錄贏的方法種類數量，然后再遍歷所有贏的情況，包括橫向、縱向、斜向、反斜向，下面以橫向為例講解。

//贏法統(tǒng)計  
var count = 0 ;
//橫線
for(var i=0; i<15; i++){
    for(var j=0; j<11; j++){
        for(var k=0; k<5; k++){
        //此循環(huán)結束，就是橫向的第一種贏法
            wins[i][j+k][count] = true;
        }
        count++ ;
    }
}

這是五個棋子呈橫的形式贏的情況。
這里有三個循環(huán)，第一個循環(huán)是指每一條橫線。第二個循環(huán)指的是擺成五個子，第一個子的縱坐標。第三個循環(huán)是擺滿五個棋子，里重點說說為什么j<11。如果你想更好地理解，可以代些數進去看一下是什么情況。
如果j=10時，贏的情況是如下圖：

j=10時

j
如果j還比10大的話就會超出棋盤。
以此類推，縱向、斜向、反斜向也是同理：

//縱線
for(var i=0; i<15; i++){
    for(var j=0; j<11; j++){
        for(var k=0; k<5; k++){
            wins[j+k][i][count] = true;
        }
        count++ ;
    }
}
//正斜線
for(var i=0; i<11; i++){
    for(var j=0; j<11; j++){
        for(var k=0; k<5; k++){
            wins[i+k][j+k][count] = true;
        }
        count++ ;
    }
}
//反斜線
for(var i=0; i<11; i++){
    for(var j=14; j>3; j--){
        for(var k=0; k<5; k++){
            wins[i+k][j-k][count] = true;
        }
        count++ ;
    }
}
console.log(count);//572

最后在后臺輸出總共有多少種贏法。我們由此知道，15*15的棋盤總共有572種贏法，所有贏法計算機都知道了，所以，如果代碼打得好，你根本無法贏機器。

贏法的統(tǒng)計數組

這是一個一維的數組，用來計算某種贏法是否達成。上面列舉了所有的贏法，那在某贏法中成功落下一個棋子，那我們就為該種贏法的值加1，直到加5就實現了此種贏法，實現結束游戲。那如果該贏法中有另一方的棋子，此種贏法報廢。大概就是這么一個思路。計算機落子的目的就是去破壞你某種贏法的可行性，所以計算機落子的風格跟人有很大的區(qū)別。
定義并實例化兩個數組，一個用來存放玩家贏法的數組，另一個用來存放電腦贏法的數組。
還定義了一個over變量，標志游戲是否結束。

//游戲結束
var over = false ;
//統(tǒng)計記法數組  
var myWin = [] ;
var computerWin = [] ;
//統(tǒng)計數組的實例化
for(var i=0; i<count; i++){
    myWin[i] = 0 ;
    computerWin[i] = 0 ;
}

在單擊事件，成功落子后進行一個循環(huán)。
這個循環(huán)遍歷所有的贏法，如果某種贏法里有棋子，就myWin[k]++，如果myWin[k] == 5成立了，改變over的標志，就代表你贏了。

chess.onclick = function (e){
    if(over){//判斷游戲是否結束
        return ;
    }
    var x = e.offsetX ;
    var y = e.offsetY ;
    var i = Math.floor(x/30) ;
    var j = Math.floor(y/30) ;
    if(chessBoard[i][j] == 0){
        oneStep(i,j,me);
        if(me){
            chessBoard[i][j] = 1 ;
        }else{
            chessBoard[i][j] = 2 ;
        }
        me = !me ;  
        //落下子后需要進行統(tǒng)計
        for(var k=0; k<count; k++){
            if(wins[i][j][k]){//某種贏的某子true
                myWin[k]++;//離勝利又進一步
                computerWin[k] = 6 ;//該種贏法計算機沒有機會了
                if(myWin[k] == 5){//如果達到5就贏了
                    window.alert("厲害，你贏了?。?);
                    over = true ;
                }
            }
        }
    }
}

測試，如下圖所示，如果你下夠五個子，就彈窗提示你贏了，這里有點不好，就是你要點擊確認，第五個棋子才出來。

提示你贏了

計算機判斷有效落棋點

在完成落子統(tǒng)計后判斷是否結束游戲，如果沒結束，就輪到計算機下棋，計算棋下棋調用computerAi()方法。

if(!over){
    me = !me ;  //如果游戲沒結束，下棋權利交給計算機
    computerAi();//計算機AI
}

在點擊鼠標的時候需要判斷是否輪到人落棋：

if(!me){//不到你下棋點擊無效
    return ;
}

更改落棋的判斷，如果鼠標點擊，只下黑棋，并且只改變黑棋的頻數統(tǒng)計。

if(chessBoard[i][j] == 0){
    oneStep(i,j,me);//需要要更改處
    chessBoard[i][j] = 1 ;
    //落下子后需要進行統(tǒng)計
    for(var k=0; k<count; k++){
        if(wins[i][j][k]){//某種贏的某子true
            myWin[k]++;//離勝利又進一步
            computerWin[k] = 6 ;//該種贏法計算機沒有機會了
            if(myWin[k] == 5){//如果達到5就贏了
                window.alert("厲害，你贏了??！");
                over = true ;
            }
        }
    }
    if(!over){
        me = !me ;  //如果游戲沒結束，下棋權利交給計算機
        computerAI();//計算機AI
    }
}

接下來實現computerAi()方法的棋步權值。

var computerAI = function(){
    var myScore = [] ;//定義兩個數組，用于存放每個點的分值
    var computerScore = [] ;
    for(var i=0; i<15; i++){
        myScore[i] = [] ;
        computerScore[i] = [] ;
        for(var j=0; j<15; j++){
            myScore[i][j] = 0 ;
            computerScore[i][j] = 0;
        }
    }
    //為所有贏法打分
    for(var i=0; i<15; i++){
        for(var j=0; j<15; j++){
            if(chessBoard[i][j] == 0){//該點可下棋
                for(var k=0; k<count; k++){//遍歷所有贏法
                    if(wins[i][j][k]){//這種贏法已經有子
                        if(myWin[k] == 1){//黑方，有1個子
                            myScore[i][j] += 200 ;
                        }else if(myWin[k] == 2){
                            myScore[i][j] += 400 ;
                        }else if(myWin[k] == 3){
                            myScore[i][j] += 2000 ;
                        }else if(myWin[k] == 4){
                            myScore[i][j] += 10000 ;
                        }
                        if(computerWin[k] == 1){//白方，有1個子
                            computerScore[i][j] += 220 ;
                        }else if(computerWin[k] == 2){
                            computerScore[i][j] += 420 ;
                        }else if(computerWin[k] == 3){
                            computerScore[i][j] += 2200 ;
                        }else if(computerWin[k] == 4){
                            computerScore[i][j] += 20000 ;
                        }
                    }
                }
            }
        }
    }
}

如上代碼，首先定義并實例化myScore[]與computerScore[]兩個數組，用于存放各個棋點的落子價值，再分別遍歷人和計算機的所有贏法，如果有1、2、3、4子，分別為棋點附權值。

實現計算機落子

接下來我們找到計算機落子的最佳坐標，然后在這個坐標上落子，就實現了計算機落子的功能了，在這里把整個computerAI()函數貼出來再進行講解：

var computerAI = function(){
    var myScore = [] ;//定義兩個數組，用于存放每個點的分值
    var computerScore = [] ;
    var max = 0 ;//落子的價值
    var u = 0, v = 0 ;//落子的坐標
    for(var i=0; i<15; i++){
        myScore[i] = [] ;
        computerScore[i] = [] ;
        for(var j=0; j<15; j++){
            myScore[i][j] = 0 ;
            computerScore[i][j] = 0;
        }
    }
    //為所有贏法打分
    for(var i=0; i<15; i++){
        for(var j=0; j<15; j++){
            if(chessBoard[i][j] == 0){//該點可下棋
                for(var k=0; k<count; k++){//遍歷所有贏法
                    if(wins[i][j][k]){//這種贏法已經有子
                        if(myWin[k] == 1){//黑方，有1個子
                            myScore[i][j] += 200 ;
                        }else if(myWin[k] == 2){
                            myScore[i][j] += 400 ;
                        }else if(myWin[k] == 3){
                            myScore[i][j] += 2000 ;
                        }else if(myWin[k] == 4){
                            myScore[i][j] += 10000 ;
                        }
                        if(computerWin[k] == 1){//白方，有1個子
                            computerScore[i][j] += 220 ;
                        }else if(computerWin[k] == 2){
                            computerScore[i][j] += 420 ;
                        }else if(computerWin[k] == 3){
                            computerScore[i][j] += 2200 ;
                        }else if(computerWin[k] == 4){
                            computerScore[i][j] += 20000 ;
                        }
                    }
                }
                //下面判斷計算機落子的最佳處
                if(myScore[i][j] > max ){//人在某步的權值更高的時候
                    max = myScore[i][j] ;
                    u = i ;
                    v = j ;
                }else if(myScore[i][j] = max){//如果權值是最大了
                    if(computerScore[i][j] > computerScore[u][v]){//而i,j點的權值比在u,v點的更大時
                        u = i ;
                        v = j ;
                    }
                }
                if(computerScore[i][j] > max ){//人在某步的權值更高的時候
                    max = computerScore[i][j] ;
                    u = i ;
                    v = j ;
                }else if(computerScore[i][j] = max){//如果權值是最大了
                    if(myScore[i][j] > myScore[u][v]){//而計算機在此處落子更有用
                        u = i ;
                        v = j ;
                    }
                }
            }
        }
    }
    oneStep(u, v, false) ;//上面得到最佳落子點，現在為其落白子
    chessBoard[u][v] == 2 ; 
    //計算機落完子后需要進行統(tǒng)計
    for(var k=0; k<count; k++){
        if(wins[u][v][k]){//某種贏的某子true
            computerWin[k]++;//離勝利又進一步
            myWin[k] = 6 ;//該種贏法計算機沒有機會了
            if(computerWin[k] == 5){//如果達到5就贏了
                window.alert("計算機贏了??！");
                over = true ;
            }
        }
    }
    if(!over){
        me = !me ;  //如果游戲沒結束，
    }
}

上面函數的代碼比較長，其實很多一部分都是與上面有重復的。
為了找到棋盤坐標最高權值和其坐標點，這里定義三個變量max、u和v 。通過上遍歷所有贏法的值后，這里只要判斷比較在哪一方的贏法中落子價值大，主要是自己向著贏的方向前進和不讓對方贏的方向進行阻擋。
如下面是比較的權值的代碼，通過以下代碼得到（u,v）這個權值最大的坐標：

//下面判斷計算機落子的最佳處
if(myScore[i][j] > max ){//人在某步的權值更高的時候
    max = myScore[i][j] ;
    u = i ;
    v = j ;
}else if(myScore[i][j] = max){//如果權值是最大了
    if(computerScore[i][j] > computerScore[u][v]){//而i,j點的權值比在u,v點的更大時
        u = i ;
        v = j ;
    }
}
if(computerScore[i][j] > max ){//人在某步的權值更高的時候
    max = computerScore[i][j] ;
    u = i ;
    v = j ;
}else if(computerScore[i][j] = max){//如果權值是最大了
    if(myScore[i][j] > myScore[u][v]){//而計算機在此處落子更有用
        u = i ;
        v = j ;
    }
}

得到最大權值的坐標后，我們就要實現在該位置落子：
落完子后要對落子的位置進行統(tǒng)計，如果達到贏的情況就終止游戲，否則把落子權交給鼠標。

oneStep(u, v, false) ;//上面得到最佳落子點，現在為其落白子
chessBoard[u][v] == 2 ; 
 //計算機落完子后需要進行統(tǒng)計
for(var k=0; k<count; k++){
    if(wins[u][v][k]){//某種贏的某子true
        computerWin[k]++;//離勝利又進一步
        myWin[k] = 6 ;//該種贏法計算機沒有機會了
        if(computerWin[k] == 5){//如果達到5就贏了
            window.alert("計算機贏了！！");
            over = true ;
        }
    }
}
if(!over){
    me = !me ;  //如果游戲沒結束，
}

游戲已經完成了，你們可以點擊這里體驗一下。明白這個算法的實現后，你們也可以不斷思考，不斷改進算法，提高計算機的棋藝。如果你們最終下來沒有達到想要的效果，可以去下載我的源碼，查看一下，自己的代碼在哪一步出錯了。下載源碼的地址是點擊這里

總結

整個游戲分為UI篇和AI篇都完成了，這里分以下三部分完成：

  • 贏法數組
    用一個三維的數組記錄五子棋的所有贏法。每種贏法都有一個值，值達到5就結束游戲。
  • 確定計算機落子點
    這是難點，我們通過為某種贏法附一個權值，權值最大的就是落子價值最大的。
  • 實現計算機落子
    通過上一步計算機找到了權值最大的落子坐標后，我們就可以實現落子了。
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容