井字游戏的数据组织很简单。
有一个包含很多 HTMLbutton的数组。程序通过使用数组
来记住是否使用了按钮。它使用布尔值
检查要在按钮上显示的图像。
该程序包含一个获胜组合列表，每个使用数组的人都可以使用。当一个人选择 5 时，所有包含 5 的获胜组合都将移动到一个名为 的数组中。然后，人类拥有的职位将从 替换。isUsedisXfreeWinsyourWinsyourWins
代码：
<!DOCTYPE html>
<html>
<title> 1Player </title>
<style>
#stage{
width: 400px;
height: 400px;
padding: 0px;
position: relative;
}
.square{
user-select : none;
-webkit-user-select: none;
-moz-user-select: none;
width: 64px;
height: 64px;
background-color: gray;
position: absolute;
}
</style>
<body>
<div id="stage">
</div>
</body>
<script>
const ROWS = 3;
const COLS = 3;
const GAP = 10;
const SIZE = 64;
var stage = document.querySelector("#stage");
var lotOfButtons = [];
var isUsed = [false,false,false,false,
false,false,false,false,false];
var myPositions = "";
var yourPositions = "";
var youPicked = "";
var iPicked = "";
var isX = true;
var isFirstMove = true;
var myWins = [];
var yourWins = [];
var freeWins = ["123","159","147",
"258",
"369","357",
"456",
"789"];
prepareBoard();
stage.addEventListener("click",clickHandler,false);
function prepareBoard(){ //Prepare the board on which the users will play.
for(var row = 0;row<ROWS;row++){ // Prepare the rows.
for(var col = 0;col < COLS;col++){ //Prepare the columns.
var square = document.createElement("button"); //Prepare the button which represents a square.
square.setAttribute("class","square"); //Make it a square 'officially'.
stage.appendChild(square); //Add the square to the play area..
lotOfButtons.push(square); //Keep a record of squares.
square.style.left = col * (SIZE+GAP) + "px"; //Properly set the horizontal spacing.
square.style.top = row * (SIZE+GAP) + "px"; //Properly set the vertical spacing.
}
}
}
function clickHandler(event){
var index = lotOfButtons.indexOf(event.target);
if(index=== -1 || isX === false){
return;
}
isX = false;
isUsed[index] = true;
event.target.style.backgroundImage = "url(../img/X.png)";
yourMove(index+1);
}
function yourMove(someIndex){
console.log("Finding Human Winning Moves::: ");
yourWins = findWinnindMoves(yourWins,someIndex);
console.log(yourWins);
console.log("Clearing Human Owned Positions::: ");
yourWins = clearOwnedPositions(yourWins,someIndex);
console.log(yourWins + "\n");
myMove();
}
function myMove(){
var isFifthSquareUsed = isFiveUsed();
if(isFifthSquareUsed === false){ //Is fifth square used ?? --- NO!
var selectedSquare = lotOfButtons[4];
selectedSquare.style.backgroundImage = "url(../img/O.PNG)";
isUsed[4] = true;
isFirstMove = false;
isX = true;
console.log("Finding AI Winning Moves::: ");
myWins = findWinnindMoves(myWins,4);
console.log(myWins);
console.log("Clearing AI Owned Positions::: ");
myWins = clearOwnedPositions(myWins,4);
console.log(myWins + "\n");
}else if(isFifthSquareUsed && isFirstMove){ //Is fifth square used ?? --- YES, but it is first move.
//TODO add logic
}else{ //Some random square has already been chosen. Now it is time to use strategy.
//TODO add logic
}
}
function findWinnindMoves(winsArray,someIndex){//using which combination can a user or AI win ?
for(var i = 0;i<freeWins.length;i++){
if(freeWins[i].indexOf(someIndex) != -1){
winsArray.push(freeWins[i]);
i--;
freeWins.splice(i,1);
}
}
return winsArray;
}
function clearOwnedPositions(winsArray,someIndex){ //Reduce the number of squares needed to get triplets.
for(var i=0;i<winsArray.length;i++){
if(winsArray[i].indexOf(someIndex) != -1){
winsArray[i] = winsArray[i].replace(someIndex,"");
}
}
return winsArray;
}
function isFiveUsed(){ //Is AI able to get the center square ?
return isUsed[4];
}
</script>
</html>
问题
如果我单击第二行或第三行而不是第一行，则用户和 AI 获胜动作的确定正常工作。
第 2 行的输出
Finding Human Winning Moves:::
["147", "456"]
Clearing Human Owned Positions:::
17,56
Finding AI Winning Moves:::
["147", "456"]
Clearing AI Owned Positions:::
17,56
第 1 行的输出
Finding Human Winning Moves:::
["123", "123", "123", "123", "123", "123", "123", "123"]
Clearing Human Owned Positions:::
23,23,23,23,23,23,23,23
Finding AI Winning Moves:::
[]
Clearing AI Owned Positions:::
此外，在清除拥有的方格后，数组括号消失了。
为什么会出现这两个问题？