主页 / 问题 / 761659
Accepted
NTP
Asked:2020-12-22 04:18:45 +0800 CST2020-12-22 04:18:45 +0800 CST

自动单元格填充

  • 772

有一个像素字段和一个用于选择改变颜色的像素的代码：

$(".pixel").click(function() {
  $(this).toggleClass("white");
  $(this).toggleClass("black");
})
var delta;
var isCall = false;
if (!isCall) {
  var zoom = 1;
  isCall = true;
}
#art {
  width: 101px;
  height: 101px;
  display: table;
  border-spacing: 1px;
  background-color: #d8d8d8;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="art">
  <div class="row">
    <div class="pixel white" id="1-1"></div>
    <div class="pixel white" id="1-2"></div>
    <div class="pixel white" id="1-3"></div>
    <div class="pixel white" id="1-4"></div>
    <div class="pixel white" id="1-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="2-1"></div>
    <div class="pixel white" id="2-2"></div>
    <div class="pixel white" id="2-3"></div>
    <div class="pixel white" id="2-4"></div>
    <div class="pixel white" id="2-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="3-1"></div>
    <div class="pixel white" id="3-2"></div>
    <div class="pixel white" id="3-3"></div>
    <div class="pixel white" id="3-4"></div>
    <div class="pixel white" id="3-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="4-1"></div>
    <div class="pixel white" id="4-2"></div>
    <div class="pixel white" id="4-3"></div>
    <div class="pixel white" id="4-4"></div>
    <div class="pixel white" id="4-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="5-1"></div>
    <div class="pixel white" id="5-2"></div>
    <div class="pixel white" id="5-3"></div>
    <div class="pixel white" id="5-4"></div>
    <div class="pixel white" id="5-5"></div>
  </div>
</div>

但是需要自动填充整个字段，假设我单击某个单元格，随机相邻的单元格会稍微延迟填充（就像多米诺骨牌向各个方向倒下）等等，直到整个字段都被填充。这甚至可以实施吗？我被暗示在KAMI游戏中有类似的算法，但我还没有弄清楚如何做到这一点，所以我希望你的建议。

javascript

1 个回答

  1. Best Answer

    var size = 20;
for (var i = 0; i < size; i++) {
  var row = $('<div class="row"></div>');
  $("#art").append(row);
  for (var j = 0; j < size; j++) {
    row.append('<div class="pixel white"></div>');
  }
}


var timerFind = null;
var convert = [];
$(".pixel").click(function() {
  $(this).removeClass("white");
  $(this).addClass("black");
  if (timerFind)
    return;      

  function FindPixels() {
    var matrix = [];
    $(".row").each(function(iRow, row){
      matrix[iRow] = [];
      $(row).find(".pixel").each(function(iPix, pix){
        matrix[iRow].push($(pix));
      });
    });
  
    var blacks = [];
    for (var iRow = 0; iRow < matrix.length; iRow++) {
      for (var iPix = 0; iPix < matrix[iRow].length; iPix++) {
        if (matrix[iRow][iPix].hasClass("black"))
          blacks.push({ row: iRow, col: iPix });
      }  
    }

    for (var iB = 0; iB < blacks.length; iB++) {
      for (var i = Math.max(0, blacks[iB].row-1); 
          i <= Math.min(matrix.length-1, blacks[iB].row+1); i++) {
        for (var j = Math.max(0, blacks[iB].col-1); 
            j <= Math.min(matrix[0].length-1, blacks[iB].col+1); j++) {
          if ((i == blacks[iB].row || j == blacks[iB].col) && 
              matrix[i][j].hasClass("white") && 
              convert.indexOf(matrix[i][j]) == -1) {
            convert.push(matrix[i][j]);
            $("#convert").text(convert.length);
          }
        }
      }
    }

    if (convert.length > 0) {
          var index = Math.floor(Math.random() * convert.length)
          convert[index].removeClass("white");
          convert[index].addClass("black");
          convert = [];
          $("#convert").text(convert.length);
    }

    if ($(".pixel.white").length == 0) {
      console.log("done");
    } else {
      timerFind = setTimeout(FindPixels, 100);
    }
  } // FindPixels

  timerFind = setTimeout(FindPixels, 100);
});

$(".row").last().find(".pixel").last().click();
    #art {
  width: 181px;
  height: 181px;
  display: table;
  border-spacing: 1px;
  background-color: #d8d8d8;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="convert">0</span>
<div id="art">
</div>

    • 5

相关问题