Javascript TIC TAC TOE - AI不工作？

Question

我正在構建一個可以玩AI的tic tac toe遊戲。在$scope.move function()中有一個while循環，它抓住一個隨機單元格並將其作爲AI的值。不知何故，這是行不通的。這裏的codepen鏈接http://codepen.io/theMugician/pen/ojJrRp

var app = angular.module("ticTacToe", []); 
app.controller("MainCtrl", function($scope){ 
    var cell = $(".square"); 
    $scope.player = ""; 
    $scope.AI = ""; 
    var cross = "×"; 
    var circle = "◯"; 


    /*** Choose a shape ***/ 
    $scope.choosePlayer = function(e) { 
    $scope.player = $(e.currentTarget).text(); 
     $('.choose').css('top', '-2000px'); 
     $('#wrapper').css('top', '-600px'); 
     $('#wrapper').css('opacity', '1'); 
    if($scope.player === "×"){ 
    $scope.AI = "◯"; 
    }else if($scope.player === "◯"){ 
    $scope.AI = "×"; 
    } 
} 

    /*** Shape Cells ***/ 
    $scope.cells = [ { value: '' }, { value: '' }, { value: '' }, 
    { value: '' }, { value: '' }, { value: '' } , 
    { value: '' }, { value: '' }, { value: '' } 
    ]; 

    /*** Make a move ***/ 
    $scope.move = function(cell){ 
    cell.value = $scope.player; 
    var round = 0; 
    /*** AI makes a move ***/ 
    while(round < 1){ 
     var randomCell = $scope.cells[Math.floor((Math.random()*8)+1)]; 
     if(randomCell.value === ""){ 
     randomCell.value = $scope.AI; 
     round = 1; 
     }else{ 
     round = 0; 
     } 
    } 

    }; 


}); 

Answer 1

我已經改變了你的代碼了一下，在那裏我看到了問題

var app = angular.module("ticTacToe", []); 
app.controller("MainCtrl", function($scope){ 
    var cell = $(".square"); 
    $scope.player = ""; 
    $scope.AI = ""; 
    // changed special chars to X and O as the if statement failed. 
    var cross = "X"; 
    var circle = "O"; 


    /*** Choose a shape ***/ 
    $scope.choosePlayer = function(e) { 
    $scope.player = $(e.currentTarget).text(); 
     $('.choose').css('top', '-2000px'); 
     $('#wrapper').css('top', '-600px'); 
     $('#wrapper').css('opacity', '1'); 
    //these if statements failed before (AI was always empty) 
    if($scope.player === cross){ 
    $scope.AI = circle; 
    }else if($scope.player === circle){ 
    $scope.AI = cross; 
    } 
} 

    /*** Shape Cells ***/ 
    $scope.cells = [ { value: '' }, { value: '' }, { value: '' }, 
    { value: '' }, { value: '' }, { value: '' } , 
    { value: '' }, { value: '' }, { value: '' } 
    ]; 
    // made a ref to scope cells 
    $scope.emptyCells = $scope.cells; 

    /*** Make a move ***/ 
    $scope.move = function(cell){ 
    cell.value = $scope.player; 
    var round = 0; 
    /*** AI makes a move ***/ 
    while(round < 1){ 
    // filtered to get only available cells (for performance) 
     $scope.emptyCells = $scope.cells.filter(function(cell){ 
     return cell.value === ''; 
     }); 
     // got random cell according to empty cells 
     var randomCell = $scope.emptyCells[Math.floor((Math.random()*($scope.emptyCells.length-1))+1)]; 
     if(randomCell.value === ""){ 
     randomCell.value = $scope.AI; 
     round = 1; 
     }else{ 
     round = 0; 
     } 
    } 

    }; 


}); 

還需要在HTML改變添加的註釋：

<button ng-click="choosePlayer($event)" class="btn btn-red" id="choose-cross">X</button> 
<button ng-click="choosePlayer($event)" class="btn btn-green" id="choose-circle">O</button> 

Answer 2

你是根據您的HTML使用錯誤的Unicode字符作爲十字。將其更改爲✖，它將起作用。

避免使用「魔法值」。只需將cross和circle分配給正確的值一次，然後在您的代碼中的其他任何地方參考交叉和循環。這將有助於防止這種類型的將來的錯誤，因爲這些值將具有一個的參考點，並且可以輕鬆更改而不是通過挖掘代碼並更改所有不正確的字符串文字。

理想情況下，最好的做法是根據一箇中心參考點確定一切。所以你的HTML應該引用你的JS中的變量，或者你的JS應該引用HTML中的文本節點。這是一種稱爲DRY或Dont Repeat Yourself的軟件開發原則，基本上這意味着代碼中唯一的重複應該是對其他代碼的引用。字符串文字不應該重複。而是重複參考到該字符串文字。

演示：http://codepen.io/anon/pen/GpbaLz

更新JS：

var app = angular.module("ticTacToe", []); 
app.controller("MainCtrl", function($scope){ 
    var cell = $(".square"); 
    $scope.player = ""; 
    $scope.AI = ""; 
    // *** fixed unicode char 
    var cross = "✖"; 
    var circle = "◯"; 

    /*** Choose a shape ***/ 
    $scope.choosePlayer = function(e) { 
    $scope.player = $(e.currentTarget).text(); 
     $('.choose').css('top', '-2000px'); 
     $('#wrapper').css('top', '-600px'); 
     $('#wrapper').css('opacity', '1'); 
    // *** use correct unicode chars above 
    if($scope.player === cross){ 
     $scope.AI = circle; 
    }else if($scope.player === circle){ 
     $scope.AI = cross; 
    } 
    } 

    /*** Shape Cells ***/ 
    $scope.cells = [ { value: '' }, { value: '' }, { value: '' }, 
    { value: '' }, { value: '' }, { value: '' } , 
    { value: '' }, { value: '' }, { value: '' } 
    ]; 

    /*** Make a move ***/ 
    $scope.move = function(cell){ 
    cell.value = $scope.player; 
    var round = 0; 
    /*** AI makes a move ***/ 
    while(round < 1){ 
     // *** random select fix 
     var randomCell = $scope.cells[Math.floor((Math.random()*9))]; 
     if(randomCell.value === ""){ 
     randomCell.value = $scope.AI; 
     round = 1; 
     }else{ 
     round = 0; 
     } 
    } 
    }; 


});