2015-12-11 54 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類,以便讓它們看起來爲黃色或橙色,而不是相同的紅色。

這是你正在尋找的答案嗎?

相關問題