Javascript TIC TAC TOE - AI not working?
Javascript TIC TAC TOE - AI not working?
我正在构建一个可以玩AI的井字游戏。在$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;
}
}
};
});
我对您的代码做了一些更改,并在我看到问题的地方添加了注释
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>
您在基于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;
}
}
};
});
相关文章:
- $rootScope not working
- jQuery document.ready not working
- Javascript getElementsByTagName not working?
- JQuery.val( ) not working
- Tomcat websocket is not working
- Javascript JSON.parse not working
- NodeJS Multer is not working
- Regex not working
- Ember run.debounce not working
- AngularJs 1 not working
- document.getElementById.style.backgroundImage not working
- Rxjs5, distinct() is not working
- createOscillator noteOn not working
- Javascript - .getHours() not working
- Javascript setTimeout not working | onkeydown
- MongoDB $pull not working
- Express router.use not working
- JSONP not working
- window.opener not working in chrome & IE
- Backbone + RequireJS: Collection.each() is not working