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

Question

I work on one game and I stack in one problem. Look at code and test it.

 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> 

The problem where I stack is how to display in the same time multiple cells in grid?

For now, like you see, only one cell display number per interval. I need to add more intervals with different time what will made effect like randomly nasted numbers like show and hide. Is hard to explain becouse I can't find example.

In the same time can be more than one active cell but every interval to have control of own active cell.

You will have questions for me, please, shoot.

Answer 1

One simple solution would be to create another randomActivate function, like randomActivate01 and have it light up other cells.

You can also apply a different CSS class to the cells lit up by the second randomActivate so you could have them appear yellow, or orange, instead of the same red.

Would that be the answer you are looking for?

Answer 2

Your randomActivate function starts with $(".cell.active").removeClass("active"); which inactivates the currently active cell.

If you want to activate the entire grid in random order, just remove that call.

If you want something else, this is still where I'd recommend you to alter the code to suit your purposes.

Instead of removing the active class from all active cells like you are now, you could set a timeout to remove it from that specific class after some time, for instance.

• Random reveal example
  Here I also decrement maxCell on each iteration and use that to access an index not on all cells, but only on those that are not already active. Otherwise it could potentially take very long time until the last cell were to be randomized. I also stop the timeout when there are no inactive cells left.

• Random timeouts example
  Here I am setting a random timeout for each activated cell, rather than removing all activated cells at all iterations.

If none of these are anywhere near your desired behavior, please specify in greater detail what you're after.