Javascript Tic-tac-toe游戏在X和O之间切换

我正在做一个Tic-Tac-Toe，但我有点被困在交叉en圆之间切换（正如您在var列表和函数img中看到的）。 我怎样才能让它工作

Javascript代码

变码

var vak1 = document.getElementById("vak1");
var vak2 = document.getElementById("vak2");
var vak3 = document.getElementById("vak3");
var vak4 = document.getElementById("vak4");
var vak5 = document.getElementById("vak5");
var vak6 = document.getElementById("vak6");
var vak7 = document.getElementById("vak7");
var vak8 = document.getElementById("vak8");
var vak9 = document.getElementById("vak9");
var circle = "../img/circle.jpg";
var cross = "../img/cross.jpg";
var empty = "../img/empty.jpg";
var Player = document.getElementById("player");

第一个函数表示轮到谁了

function player() {
"use strict";
if (Player.innerHTML == 1) {

    Player.innerHTML = 2;
    window.alert("Speler 2 is aan de beurt");
} else {
    Player.innerHTML = 1;
    window.alert("Speler 1 is aan de beurt");
}
}

应在x和o映像之间切换的函数

function img(HTMLTableDataCellElement) {
"use strict";
if (document.getElementById(HTMLTableDataCellElement).className ===  "leeg") {
    document.getElementById(HTMLTableDataCellElement).src = cross;
    document.getElementById(HTMLTableDataCellElement).className = "kruis";
    player();
} else {
    document.getElementById(HTMLTableDataCellElement).src = circle;
    document.getElementById(HTMLTableDataCellElement).className = "rondje";
    player();
}
}

HTML代码：

博特，卡斯·恩埃伦
博特、卡斯和埃伦
安贝尔特
斯佩勒
1.
分数
斯佩勒1号
0
斯佩勒2号
0
安塔尔隆德斯酒店
0
启动spel

---

您需要检查

img（）

函数中的玩家回合。这应该可以：

function img(HTMLTableDataCellElement) {
"use strict";

  if(Player.innerHTML == 1) {
    document.getElementById(HTMLTableDataCellElement).src = cross;
    document.getElementById(HTMLTableDataCellElement).className = "kruis";
    player();
} else {
    document.getElementById(HTMLTableDataCellElement).src = circle;
    document.getElementById(HTMLTableDataCellElement).className = "rondje";
    player();
}
}

您可以看到它在这个JS小提琴中工作：

一个更完整的解决方案是将当前播放器存储为变量，而不是在

元素中存储为HTML。您还可以优化

img（）

函数，在kruis en rondje之间切换，而无需重复相同的代码。类似的操作如下：

function img(HTMLTableDataCellElement) {
    "use strict";
    if(HTMLTableDataCellElement.className ==  "leeg") {
        HTMLTableDataCellElement.src = playerData[currentPlayer-1].src;
        HTMLTableDataCellElement.className = playerData[currentPlayer-1].className;
        player();
    }
}

var playerData = [
  {
    src: "cross",
    className: "kruis"},
  {
    src: "circle",
    className: "rondje"}
];

var vak1 = document.getElementById("vak1");
var vak2 = document.getElementById("vak2");
var vak3 = document.getElementById("vak3");
var vak4 = document.getElementById("vak4");
var vak5 = document.getElementById("vak5");
var vak6 = document.getElementById("vak6");
var vak7 = document.getElementById("vak7");
var vak8 = document.getElementById("vak8");
var vak9 = document.getElementById("vak9");
var circle = "../img/circle.jpg";
var cross = "../img/cross.jpg";
var empty = "../img/empty.jpg";
var currentPlayer = 1;


function player() {
    "use strict";
    currentPlayer = (currentPlayer == 2) ? currentPlayer = 1 : currentPlayer = 2;

    document.getElementById("player").innerHTML = currentPlayer;
    window.alert("Speler "+currentPlayer+" is aan de beurt");
}

您还需要清理HTML和JS，只需传递

this

（对象引用）而不是图像id（字符串）

---

我已经更新了JS fiddle，所以你可以看到它是如何工作的：Hoop dat het hept hept u！

如果没有演示，很难说，但问题似乎是，实际上，根据这里的播放器，图像之间没有切换。清理一点后，你的代码如下所示：

function img(cell_id) {
    "use strict";
    var selCell = document.getElementById(cell_id);
    if (selCell.className ===  "leeg") {
        selCell.src = cross;
        selCell.className = "kruis";
        player();
    } else {
        selCell.src = circle;
        selCell.className = "rondje";
        player();
    }
}

function img(cell_id) {
    "use strict";
    var selCell = document.getElementById(cell_id);
    if (selCell.className ===  "leeg") {
        if (Player.innerHTML == 1) {
            selCell.src = cross;
            selCell.className = "kruis";
        } else {
            selCell.src = circle;
            selCell.className = "rondje";
        }
        player();
    }
}

据我所知，这是为了：

检查单元格是否为空

如果是，请画一个十字

如果没有，请画一个圆圈

您需要的是：

检查单元格是否为空

如果没有，什么也不做

如果是：

• 如果轮到玩家1，将球传给对方
• 如果轮到玩家2，则放置圆圈

比如说：

function img(cell_id) {
    "use strict";
    var selCell = document.getElementById(cell_id);
    if (selCell.className ===  "leeg") {
        selCell.src = cross;
        selCell.className = "kruis";
        player();
    } else {
        selCell.src = circle;
        selCell.className = "rondje";
        player();
    }
}

function img(cell_id) {
    "use strict";
    var selCell = document.getElementById(cell_id);
    if (selCell.className ===  "leeg") {
        if (Player.innerHTML == 1) {
            selCell.src = cross;
            selCell.className = "kruis";
        } else {
            selCell.src = circle;
            selCell.className = "rondje";
        }
        player();
    }
}

---

另外，我将“HTMLTableDataCellElement”替换为“cell_id”，因为您没有向函数传递HTMLTableDataCellElement对象。事实上，您只传递了一个id，因此调用传递的变量HTMLTableDataCellElement会让人感到困惑。

您能用iets做一个演示吗？anders是ook（或其他）什么“在"意思是什么？什么不起作用？Ha veel nederlandstaligen hier。你应该将当前图像存储在一个变量中，可能最好是作为

布尔值

。所以我认为你要问的问题是如何找出哪个玩家点击了一个单元格，这样你就知道是将其转换为

X

还是

O

。答案是你应该我们有一个数据结构（一个对象）来存储游戏状态（包括轮到谁了），而不是将其存储在HTML中，这是一个可怕的混乱。快速而肮脏的答案是，您必须使用与

Player

函数相同的

Player.innerHTML

。