Définir un% personnalisé de 1 dans un tableau vide 2D, où les 1 sont mélangés au hasard?

Question

J'ai été longtemps un rôdeur sur Stack Overflow mais je ne pouvais pas trouver une solution existante appropriée ...

J'apprends JS et HTML, et j'ai joué avec des arrangements 2D pour faire le plateau de jeu. Jusqu'à présent, j'ai fait un # personnalisé de lignes/colonnes pour un plateau de jeu avec toutes les tuiles blanches (représenté par 0 pour le moment).

Mon objectif est d'utiliser un champ de saisie pour un% de tuiles noires (représentées par 1) pour remplir le tableau (tableau 2D), mais les tuiles noires doivent être réparties/mélangées aléatoirement entre elles.

Voici ce que j'ai jusqu'à présent ..

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); 


} 

Merci d'avance pour toute aide ou des conseils.

Answer 1

Si vous avez besoin d'une sélection aléatoire d'un ensemble prédéfini de valeurs, vous pouvez utiliser une pile. Pensez-y comme un jeu de cartes et vous choisissez une carte aléatoire à chaque fois du nombre de cartes restantes dans le paquet. Dans ce cas, vous n'avez que 2 valeurs mais vous pouvez définir le nombre de noir et blanc. Pour cela, vous pouvez utiliser une pseudo-pile.

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"; 
} 

Si vous avez beaucoup d'options comme un jeu de cartes que vous utilisez un tableau.

Exemple d'une pile aléatoire.

// 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. 

Ce qui fonctionnera pour n'importe quoi où vous devez choisir aléatoirement d'un ensemble prédéfini. Il suffit d'une passe et l'ensemble est aussi aléatoire que le générateur de nombres aléatoires

Pour afficher la pile psuedo de travail ... a toujours 60 noir

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

Peu importe. Je l'ai fait, merci!

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); 


}