javascript

Question

我在玩一款游戏，但遇到了一个问题。查看代码并测试它。

var createGrid=function(x,y){
     var arrY = new Array(),
      arrX,
            container = $(".table");
  i=1;
     for(var iy=0; iy<y; iy++){
      arrX = new Array();
      for(var ix=0; ix<x; ix++){
       arrX[ix]='<div class="cell">'+i+'</div>';
    i++;
      }
      arrY[iy]='<div class="row">'+arrX.join("\r\n")+'</div>';
     }
     container.append(arrY.join("\r\n"));
    };
// call function
(function($){
 // create grid
 createGrid(Math.ceil($(window).width()/50),Math.ceil($(window).height()/50));
 // setup on ready
 $(document).ready(function(){
  var cell= $(".cell"),
   maxCell = cell.length,
   // find random cell and setup
   randomActivate = function(){
     $(".cell.active").removeClass("active");
     var active=Math.round(Math.random()*(maxCell-1));
     cell.eq(active).addClass("active");
    };
   // start random cell
   randomActivate();
   // loop random cell
   setInterval(function(){
    randomActivate();
   }, 300);
 });
}(jQuery));

body{
 padding:0;
 margin:-1px;
 clear:both;
 overflow:hidden;
 position:relative;
}
.cell {display:table-cell; 
    border-right: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    width: 50px; height: 50px;
 text-align:center;
 vertical-align:middle;
 font-size:22px;
 font-weight:900;
 color:#FFF;
}
.row {
    display:table-row; 
    clear: both; 
    overflow: hidden;
}
.row:hover{
 background:#e9e9e9;
}
.row:hover>.cell{
 color:#e9e9e9;
}
.row>.cell:hover, .active{
 background:#f00;
}
.table {
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
 z-index:0;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    display:table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="table"></div>

我堆叠的问题是如何在网格中同时显示多个单元格？

目前，如您所见，每个间隔只有一个单元格显示数字。我需要在不同的时间添加更多的间隔，这将产生像显示和隐藏这样的随机 nasted 数字的效果。很难解释，因为我找不到例子。

同一时间可以有多个active cell，但每个区间都控制自己的active cell。

你有什么问题要问我，请拍

Answer 1

一个简单的解决方案是创建另一个 randomActivate 函数，例如 randomActivate01 并让它点亮其他单元格。

您还可以对第二个 randomActivate 点亮的单元格应用不同的 CSS class，这样您就可以让它们显示为黄色或橙色，而不是相同的红色.

这就是您正在寻找的答案吗？

Answer 2

您的 randomActivate 函数以 $(".cell.active").removeClass("active"); 开头，它会停用当前活动的单元格。

如果您想以随机顺序激活整个网格，只需删除该调用即可。

如果您想要其他东西，我仍然建议您根据自己的目的修改代码。

不是像现在这样从所有活动单元格中删除 active class，您可以设置超时以在一段时间后将其从特定 class 中删除，例如.

Random reveal example
在这里，我还在每次迭代中递减 maxCell 并使用它来访问索引，而不是在所有单元格上，但仅在那些尚未激活的单元格上。否则可能需要很长时间才能随机化最后一个单元格。当没有剩余的非活动单元格时，我也会停止超时。
Random timeouts example
在这里，我为每个激活的单元格设置一个随机超时，而不是在所有迭代中删除所有激活的单元格。

如果其中 none 接近您想要的行为，请更详细地说明您想要什么。

javascript - 如何随机激活网格中的多个单元格

javascript - How to randomly activate multiple cells in grid

css

grid

intervals