Question

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

当玩家进行移动时，X被放置在框内，并且当计算机进入O.

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

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

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

Answer 1

使用textContent和innerText获取元素的文字。

示例：

<!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会将text存储在textContent中。如果没有textContent属性（或者textContent是空字符串或只是空格），那么它会尝试将innerText存储在text变量中。最后，如果|| ''和textContent都找不到 * ，我们会使用innerText将其设置为空字符串。

* 仅当textContent为空字符串/空格并且innerText不存在时才需要这样做，在这种情况下两者都是假的。我们不是让text成为undefined，而是存储空字符串''。

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

Answer 2

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

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

然后使用

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

并使用单独的绘图功能

Answer 3

与大卫相似......

我使用数组来构建一个tic tac toe游戏来保持移动，然后根据数组显示（将游戏逻辑与显示分开）。这样你就不会在乎细胞中的细胞了。

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

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

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

Answer 4

我认为既然井字游戏很简单，你就可以使用一个阵列。

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并确定其值是X还是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';
}

我写了some of the code你需要制作一个井字游戏才能让你更好地理解。剩下的就是显示轮到谁了，当玩家点击一个盒子（在轮到他们的时候），他们的符号被添加到那个盒子里（如果它是空的），并重置游戏。祝好运。：）

JavaScript函数查看是否有任何文本在HTML元素中

4 个答案: