Javascript TIC TAC TOE-AI不工作？

我正在建立一个tic-tac-toe游戏，在那里人们可以玩人工智能。在

$scope.move function（）

中有一个while循环，它捕获一个随机单元并使其成为AI的值。不知何故，这是行不通的。这是代码笔链接

var-app=angular.module（“ticTacToe”，[]）；
应用程序控制器（“MainCtrl”，函数（$scope）{
变量单元格=$（“.square”）；
$scope.player=“”；
$scope.AI=“”；
var-cross=“×”；
变量圆=”◯";
/***选择一个形状***/
$scope.choosePlayer=函数（e）{
$scope.player=$（e.currentTarget）.text（）；
$（'.choose'）.css（'top'，'-2000px'）；
$（'#wrapper'）.css（'top'，'-600px'）；
$（'#wrapper'）.css（'opacity'，'1'）；
如果（$scope.player==“×”）{
$scope.AI=”◯";
}否则如果（$scope.player==”◯"){
$scope.AI=“×”；
}
}
/***形状细胞***/
$scope.cells=[{value:''}，{value:''}，{value:''}，
{value:''}，{value:''}，{value:''}，
{value:''}，{value:''}，{value:''}
];
/***采取行动***/
$scope.move=函数（单元格）{
cell.value=$scope.player；
var round=0；
/***艾未未采取行动***/
while（圆形<1）{
var randomCell=$scope.cells[Math.floor（（Math.random（）*8）+1）]；
如果（randomCell.value==“”）{
randomCell.value=$scope.AI；
轮=1；
}否则{
四舍五入=0；
} 
}
};
});

我对您的代码做了一些更改，并在发现问题的地方添加了注释

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;
      } 
    }

  };


});

var-app=angular.module（“ticTacToe”，[]）；
应用程序控制器（“MainCtrl”，函数（$scope）{
变量单元格=$（“.square”）；
$scope.player=“”；
$scope.AI=“”；
//由于if语句失败，将特殊字符更改为X和O。
var cross=“X”；
var circle=“O”；
/***选择一个形状***/
$scope.choosePlayer=函数（e）{
$scope.player=$（e.currentTarget）.text（）；
$（'.choose'）.css（'top'，'-2000px'）；
$（'#wrapper'）.css（'top'，'-600px'）；
$（'#wrapper'）.css（'opacity'，'1'）；
//这些if语句以前失败（AI始终为空）
如果（$scope.player===交叉）{
$scope.AI=圆；
}else if（$scope.player==圆圈）{
$scope.AI=交叉；
}
}
/***形状细胞***/
$scope.cells=[{value:''}，{value:''}，{value:''}，
{value:''}，{value:''}，{value:''}，
{value:''}，{value:''}，{value:''}
];
//对范围单元格进行了引用
$scope.emptyCells=$scope.cells；
/***采取行动***/
$scope.move=函数（单元格）{
cell.value=$scope.player；
var round=0；
/***艾未未采取行动***/
while（圆形<1）{
//过滤以仅获取可用单元格（用于性能）
$scope.emptyCells=$scope.cells.filter（函数（单元格）{
返回cell.value==''；
});
//根据空单元格获取随机单元格
var randomCell=$scope.emptyCells[Math.floor（（Math.random（）*（$scope.emptyCells.length-1））+1]；
如果（randomCell.value==“”）{
randomCell.value=$scope.AI；
轮=1；
}否则{
四舍五入=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>

X
O

您在基于HTML的十字中使用了错误的unicode字符。请将其更改为✖ 它会起作用的

避免使用“魔法值”“。只需将

cross

和

circle

分配给正确的值一次，然后在代码中的其他地方引用cross和circle。这将有助于防止将来出现此类错误，因为这些值只有一个参考点，可以很容易地更改，而无需深入代码并更改所有不正确的字符串文本

理想情况下，最佳实践是将所有内容都基于一个中心参考点。因此，HTML应该引用JS中的变量，或者JS应该引用HTML中的文本节点。这是一个软件开发原则，称为DRY或don Repeat Yourself，它基本上意味着代码中唯一的重复应该是对其他代码的引用。字符串文字不应重复。而是重复对该字符串文本的引用

演示：

更新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;
      } 
    }
  };


});

var-app=angular.module（“ticTacToe”，[]）；
应用程序控制器（“MainCtrl”，函数（$scope）{
变量单元格=$（“.square”）；
$scope.player=“”；
$scope.AI=“”；
//***固定unicode字符
变量交叉=”✖";
变量圆=”◯";
/***选择一个形状***/
$scope.choosePlayer=函数（e）{
$scope.player=$（e.currentTarget）.text（）；
$（'.choose'）.css（'top'，'-2000px'）；
$（'#wrapper'）.css（'top'，'-600px'）；
$（'#wrapper'）.css（'opacity'，'1'）；
//***使用上述正确的unicode字符
如果（$scope.player===交叉）{
$scope.AI=圆；
}else if（$scope.player==圆圈）{
$scope.AI=交叉；
}
}
/***形状细胞***/
$scope.cells=[{value:''}，{value:''}，{value:''}，
{value:''}，{value:''}，{value:''}，
{value:''}，{value:''}，{value:''}
];
/***采取行动***/
$scope.move=函数（单元格）{
cell.value=$scope.player；
var round=0；
/***艾未未采取行动***/
while（圆形<1）{
//***随机选择修复
var randomCell=$scope.cells[Math.floor（（Math.random（）*9））；
如果（randomCell.value==“”）{
randomCell.value=$scope.AI；
轮=1；
}否则{
四舍五入=0；
} 
}
};
});

var randomCell=$scope.cells[Math.floor（（Math.random（）*8）+1）]；不要认为您希望在这个函数中使用+1。对于一个0索引数组，您将从1变为9。哎呀。感谢您指出这一点。换句话说，HTML中的X和O与您在玩家函数中检查的不匹配。您的代码将不允许他如此轻松地完成游戏（无限循环，或几乎）@Saar我不在乎他的比赛是否结束。这个答案解决了问题中的问题，即AI没有选择移动，这就是所有的问题。看到了吗

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;
      } 
    }
  };


});