用for循环检查Tic Tac Toe中的获胜者,然后切换玩家的好方法是什么



我正在寻找一种使用for循环检查获胜条件的方法。基本上,我想有一个函数,每次玩家点击一个单元格时都可以调用。然后切换玩家,使计算机在具有最小-最大功能的人类玩家之后进行输入。到目前为止,我的程序能够将cell id作为字符串从人类播放器推送到huPlayerArr,然后在屏幕上显示。所期望的结果将是在接下来的电脑播放器上做同样的事情。

$(document).ready(function() {
var huPlayer, computer;
var huPlayerArr = [], computerArr = [];
var occupiedCells = [];
var winningCombos = [
[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7]
];
$cell = $('.cell');
$('#myModal').modal('show');
$('.select').click(function() {
let turnX = 'X';
let turnO = 'O';
$(this).attr("data-dismiss", "modal");
huPlayer = $(this).text() 
computer = huPlayer === turnX ? turnO: turnX; 
$('.player').append(`<div class="alert-success">You chose to play as ${huPlayer}</div>`);
});
function resetGame() {
huPlayer = undefined;
computer = undefined;
huPlayerArr = [];
computerArr = [];
occupiedCells = [];
}
function generateRandomNumber(min, max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
function isEmpty(el) {
if ($.trim($(el).html()) == '') {
return true;
};
}
function insertMarker(text, val, id) {
occupiedCells.push(+id);
text.html(val);
}
function isThereAWinner(arr) {
for (let i = 0; i < winningCombos.length; i++) {
if (arr.includes( winningCombos[i][0] )
&& arr.includes( winningCombos[i][1] )
&& arr.includes( winningCombos[i][2] )) { 
console.log("There's a winner");
} 
}
}
$cell.click(function() {
if (huPlayer === undefined && computer === undefined) {
$('#myModal').modal('show');
} 
else {
var id = $(this).attr("id");
if (isEmpty(id)) {
insertMarker($(this), huPlayer, id);
huPlayerArr.push(id);
console.log(huPlayerArr); 
if (isThereAWinner(huPlayerArr)) {
console.log("There's a winner");
}
else if (occupiedCells.length === 9) {
console.log("Tie game");
}
}
}
});
});

HTML:

<header>
<h1 class="text-center">Tic Tac Toe</h1>
<div class="player text-center"></div>
</header>
<div id="popup-box">
<div class="modal fade bg-red" id="myModal" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center text-danger">Welcome!</h4>
</div>
<div class="modal-body">
<h1 class="text-center text-success">Choose X or O !!!</h1>
</div>
<div class="modal-footer">
<button type="button" class="select btn btn-info btn-lg">X</button>
<button type="button" class="select btn btn-danger btn-lg">O</button>
</div>
</div>
</div>
</div>
<div id="app">
<table>
<tr>
<td class="cell" id="cell-0"></td>
<td class="cell" id="cell-1"></td>
<td class="cell" id="cell-2"></td>
</tr>
<tr>
<td class="cell" id="cell-3"></td>
<td class="cell" id="cell-4"></td>
<td class="cell" id="cell-5"></td>
</tr>
<tr>
<td class="cell" id="cell-6"></td>
<td class="cell" id="cell-7"></td>
<td class="cell" id="cell-8"></td>
</tr>
</table>

对于每个winningCombos数组,如果获胜组合中的三个正方形ID中的每一个都存在于arr中,则您有一个赢家:

function isThereAWinner(arr) {
for (let i = 0; i < winningCombos.length; i++) {
if (
arr.includes( winningCombos[i][0] )
&&
arr.includes( winningCombos[i][1] )
&&
arr.includes( winningCombos[i][2] )
) {
console.log("There's a winner");
break;
}
}

相关内容

最新更新