Question

我第一次学习Javascript。我正在做一个井字游戏。这可能不是编码它的最佳方式，但我决定使用以下策略：

＃中的每个网格都是自己的div。如果一个div被＆＃34; X＆＃34;占用，它会添加一个新的类＆＃34; xClass＆＃34 ;;同样，如果它被＆＃34; O＆＃34;占用，它的新课程就是＆＃34; oClass＆＃34;。

我想编写一个名为winCheck（）的函数来检查游戏中的任何获胜组合是否已将其类更改为全部X或全部O.我已经在jQuery中为div提供了自己的变量

var winningCombos = [
    [box1, box2, box3], 
    [box4, box5, box6], 
    [box7, box8, box9],
    [box1, box4, box7],
    [box2, box5, box8],
    [box3, box6, box9],
    [box1, box5, box9],
    [box3, box5, box7]
];

所以例如，如果box1，box2和box3都被X占用，他们的类将变为＆＃34; xClass＆＃34;和X胜利。我可以用什么函数来验证他们的班级是否已经改变了？

我尝试过以下方法：

if (winningCombos[i].children().className === "xClass") {
    alert("Player 1 has won!");

我也在尝试.hasClass（）方法，这可行吗？

if (winningCombos[i].children.hasClass("xClass") === "true" {
    alert("Player 1 has won!");

有人可以帮忙吗？

Answer 1

您可以这样做的另一种方法是使用唯一的类名设置每个获胜组合。因此，方框1,2和3将具有共享标识符类。

所以你最终会得到八个标识符类，以你的二维数组来判断。

如果允许div为'X'，'O'或两者都不允许。然后，您可以通过标识符类来执行迭代器，以查看是否有任何个人触发了胜利条件。

 // Giving the identifier 'tttX' as the class name, X being the unique
 // Could make that an array itself. I am going for quick and dirty here
 $(".board div").click(function(e){
     var winningComboArrayLength = 8; // If the board went to 4x4 it would be 16
     var winningConditionLength = 3;
     for(var i = 0; i < winningComboArrayLength; i++){
         if($("div.xClass.ttt" + i.toString()).length == winningConditionLength){
             // X won logic
             alert('X player won!'); 
         }
         else if($("div.oClass.ttt" + i.toString()).length == 3){
             // O won logic
             alert('O player won!');
         }
     }
 });

现在我进一步研究它，你可以用jQuery对象创建数组。

然后通过该阵列以不同的方式检查获胜条件。

var winningCombos = [];
$(function(){   winningCombos = [
          $('#box1,#box2,#box3'),
          $('#box4,#box5,#box6'),
          $('#box7,#box8,#box9'),
          $('#box1,#box4,#box7'),
          $('#box2,#box5,#box8'),
          $('#box3,#box6,#box9'),
          $('#box1,#box5,#box9'),
          $('#box3,#box5,#box7')
     ];

     $(".board div").click(function(e){
         var winningConditionLength = 3;
         var maxLength = 0;
         for(var i = 0; i < winningCombos.length; i++){
             if(winningCombos[i].filter('.xClass').length == winningConditionLength){
                 // X won logic
                 $('.result').text('X player won!'); 
             }
             else if(winningCombos[i].filter('.oClass').length == winningConditionLength){
                 // O won logic
                 $('.result').text('O player won!');
             }
         }
     });      


});

Answer 2

我发现你在winningCombos里面嵌套了一个数组，这个数组在你以后的代码中没有用过，所以我希望它是这样的，

var winningCombos = [
    box1, box2, box3, 
    box4, box5, box6, 
    box7, box8, box9,
    box1, box4, box7,
    box2, box5, box8,
    box3, box6, box9,
    box1, box5, box9,
    box3, box5, box7
];

Answer 3

是的，hasClass()更好。但是你正在混合Javascript对象，数组和jQuery对象。您只能在jQuery对象上使用children()，而只能在Javascript DOM对象上使用className。

因此，您必须在一个周期内检查每个获胜策略。例如，如果box1是包装第一个tic-tac-toe div的jQuery对象，那么这应该有效：

/**
 * Returns true, if a player with a given symbol won, false otherwise
 */
function checkIfWon(symbol) {
    for (var i = 0; i < winningCombos.size(); i++) {
        var hits = 0;
        for (var j = 0; j < 3; j++) {
           if (winningCombos[i][j].hasClass(symbol + "Class")) {
               hits++;
           } else {
               break; // no need to check this combo on
           }
        }
        if (hits === 3) {
            // we got a winning combo!
            return true;
        }
    }
    return false;
}

if (checkIfWon('x')) {
    alert('First player won!');
} else if (checkIfWon('o')) {
    alert('Second player won!');
}

jQuery：检查元素是否有类，然后执行函数

3 个答案: