1

我正在创建一个非常基本的 tic tac toe javascript 版本。我已经使用表格设置了电路板并适当地分配了边框。

当玩家移动时，一个 X 被放置在盒子内，当计算机移动一个 O 时。

但是，我的问题是试图确定单元格是否已被“使用”，这意味着其中已经存在 X 或 O。

javascript中是否有一个函数可以检查HTML元素中的内容，或者任何人都可以想到另一种方法来做到这一点？我考虑使用 9 的数组，持有 x 或 o 并以这种方式检查，但我遇到了如何将单元格编号传递给该函数以更新数组的问题。

我是 javascript 新手，所以如果存在这些可能性中的任何一种，请告诉我，或者如果您有任何建议！

4

4 回答 4

2

使用textContentandinnerText获取元素的文本。

例子：

<!doctype html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <p id="hello-container">Hello, World!</p>
        <script type="text/javascript">
            var el = document.getElementById('hello-container');
            var text = el.textContent || el.innerText || '';
            alert('The text is: ' + text);
        </script>
    </body>
</html>

解释：

由于 IE8- 使用innerText和 Firefox 使用textContent（其他浏览器选择一侧或两者），您需要检查这两个属性。我们利用 JavaScript 的逻辑或运算符||在一行中检查两个属性。如果有属性text = el.textContent || el.innerText将存储el.textContent。如果没有属性（或者如果是空字符串或只是空格），那么它将尝试存储在变量中。最后，如果既没有也找不到 * ，我们将其设置为空字符串。texttextContenttextContenttextContentinnerTexttext|| ''textContentinnerText

*仅当textContent是空字符串/空格innerText且不存在时才需要这样做，在这种情况下两者都是错误的。我们不是 let textbe undefined，而是存储空字符串''。

如果您想检查 HTML 是否在元素中而不是文本中（如果您在 X 和 O 中使用图像元素，这将很有帮助），您可以使用innerHTML. 这是所有浏览器的标准！

于 2012-11-13T04:10:12.167 回答
2

最好的方法是使用二维数组：

            var tictactoe = [["","",""],["","",""],["","",""]]

然后使用

            if(tictactoe[row][col] == "")
                tictactoe[row][col] = "X" //(or "O", you decide)

并使用单独的功能进行绘图

于 2012-11-13T04:13:55.213 回答
1

类似于大卫……</p>

我使用数组构建了一个井字游戏来保存动作，然后基于数组进行显示（将游戏逻辑与显示分开）。这样你就不用关心牢房里有什么了。

无论如何，你可以这样做：

if (element.textContent || element.innerText) {
  // there is some text content
}

但是，元素中可能存在导致误报的空格。或者 X 和 O 可能是一个图像元素，无论如何。

于 2012-11-13T04:16:04.460 回答
0

我认为由于井字棋是如此简单，你可以只使用一个数组。

var board = new Array(9);

//Board layout:
// [0][1][2]
// [3][4][5]
// [6][7][8]

//Win if any of these combinations are present
//012, 036, 048, 147, 246, 258, 345, 678

然后只需循环board并确定它是否具有Xor的值O并进行一些简单的检查以查看它们是否连续有 3 个。

var x = [], o = [];
var winner = 'Game in Progress';
for(var i in board){
    if(board.hasOwnProperty(i)){
      if(board[i] == 'X') 
        x[i] = true;
      else if(board[i] == 'O')
        o[i] = true;
      if(i == 8) winner = 'Cat Game';
    }
}

if((x[0] && x[1] && x[2]) || (x[0] && x[3] && x[6]) ||
   (x[0] && x[4] && x[8]) || (x[1] && x[4] && x[7]) ||
   (x[2] && x[4] && x[6]) || (x[2] && x[5] && x[8]) ||
   (x[3] && x[4] && x[5]) || (x[6] && x[7] && x[8])){
     winner = 'X is the Winner';
}

if(winner != 'X is the Winner')
if((o[0] && o[1] && o[2]) || (o[0] && o[3] && o[6]) ||
   (o[0] && o[4] && o[8]) || (o[1] && o[4] && o[7]) ||
   (o[2] && o[4] && o[6]) || (o[2] && o[5] && o[8]) ||
   (o[3] && o[4] && o[5]) || (o[6] && o[7] && o[8])){
     winner = 'O is the Winner';
}

我写了一些制作井字游戏所需的代码，以便您更好地理解。剩下的就是显示轮到谁了，这样当玩家点击一个框（在他们的回合中）时，他们的符号就会被添加到那个框（如果它是空的），并重置游戏。祝你好运。:)

于 2012-11-13T05:31:15.533 回答