2015-12-11 55 views
0

我在一个游戏上工作,并在一个问题中堆栈。查看代码并进行测试。javascript - 如何随机激活网格中的多个单元格

var createGrid=function(x,y){ 
 
    \t var arrY = new Array(), 
 
    \t \t arrX, 
 
      container = $(".table"); 
 
\t \t i=1; 
 
    \t for(var iy=0; iy<y; iy++){ 
 
    \t \t arrX = new Array(); 
 
    \t \t for(var ix=0; ix<x; ix++){ 
 
    \t \t \t arrX[ix]='<div class="cell">'+i+'</div>'; 
 
\t \t \t \t i++; 
 
    \t \t } 
 
    \t \t arrY[iy]='<div class="row">'+arrX.join("\r\n")+'</div>'; 
 
    \t } 
 
    \t container.append(arrY.join("\r\n")); 
 
    }; 
 
// call function 
 
(function($){ 
 
\t // create grid 
 
\t createGrid(Math.ceil($(window).width()/50),Math.ceil($(window).height()/50)); 
 
\t // setup on ready 
 
\t $(document).ready(function(){ 
 
\t \t var cell= $(".cell"), 
 
\t \t \t maxCell = cell.length, 
 
\t \t \t // find random cell and setup 
 
\t \t \t randomActivate = function(){ 
 
\t \t \t \t \t $(".cell.active").removeClass("active"); 
 
\t \t \t \t \t var active=Math.round(Math.random()*(maxCell-1)); 
 
\t \t \t \t \t cell.eq(active).addClass("active"); 
 
\t \t \t \t }; 
 
\t \t \t // start random cell 
 
\t \t \t randomActivate(); 
 
\t \t \t // loop random cell 
 
\t \t \t setInterval(function(){ 
 
\t \t \t \t randomActivate(); 
 
\t \t \t }, 300); 
 
\t }); 
 
}(jQuery));
body{ 
 
\t padding:0; 
 
\t margin:-1px; 
 
\t clear:both; 
 
\t overflow:hidden; 
 
\t position:relative; 
 
} 
 
.cell {display:table-cell; 
 
    border-right: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
    width: 50px; height: 50px; 
 
\t text-align:center; 
 
\t vertical-align:middle; 
 
\t font-size:22px; 
 
\t font-weight:900; 
 
\t color:#FFF; 
 
} 
 
.row { 
 
    display:table-row; 
 
    clear: both; 
 
    overflow: hidden; 
 
} 
 
.row:hover{ 
 
\t background:#e9e9e9; 
 
} 
 
.row:hover>.cell{ 
 
\t color:#e9e9e9; 
 
} 
 
.row>.cell:hover, .active{ 
 
\t background:#f00; 
 
} 
 
.table { 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t bottom:0; 
 
\t right:0; 
 
\t 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>

其中I堆栈是如何在同一时间的多个小区在网格中显示的问题?

现在,就像你看到的,每个间隔只有一分格显示号码。我需要在不同的时间添加更多的时间间隔,这会产生像随机发生的数字一样的效果,如显示和隐藏。很难解释,因为我找不到例子。

在同一时间可以多于一个有源单元但是每一个间隔有自己的有源单元的控制。

您有任何疑问,请拍。

回答

1

randomActivate功能与$(".cell.active").removeClass("active");一种灭活当前活动单元格开始。

如果要激活以随机顺序整个网格,只是删除通话。

如果你想要别的东西,这仍然是在那里我建议你改变代码,以满足您的目的。

例如,您可以设置一个超时,在一段时间后将其从特定类中删除,而不是从所有活动单元格中移除active类。

  • Random reveal example
    在这里,我也减小每次迭代maxCell并用它来无法访问所有细胞的指数,但仅限于那些尚未激活。否则,可能需要很长时间直到最后一个细胞被随机化。当没有不活动的单元格时,我也停止超时。

  • Random timeouts example
    我在这里设置一个随机超时每个激活细胞,而不是在所有的迭代中删除所有激活的细胞。

如果这些都不是您想要的行为附近的任何地方,请详细说明您要做的事情。

+0

随机超时示例是我在寻找的。我在测试中提出的第一个解决方案,其次是我需要的解决方案。谢啦! –

1

一个简单的解决方案是创建另一个randomActivate功能,如randomActivate01并使其点亮的其它细胞。

您还可以对第二个randomActivate点亮的单元格应用不同的CSS类,以便让它们看起来为黄色或橙色,而不是相同的红色。

这是你正在寻找的答案吗?

相关问题