Question

我在Stack Overflow上遇到了很长时间，但我似乎无法找到合适的现有解决方案......

我正在学习JS和HTML，而且我一直在玩2D阵列来制作游戏板。到目前为止，我为一个带有所有白色瓷砖的游戏板制作了一个自定义的行数/列数（现在表示为0）。

我的目标是使用输入字段表示一块黑色瓷砖（表示为1）来填充电路板（2D数组），但黑色瓷砖必须随机分布/混洗。

这是我迄今为止所拥有的......

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.

哪个适用于需要从预定义集合中随机选择的任何内容。它只需要一次通过，并且该集合与随机数生成器一样随机

显示psuedo堆栈工作...总是有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设置为2D空白数组，其中1是随机洗牌的？

2 个答案: