Question

我想通过使用HTML表创建一个简单的井字游戏。我目前能够通过将变量更改为true或false将“X”和“O”值添加到HTML表中。但是我无法添加一个轮流功能。当用户点击任何表格单元格时，它应以“X”开头，然后是“O”。我已经尝试过嵌套循环（for loops＆amp; do while）但我似乎无法让它工作。

以下是代码：

java.lang.NullPointerException

Answer 1

您应该向单元格添加onClick事件处理程序，根据全局标记将单元格的值设置为X或O并反转标记（如果您需要游戏将在同一台计算机上播放）。

像这样：

function onCellClick() {
    if (turn)
        this.innerHTML = "X";
    else
        this.innerHTML = "O";

    turn = !turn;
}

Answer 2

你需要在单击一个单元格时处理你的逻辑，为了使它工作，这个函数无法执行转弯条件。

设置一个简单变量来保持当前转弯并使用一个对象来指示该转弯值发生了什么（避免if和切换逻辑）。

var currentTurn = "X";
        var turns = {
          "X": function(element) {
             element.innerHTML = "X";
             },
          "O": function(element) {
             element.innerHTML = "O";
             }
    }

然后你需要为每个单元格设置onclick函数，这将是doTurn

document.getElementById("cell"+i).onclick = doTurn;

在doTurn中，我们可以交换当前的转弯值，然后运行适当的转弯逻辑。

function doTurn()
{
    currentTurn = currentTurn === "X" ? "O" : "X";
    turns[currentTurn](this);
}

我承认这个解决方案更详细，但是，它使用了一些好的做法/方法（介绍Strategy Pattern的使用，并允许您根据需要扩展转向逻辑。

基本的tic tac toe JS

2 个答案: