Javascript 中的井字游戏 - 获奖者问题

Question

我正在试验 Javascript 井字游戏。除了一个序列外，它在所有方面都工作正常，我不确定为什么会发生此错误。

基本结构是每个方块发送一个ID号和onclick，方块得到x/o，记录整体图案并将空闲方块插入空闲数组。由于这是人类与 AI 的对战，每次单击活动（选定 ID - x 或 o）时，值都会设置到图块中，非活动值会自动放置在空闲图块中。

我的 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 时，获胜者并未立即宣布。要复制，在您的前三个回合中，在方块 3、6 和 9 中输入 X。获胜者是 x 没有通知。现在在图块 7 和 8 中输入两个 x 值。这现在会给出两个获胜通知。

不知道为什么？？有任何想法吗？谢谢！

Answer 1

您在停止 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 中的井字游戏 - 获奖者问题

Tic Tac Toe in Javascript - winners issue

javascript

tic-tac-toe