Javascript TIC TAC TOE - AI不工作？

Question

我正在构建一个可以玩AI的tic tac toe游戏。在$scope.move function()中，有一个while循环，它获取一个随机的单元格，并使其成为AI的值。不知何故，这并不起作用。下面是代码链接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或不要重复自己的软件开发原则，基本上它意味着您的代码中唯一的重复应该是对其他代码的引用。字符串文字不应重复。而是重复对字符串文字引用。

演示：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;
      } 
    }
  };


});