这是针对tictactoe项目。我不知道有多少天我正在努力解决这个问题，似乎我每次尝试都会让它变得更糟。它没有人工智能为人类玩家做出动作。我尝试了循环，swicth语句，while循环从stratch编写每个AI代码来捕捉我缺少的东西。到目前为止，它只比以前更糟糕了。至少代码更具可读性。如果你们中的任何人向我暗示这个问题，我会很高兴。
在Ninth Objective - Build a Tic Tac Toe Game上查看Yanek Yuk的笔@yanekyuk（CodePen）。
<body>
<div id="app">
<div class="ttt-header" id="players">
<div class="active">{{ player[0].name + " | " + player[0].score }}</div>
<div > {{ player[1].name + " | " + player[1].score }} </div>
</div>
<div class="ttt-body" v-if="gameStarted">
<div class="btn-row">
<div @click="playOn(1)" id="1" class="btn"></div>
<div @click="playOn(2)" id="2" class="btn"></div>
<div @click="playOn(3)" id="3" class="btn"></div>
</div>
<div class="btn-row">
<div @click="playOn(4)" id="4" class="btn"></div>
<div @click="playOn(5)" id="5" class="btn"></div>
<div @click="playOn(6)" id="6" class="btn"></div>
</div>
<div class="btn-row">
<div @click="playOn(7)" id="7" class="btn"></div>
<div @click="playOn(8)" id="8" class="btn"></div>
<div @click="playOn(9)" id="9" class="btn"></div>
</div>
</div>
<div class="ttt-body ttt-config" v-else>
<div class="btn-row">
<div class="btn"><p>O</p></div>
<div @click="changeType()" class="btn"><a><p>X</p></a></div>
</div>
<div class="btn-row">
<div class="btn" style="height: 70px"><input type="text" v-model="player[0].name"/></div>
<div class="btn" style="height: 70px"><input type="text" v-model="player[1].name"/></div>
</div>
<div class="btn-row">
<div @click="startGame()" class="btn btn-block"><a>START</a><br><a>{{ player[0].name + " vs " + player[1].name }}</a></div>
</div>
</div>
<div class="ttt-footer">
<div @click="reStart()">RESTART</div>
<div @click="resetAll()">RESET ALL</div>
</div>
</div>
</body>
new Vue({
el: "#app",
data: {
win: [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7]],
player: [
{
type: 0,
name: "Human",
moves: [],
score: 0,
},
{
type: 1,
name: "Computer",
moves: [],
score: 0,
}
],
turn: 0,
sym: ["O", "X"],
gameStarted: false,
setFinished: false,
moves: [1,2,3,4,5,6,7,8,9],
timeOut: null,
aiTurn: false,
},
methods: {
changeType() { // Change the second player's type to AI to Human
this.player[1].type === 0 ? this.player[1].type = 1 : this.player[1].type = 0;
this.player[1].type === 0 ? this.player[1].name = "Human" : this.player[1].name = "Computer";
},
resetAll() {
$(".btn").empty();
for (var i = 0; i < this.player.length; i++) {
this.player[i].name = "Human";
this.player[i].moves = [];
this.player[i].score = 0;
}
this.turn = 0;
this.moves = [1,2,3,4,5,6,7,8,9];
this.gameStarted = false;
},
delay(f,t) {
this.timeOut = window.setTimeout(f,t);
},
reStart() {
$(".btn").empty().removeClass("end").removeClass("win");
this.turn === 0 ? this.turn = 1 : this.turn = 0;
for (var i = 0; i < this.player.length; i++) {
this.player[i].moves = [];
}
this.moves = [1,2,3,4,5,6,7,8,9];
this.setFinished = false;
},
playOn(n) {
if (this.gameStarted === true && $('#' + n).children().length === 0) {
this.player[this.turn].moves.push(n);
$("#"+n).html("<p class='animated pulse'>"+this.sym[this.turn]+"</p>");
this.moves.splice(this.moves.indexOf(n), 1);
this.checkMoves(this.turn);
if (this.moves.length < 1) {
this.setFinished = true;
}
if (!this.setFinished) {
this.turn === 0 ? this.turn = 1 : this.turn = 0;
} else {
$(".btn").addClass("end");
this.delay(this.reStart, 750);
}
}
},
checkMoves(p) {
for (var j = 0; j < this.win.length; j++) {
if (this.player[p].moves.indexOf(this.win[j][0]) !== -1) {
if (this.player[p].moves.indexOf(this.win[j][1]) !== -1) {
if (this.player[p].moves.indexOf(this.win[j][2]) !== -1) {
$("#" + this.win[j][0] + ",#" + this.win[j][1] + ",#" + this.win[j][2]).addClass("win");
this.player[p].score += 1;
this.setFinished = true;
}
}
}
}
},
startGame() {
this.gameStarted = true;
}
},
watch: {
turn: function() {
$("#players").children().toggleClass("active"); // This is for showing whose turn it is.
if (this.player[1].type === 1) {
this.turn === 0 ? this.aiTurn = false : this.aiTurn = true;
}
},
aiTurn: function(ai) {
while (ai) {
// Original moves length is 9, in below it means that it's the AI's first move whether it's first to go or not
if (this.moves.length >= 8) {
// Always Start playing on center if possible
if (this.moves.indexOf(5) !== -1) {
this.playOn(5); break;
} else { // If occupied play on one of the corners
var movs = [1,3,7,9];
var random = Math.floor(Math.random() * movs.length);
this.playOn(movs[random]); break;
}
// On the below, it means that AI started the game and this is its second turn.
} else if (this.moves.length === 7) {
// This where I decided to give the human player a chance by randomizing AI's behaviour
var rand = Math.floor(Math.random() * this.moves.length);
this.playOn(this.moves[rand]); break;
// After this, AI starts testing every move there is.
} else if (this.moves.length < 7) {
// Scanning all the winning combinations
for (var w = 0; w < this.win.length; w++) {
// Shift & Push three times try all permutations available in the combination
for (var p = 0; p < 3; p++) {
var shifted = this.win[w].shift();
this.win[w].push(shifted);
// Checking if the AI moves has the first value of a any mixed up winning combination
if (this.player[1].moves.indexOf(this.win[w][0]) !== -1) {
// Checking if it has the second value and whether the move is available
if (this.player[1].moves.indexOf(this.win[w][1]) !== -1 && this.moves.indexOf(this.win[w][2]) !== -1) {
this.delay(this.playOn(this.win[w][2]),1000); p = 3; break; // Play on the third value ; Break the loop;
}
// Checking if the player moves has the first value of a any mixed up winning combination
} else if (this.player[0].moves.indexOf(this.win[w][0]) !== -1) {
// Checking if it has the second value and whether the move is available
if (this.player[0].moves.indexOf(this.win[w][1]) !== -1 && this.moves.indexOf(this.win[w][2]) !== -1) {
this.delay(this.playOn(this.win[w][2]),1000); p = 3; break; // Play on the third value ; Break the loop;
}
}
}
}
}
ai = false;
}
}
}
});
有没有人知道是什么导致AI移动而不是人类玩家？