猿问

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

我有一个 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;

  }

}


    });


海绵宝宝撒
浏览 139回答 2
2回答

江户川乱折腾

这是一个解决方案。我实现了两个函数,一个检查 4 个单元格是否从左上角对齐,一个从右下角检查。两者都从第四行开始,因为在第四行之前没有 4 个连续的单元格。function checkDiagonally(color){&nbsp; &nbsp; var numRows = $('table tr').length;&nbsp; &nbsp; var numCols = $( "table tr:last td" ).length;&nbsp; &nbsp; for (var j = 4; j < numCols ; j++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 1 ; i <= 4; i++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell1 = $('tr:nth-child('+j+') td:nth-child('+i+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell2 = $('tr:nth-child('+(j-1)+') td:nth-child('+(i+1)+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell3 = $('tr:nth-child('+(j-2)+') td:nth-child('+(i+2)+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell4 = $('tr:nth-child('+(j-3)+') td:nth-child('+(i+3)+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cell1.find('div').css('background-color')===color &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell2.find('div').css('background-color')===color &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell3.find('div').css('background-color')===color &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell4.find('div').css('background-color')===color){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }function checkDiagonallyRTL(color){&nbsp; &nbsp; var numRows = $('table tr').length;&nbsp; &nbsp; var numCols = $( "table tr:last td" ).length;&nbsp; &nbsp; for (var j = 4; j < numCols ; j++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; for (var i = 7 ; i >= 4; i--)&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell1 = $('tr:nth-child('+j+') td:nth-child('+i+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell2 = $('tr:nth-child('+(j-1)+') td:nth-child('+(i-1)+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell3 = $('tr:nth-child('+(j-2)+') td:nth-child('+(i-2)+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell4 = $('tr:nth-child('+(j-3)+') td:nth-child('+(i-3)+')');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cell1.find('div').css('background-color')===color &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell2.find('div').css('background-color')===color &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell3.find('div').css('background-color')===color &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell4.find('div').css('background-color')===color){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }

holdtom

我们检查该项目是否真的是蓝色的。如果没有,那么游戏就不会赢。否则,我们会检查 4 个方向的项目。我们在所有四个方向上都有三个案例,具体取决于我们检查的模式中项目的位置。&nbsp;function check(item) {&nbsp; &nbsp; if (!item.hasClass("blue")) return false;&nbsp; &nbsp; var td = item.parent();&nbsp; &nbsp; var tr = td.parent();&nbsp; &nbsp; var tds = tr.find("td");&nbsp; &nbsp; var tdIndex = tds.index(td);&nbsp; &nbsp; var trParent = tr.parent();&nbsp; &nbsp; var trs = trParent.find("tr");&nbsp; &nbsp; var trIndex = trs.index(tr); //Initializing helper variables for the rows and columns&nbsp; &nbsp; if (tds.length >= 3) {&nbsp; &nbsp; &nbsp; &nbsp; if (tdIndex >= 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (td.prev().find(".circle.blue").length && td.prev().prev().find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (tdIndex < tds.length - 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (td.next().find(".circle.blue").length && td.next().next().find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if ((tdIndex > 0) && (tdIndex < tds.length - 1)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (td.prev().find(".circle.blue").length && td.next().find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; if (trs.length >= 3) {&nbsp; &nbsp; &nbsp; &nbsp; if (trIndex >= 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(tr.prev().find("td")[tdIndex]).find(".circle.blue").length && $(tr.prev().prev().find("td")[tdIndex]).find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (trIndex < trs.length - 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(tr.next().find("td")[tdIndex]).find(".circle.blue").length && $(tr.next().next().find("td")[tdIndex]).find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if ((trIndex > 0) && (trIndex < trs.length - 1)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(tr.prev().find("td")[tdIndex]).find(".circle.blue").length && $(tr.next().find("td")[tdIndex]).find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; if ((trs.length >= 3) && (tds.length >= 3)) {&nbsp; &nbsp; &nbsp; &nbsp; if ((trIndex >= 2) && (tdIndex >= 2)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(tr.prev().find("td")[tdIndex - 1]).find(".circle.blue").length && $(tr.prev().prev().find("td")[tdIndex - 2]).find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if ((trIndex >= 2) && (tdIndex < tds.length - 2)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(tr.prev().find("td")[tdIndex + 1]).find(".circle.blue").length && $(tr.prev().prev().find("td")[tdIndex + 2]).find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if ((trIndex < trs.length - 2) && (tdIndex >= 2)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(tr.next().find("td")[tdIndex - 1]).find(".circle.blue").length && $(tr.next().next().find("td")[tdIndex - 2]).find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if ((trIndex < trs.length - 2) && (tdIndex < tds.length - 2)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(tr.next().find("td")[tdIndex + 1]).find(".circle.blue").length && $(tr.next().next().find("td")[tdIndex + 2]).find(".circle.blue").length) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if ((trIndex > 0) && (trIndex < trs.length - 1) && (tdIndex > 0) && (tdIndex < tds.length - 1)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ($(tr.prev().find("td")[tdIndex - 1]).find(".circle.blue").length && $(tr.next().find("td")[tdIndex + 1]).find(".circle.blue").length) ||&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ($(tr.prev().find("td")[tdIndex + 1]).find(".circle.blue").length && $(tr.next().find("td")[tdIndex - 1]).find(".circle.blue").length)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;) return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return false;}
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答