为什么我的AI在井字游戏中表现得很奇怪?
Why is my AI acting strange in a game of tic-tac-toe?
井字游戏的数据组织很简单。
有一个包含大量HTML button
的数组。
程序记住如果一个按钮被使用isUsed
数组。
它使用isX
布尔值检查按钮上显示的图像。
该程序包含一个获胜组合的列表,每个人都可以使用freeWins
数组。当人类选择5时,所有包含5的获胜连击都被移动到一个名为yourWins
的数组中。然后,人类拥有的位置将从yourWins
中替换。
<!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:::
此外,在清除了所有的方括号之后,数组括号也消失了。
为什么会出现这两个问题?
要回答您关于数组的第二个问题,您不能在同一区域初始化空白数组和.push()
。每次运行JavaScript时,它都会重新创建数组,这意味着要告别你放入其中的东西。也许应该在函数外部初始化Array,并将其余代码放在函数内部。至于你的游戏AI,我不太确定。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 可以't让我的if语句处理js中的html表单输入
- 我的单元测试选项是什么
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 我的职位回报太快了,如何做出承诺
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何识别我的网站中的慢速设备
- 如何将JSON数据导入我的ejs模板
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 知道为什么我的旋转木马不会自动更改图片吗
- 我的模板未被解析
- 无法将数据从firebase获取到我的html页面
- 角度图表;t显示在我的页面中
- 我的AngularJS表达式没有'不起作用
- 将电视直播频道从网站嵌入我的网站
- /undefined在我的404错误日志中多次出现
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 为什么我的乒乓球AI如此紧张
- 为什么我的AI在井字游戏中表现得很奇怪?
- 尝试在我的井字(javascript)中实现Minimax AI