RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 761659
Accepted
NTP
NTP
Asked:2020-12-22 04:18:45 +0000 UTC2020-12-22 04:18:45 +0000 UTC 2020-12-22 04:18:45 +0000 UTC

自动单元格填充

  • 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 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    user176262
    2020-12-22T04:25:51Z2020-12-22T04:25:51Z

    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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    Python 3.6 - 安装 MySQL (Windows)

    • 1 个回答
  • Marko Smith

    C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

    • 2 个回答
  • Marko Smith

    返回指针的函数

    • 1 个回答
  • Marko Smith

    我使用 django 管理面板添加图像,但它没有显示

    • 1 个回答
  • Marko Smith

    这些条目是什么意思,它们的完整等效项是什么样的

    • 2 个回答
  • Marko Smith

    浏览器仍然缓存文件数据

    • 1 个回答
  • Marko Smith

    在 Excel VBA 中激活工作表的问题

    • 3 个回答
  • Marko Smith

    为什么内置类型中包含复数而小数不包含?

    • 2 个回答
  • Marko Smith

    获得唯一途径

    • 3 个回答
  • Marko Smith

    告诉我一个像幻灯片一样创建滚动的库

    • 1 个回答
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Алексей Шиманский 如何以及通过什么方式来查找 Javascript 代码中的错误? 2020-08-03 00:21:37 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5