将 1 的自定义 % 设置到二维空白数组中，其中 1 被随机打乱？

Question

我在 Stack Overflow 潜伏了很长时间，但我似乎找不到合适的现有解决方案...

我正在学习 JS 和 HTML，并且我一直在玩弄 2D 数组来制作游戏板。到目前为止，我为带有所有白色瓷砖的游戏板定制了 rows/columns 个（目前表示为 0）。

我的目标是使用 % 的黑色方块（表示为 1）的输入字段来填充棋盘（2D 数组），但黑色方块必须在其中随机 distributed/shuffled。

这是我目前所知道的..

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

没关系。我搞定了，谢谢！

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


}

Answer 2

如果您需要随机选择一组预定义的值，可以使用堆栈。把它想象成一副纸牌，你每次从纸牌中剩下的纸牌数量中随机挑选一张纸牌。在这种情况下，您只有 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>

将 1 的自定义 % 设置到二维空白数组中，其中 1 被随机打乱？

Set a custom % of 1's into a 2D blank array, where the 1's are randomly shuffled?

javascript

arrays

random

shuffle

2d-games