Установите пользовательский% 1 в двумерный пустой массив, где 1 случайным образом перетасовываются?

Question

Я долгое время скрывался в переполнении стека, но я не мог найти подходящего существующего решения ...

Я изучаю JS и HTML, и я играл с 2D-массивами сделать игровое поле. До сих пор я сделал обычное количество строк/столбцов для игровой доски со всеми белыми плитами (теперь они представлены как 0).

Моя цель - использовать поле ввода для% черных плит (представлено как 1), чтобы заполнить доску (2D-массив), но черные плитки должны быть случайно распределены/перетасованы между ними.

Вот что у меня до сих пор ..

https://jsfiddle.net/5pvm4mmy/6/

function generateArray() { 

var myNode = document.getElementById("table"); 
while (myNode.firstChild) { 
    myNode.removeChild(myNode.firstChild); 
} 

rows = $("#rows-field").val(); 
cols = $("#cols-field").val(); 

concentration = $("#concentration-field").val() 
source = $("#source-field").val(); 
target = $("#target-field").val(); 



var table = document.getElementById("table"); 
for (var i = 0; i < rows; i++) { 
    var tr = document.createElement('tr'); 
    for (var j = 0; j < cols; j++) { 
     var td = document.createElement('td'); 
     if (i%2 == j%2) { 
      td.className = "white"; 
     } else { 
      td.className = "black"; 
     } 
     tr.appendChild(td); 
    } 
    table.appendChild(tr); 
} 
document.body.appendChild(table); 


} 

Заранее спасибо за любую помощь или совет.

Answer 1

Если вам нужен случайный выбор заранее определенного набора значений, вы можете использовать стек. Подумайте об этом как колоде карт, и каждый раз вы выбираете случайную карту из числа карт, оставшихся в колоде. В этом случае у вас есть только 2 значения, но вы можете установить количество черно-белых. Для этого вы можете использовать псевдо-стек.

var black = 29; // 29 blacks the rest white 
var white = (rows * cols) - black; 

function getRandSquare(){ 
    var select = Math.floor(Math.random() * (black + white)); 
    if(select > black){ 
     white -= 1; 
     return "white"; 
    } 
    black -= 1; 
    return "black"; 
} 

Если у вас есть много вариантов, таких как колода карт, вы используете массив.

Пример случайного стека.

// create a deck 
var cards = []; 
for(var c = 0; c < 52; c++){ 
    cards[c] = c; 
} 
function shuffle(cards){ 
    var shuf = []; // to hold the shuffled deck 
    while(cards.length > 0){ // pick a random item, take it from the stack and 
          // put on the new stack until there are no items 
          // left 
     shuf.push(cards.splice(Math.floor(Math.random() * cards.length),1)); 
    } 
    return shuf; // return shuffled deck 
} 

cards = shuffle(cards); // get shuffled deck. 

Что будет работать на все, что вам нужно выбрать случайно из предопределенного набора. Он принимает только один проход и множество случайное, как генератор случайных чисел

Чтобы показать стек работает ... псевдо всегда имеет 60 черного

var cont; 
 
function draw(){ 
 
    var rows = 15; 
 
    var cols = 15; 
 
    var black = 60; // 29 blacks the rest white 
 
    var white = (rows * cols) - black; 
 
    
 
    function getRandSquare(){ 
 
     var select = Math.floor(Math.random() * (black + white)); 
 
     if(select > black-1){ 
 
      white -= 1; 
 
      return "white"; 
 
     } 
 
     black -= 1; 
 
     return "black"; 
 
    } 
 
    
 
    var bCount = 0; 
 
    cont = document.createElement("div"); 
 
    for(var y = 0; y < rows; y++){ 
 
     for(var x = 0; x < cols; x++){ 
 
      var s = document.createElement("span"); 
 
      s.className = getRandSquare(); 
 
      if(s.className === "black"){ 
 
       s.textContent = bCount; 
 
       bCount += 1; 
 
      } 
 
      s.style.top = ((y+2) * 20) + "px"; 
 
      s.style.left = (x * 20) + "px"; 
 
      s.style.width = "20px"; 
 
      s.style.height = "20px"; 
 
      cont.appendChild(s);           
 
     } 
 
     
 
    } 
 
    document.body.appendChild(cont); 
 
} 
 
document.body.onclick = function(){ 
 
    document.body.removeChild(cont); 
 
    cont = null; 
 
    draw(); 
 
} 
 
draw(); 
 

span { 
 
    position:absolute; 
 
    border : 1px solid; 
 
    font-size : small; 
 
    text-align : center; 
 
} 
 
.black { 
 
    background : black; 
 
    border-color :white; 
 
    color : white; 
 
} 
 
.white { 
 
    background : white; 
 
    border-color :black; 
 
}

<h3>Click to randomise</h3>

Answer 2

Ничего. Я сделал это, спасибо!

https://jsfiddle.net/5pvm4mmy/8/

function generateArray() { 

var myNode = document.getElementById("table"); 
while (myNode.firstChild) { 
    myNode.removeChild(myNode.firstChild); 
} 

rows = $("#rows-field").val(); 
cols = $("#cols-field").val(); 

concentration = $("#concentration-field").val(); 
source = $("#source-field").val(); 
target = $("#target-field").val(); 



var table = document.getElementById("table"); 
for (var i = 0; i < rows; i++) { 
    var tr = document.createElement('tr'); 
    for (var j = 0; j < cols; j++) { 
     var td = document.createElement('td'); 
     if (concentration < Math.floor((Math.random() * 100) + 1)) { 
      td.className = "white"; 
     } else { 
      td.className = "black"; 
     } 
     tr.appendChild(td); 
    } 
    table.appendChild(tr); 
} 
document.body.appendChild(table); 


}