javascript - Jquery:检查单元格是否水平、垂直或对 Angular 对齐

Question

我有一个 6x7 的表格，当我单击特定单元格时，我需要检查是否:
- 同一行上的 4 个连续单元格或
- 同一列上的 4 个连续单元格或
- 同一条对 Angular 线上的 4 个连续单元格属性类别为蓝色。

我试了一下，看起来水平和垂直检查效果很好。但不是对 Angular 线。有什么想法吗？

$(".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;
  }
}

    });

.circle {
  width: 30px;
  height: 30px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background: #706e6e;
  border: 2px solid black;
}

.circle.blue {
  background-color: blue;
}

<table>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我们检查该元素是否实际上是蓝色的。如果没有，那么这场比赛就没有获胜。否则，我们会检查 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;
}