Jquery：检查单元格是否水平，垂直或对角对齐

Question

我有一个 6x7 表，当我单击特定单元格时，我需要检查：- 同一行上的4 个连续单元格或 - 同一列上的4 个连续单元格或 - 同一对角线上的 4 个连续单元格是否具有属性类蓝色的。我试了一下，似乎水平和垂直检查工作正常。但不是对角线。有任何想法吗？$(".circle").click(function() {  var colindex = $(this).closest('td').index() + 1;  var rowindex = $(this).closest('tr').index() + 1;  if(checkHorizontally() || checkVertically() || checkDiagonally()){      console.log("Blue wins");  }  function checkHorizontally(){    var sum;    for(i=6;i>0;i--){      for(j=1;j<=7;j++){        var cell = $('tr:nth-child('+i+') td:nth-child('+j+')');        if (cell.find('div').css('background-color')==='rgb(0, 0, 255)'){           sum+=1;        }        else{           sum=0;        }        if(sum>=4){          console.log("blue wins horizontally");          return true;        }      }      sum=0;    }  }function checkVertically(){  var sum;  for(i=1;i<=7;i++){    for(j=1;j<=6;j++){      var cell = $('tr:nth-child('+j+') td:nth-child('+i+')');      if (cell.find('div').css('background-color')==='rgb(0, 0, 255)'){        sum+=1;      }      else{        sum=0;      }    if(sum>=4){      console.log("blue wins vertically");      return true;    }  }  sum=0;  }}function checkDiagonally(){  var sum;  for(k=1;k<=7;k++){      for(var y=1, x=k; x<7 ; y++,x++){      var cell = $('tr:nth-child('+y+') td:nth-child('+x+')');      if (cell.find('div').css('background-color')==='rgb(0, 0, 255)'){        sum+=1;      }      else{        sum=0;      }    if(sum>=4){      console.log("blue wins diagonally");      return true;    }  }  sum=0;  }}    });

Answer 1

这是一个解决方案。我实现了两个函数，一个检查 4 个单元格是否从左上角对齐，一个从右下角检查。两者都从第四行开始，因为在第四行之前没有 4 个连续的单元格。

function checkDiagonally(color){

    var numRows = $('table tr').length;

    var numCols = $( "table tr:last td" ).length;

    for (var j = 4; j < numCols ; j++)

    {

        for (var i = 1 ; i <= 4; i++)

        {

          var cell1 = $('tr:nth-child('+j+') td:nth-child('+i+')');

          var cell2 = $('tr:nth-child('+(j-1)+') td:nth-child('+(i+1)+')');

          var cell3 = $('tr:nth-child('+(j-2)+') td:nth-child('+(i+2)+')');

          var cell4 = $('tr:nth-child('+(j-3)+') td:nth-child('+(i+3)+')');

          if (cell1.find('div').css('background-color')===color &&

              cell2.find('div').css('background-color')===color &&

              cell3.find('div').css('background-color')===color &&

              cell4.find('div').css('background-color')===color){

                return true;

          }

        }

      }

    }

function checkDiagonallyRTL(color){

    var numRows = $('table tr').length;

    var numCols = $( "table tr:last td" ).length;

    for (var j = 4; j < numCols ; j++)

    {

      for (var i = 7 ; i >= 4; i--)

      {

          var cell1 = $('tr:nth-child('+j+') td:nth-child('+i+')');

          var cell2 = $('tr:nth-child('+(j-1)+') td:nth-child('+(i-1)+')');

          var cell3 = $('tr:nth-child('+(j-2)+') td:nth-child('+(i-2)+')');

          var cell4 = $('tr:nth-child('+(j-3)+') td:nth-child('+(i-3)+')');

          if (cell1.find('div').css('background-color')===color &&

              cell2.find('div').css('background-color')===color &&

              cell3.find('div').css('background-color')===color &&

              cell4.find('div').css('background-color')===color){

                return true;

          }

        }

    }

  }

Answer 2

我们检查该项目是否真的是蓝色的。如果没有，那么游戏就不会赢。否则，我们会检查 4 个方向的项目。我们在所有四个方向上都有三个案例，具体取决于我们检查的模式中项目的位置。

 function check(item) {

    if (!item.hasClass("blue")) return false;

    var td = item.parent();

    var tr = td.parent();

    var tds = tr.find("td");

    var tdIndex = tds.index(td);

    var trParent = tr.parent();

    var trs = trParent.find("tr");

    var trIndex = trs.index(tr); //Initializing helper variables for the rows and columns

    if (tds.length >= 3) {

        if (tdIndex >= 2) {

            if (td.prev().find(".circle.blue").length && td.prev().prev().find(".circle.blue").length) return true;

        }

        if (tdIndex < tds.length - 2) {

            if (td.next().find(".circle.blue").length && td.next().next().find(".circle.blue").length) return true;

        }

        if ((tdIndex > 0) && (tdIndex < tds.length - 1)) {

            if (td.prev().find(".circle.blue").length && td.next().find(".circle.blue").length) return true;

        }

    }

    if (trs.length >= 3) {

        if (trIndex >= 2) {

            if ($(tr.prev().find("td")[tdIndex]).find(".circle.blue").length && $(tr.prev().prev().find("td")[tdIndex]).find(".circle.blue").length) return true;

        }

        if (trIndex < trs.length - 2) {

            if ($(tr.next().find("td")[tdIndex]).find(".circle.blue").length && $(tr.next().next().find("td")[tdIndex]).find(".circle.blue").length) return true;

        }

        if ((trIndex > 0) && (trIndex < trs.length - 1)) {

            if ($(tr.prev().find("td")[tdIndex]).find(".circle.blue").length && $(tr.next().find("td")[tdIndex]).find(".circle.blue").length) return true;

        }

    }

    if ((trs.length >= 3) && (tds.length >= 3)) {

        if ((trIndex >= 2) && (tdIndex >= 2)) {

            if ($(tr.prev().find("td")[tdIndex - 1]).find(".circle.blue").length && $(tr.prev().prev().find("td")[tdIndex - 2]).find(".circle.blue").length) return true;

        }

        if ((trIndex >= 2) && (tdIndex < tds.length - 2)) {

            if ($(tr.prev().find("td")[tdIndex + 1]).find(".circle.blue").length && $(tr.prev().prev().find("td")[tdIndex + 2]).find(".circle.blue").length) return true;

        }

        if ((trIndex < trs.length - 2) && (tdIndex >= 2)) {

            if ($(tr.next().find("td")[tdIndex - 1]).find(".circle.blue").length && $(tr.next().next().find("td")[tdIndex - 2]).find(".circle.blue").length) return true;

        }

        if ((trIndex < trs.length - 2) && (tdIndex < tds.length - 2)) {

            if ($(tr.next().find("td")[tdIndex + 1]).find(".circle.blue").length && $(tr.next().next().find("td")[tdIndex + 2]).find(".circle.blue").length) return true;

        }

        if ((trIndex > 0) && (trIndex < trs.length - 1) && (tdIndex > 0) && (tdIndex < tds.length - 1)) {

            if (

                ($(tr.prev().find("td")[tdIndex - 1]).find(".circle.blue").length && $(tr.next().find("td")[tdIndex + 1]).find(".circle.blue").length) ||

                ($(tr.prev().find("td")[tdIndex + 1]).find(".circle.blue").length && $(tr.next().find("td")[tdIndex - 1]).find(".circle.blue").length)

               ) return true;

        }

    }

    return false;

}