Jquery: проверьте, выровнены ли ячейки по горизонтали, вертикали или диагонали - PullRequest
Новая
       1

Jquery: проверьте, выровнены ли ячейки по горизонтали, вертикали или диагонали

2 голосов
/ 21 марта 2020

У меня есть таблица 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;
  }
}

    });
.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>

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Вот решение. Я реализовал две функции, одна из которых проверяет, выровнены ли 4 ячейки сверху слева, а другая - снизу справа. Оба начинаются с четвертого ряда, потому что перед этим 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;
          }
        }
    }
  }
0 голосов
/ 21 марта 2020

Мы проверяем, действительно ли пункт синий. Если нет, то игра не выиграна. В противном случае мы проверяем товары в 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...