作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在试验一款 Javascript 井字棋游戏。除了一个序列外,它在所有方面都工作正常,我不确定为什么会发生此错误。
基本结构是每个方 block 发送一个ID号和onclick,方 block 得到x/o,记录整体图案并将空闲方 block 插入空闲数组。由于这是人类与 AI 的对战,每次单击事件(选定 ID - x 或 o)时,值都会设置到图 block 中,非事件值会自动放置在空闲图 block 中。
我的 JSFiddle 在这里:https://jsfiddle.net/vaspv/Lqoct19a/18/
JS代码如下:
var aid = "x"; //the selection variable
var iid = "o"; // the inactive variable
var live = []; //live rendering of patterns
var free = []; // shows the free boxes in zero array
var squaresFilled = 0;
live = ["f", "f", "f", "f", "f", "f", "f", "f", "f"];
wins = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
function setval(bno) {
checkfree();
//if cell is free, enter active id, check for winning combinations and update free array
if (live[bno - 1] == "f") {
document.getElementById("c" + bno).innerHTML = aid;
document.getElementById("c" + bno).style.color = 'skyblue';
live.splice(bno - 1, 1, aid);
squaresFilled++;
checkfree();
// if cell is free and total squares are less than or equal to 8, auto set the inactive variable. this is done to ensure that on 9th turn there is no waiting for auto set. Check for winning combinations of inactive variable and update free array
if (squaresFilled < 9) {
var fid = free[0];
var fidd = fid + 1;
document.getElementById("c" + fidd).innerHTML = iid;
live.splice(fidd - 1, 1, iid);
squaresFilled++;
myResulty(live[fidd - 1]);
}
checkfree();
myResult(live[bno - 1]);
//document.getElementById("test1").innerHTML = free + " / " + live; This statement is only there to uncomment and add to p text to see arrays unfolding
} else alert("cell is already filled");
} // end of setval function
function myReload() {
location.reload(true);
}
// allows user selection of active id. if blank, value is x.
function seto() {
aid = "o";
iid = "x";
document.getElementById("buttono").style.color = 'skyblue';
document.getElementById("buttonx").style.color = 'coral';
}
function setx() {
aid = "x";
iid = "o";
document.getElementById("buttonx").style.color = 'skyblue';
document.getElementById("buttono").style.color = 'coral';
}
//resets and inserts free tiles in array
function checkfree() {
free = [];
for (var i = 0; i < 9; i++)
if (live[i] == "f")
free.push(i);
}
// winners using active id
function myResult(wid) {
for (var a = 0; a < 9; a++) {
if (live[wins[a][0]] == wid &&
live[wins[a][1]] == wid &&
live[wins[a][2]] == wid) {
alert("The Winner is " + wid);
myReload();
}
}
}
// winners using inactive id
function myResulty(wido) {
for (var b = 0; b < 9; b++) {
if (live[wins[b][0]] == wido &&
live[wins[b][1]] == wido &&
live[wins[b][2]] == wido) {
alert("The Winner is " + wido);
myReload();
}
}
}
我遇到的问题是,当我在侧栏中插入 3x 时,不会立即宣布获胜者。要复制,在您的前三个回合中,在方 block 3、6 和 9 中输入 X。获胜者是 x 没有通知。现在在图 block 7 和 8 中输入两个 x 值。这现在会给出两个获胜通知。
不知道为什么??有任何想法吗?谢谢!
最佳答案
您在停止 myResult
时遇到错误。
for (var a = 0; a < 9; a++) {
if (live[wins[a][0]] == wid &&
^a goes up to 8 but wins has 7 elements
关于javascript - Javascript 中的井字游戏 - 获奖者问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37381826/
我是一名优秀的程序员,十分优秀!