jQuery-如何在數組數組中隨機化？

Question

我正在構建一個在4x4網格牆上具有答案的游戲，答案最初將是四個一組，每個游戲開始時都需要將其隨機分配。 然后，玩家必須將答案重新分組（如果這沒有意義， http：//www.puzzgrid.com/grid/7279會顯示我正在嘗試實現的示例）。

我建立了一個包含答案數組的網格，如下所示：

var grid = [
  ['oak','cedar','fir','pine'],
  ['red','blue','green','yellow'],
  ['villa','spurs','city','united'],
  ['table','chair','door','stool']
];

使用如下所示的Fisher-Yates隨機播放，我可以使網格隨機化數組：

function shuffle(grid){

var i = grid.length;
var j;
var temp;

while(--i>0){
    j = Math.floor(Math.random()*(i+1));
    temp = grid[j];
    grid[j] = grid[i];
    grid[i] = temp;
}
return grid;
}

問題在於，它只對整行進行改組，而不對每個數組中的項進行改組，因此，例如，“椅子”將永遠不會緊靠“城市”。 有沒有人對如何做到這一點有任何建議？

Answer 1

嘗試使用嵌套的while循環Array.prototype.splice()

 var grid = [ ['oak', 'cedar', 'fir', 'pine'], ['red', 'blue', 'green', 'yellow'], ['villa', 'spurs', 'city', 'united'], ['table', 'chair', 'door', 'stool'] ]; var copy = grid.slice().join(" ").replace(/,/g, " ").split(" "); var res = []; while (copy.length) { var arr = []; while (arr.length < 4) { var j = copy.splice(Math.floor(Math.random() * copy.length), 1)[0]; arr.push(j) }; res.push(arr) } document.querySelector("pre").textContent = JSON.stringify(res, null, 2); 

 <pre></pre> 

Answer 2

椅子永遠不會在城市旁邊，因為您不會更改行中的元素，而只會更改行。

您可以使用對整個矩陣都適用的修改算法。

var grid = [
  ['oak','cedar','fir','pine'],
  ['red','blue','green','yellow'],
  ['villa','spurs','city','united'],
  ['table','chair','door','stool']
];

var n = 4, m = 4, i = n*m, j, temp;

while(--i>0){
    j = Math.floor(Math.random()*(i+1));
    temp = grid[Math.floor(j/n)][j%m];
    grid[Math.floor(j/n)][j%m] = grid[Math.floor(i/n)][i%m];
    grid[Math.floor(i/m)][i%m] = temp;
}
console.log(grid);

https://jsfiddle.net/vwey4yb2/1/

Answer 3

謝謝大家的幫助，最后在數組上使用.concat將其排序如下：

var answers = [
  ["Oak","Cedar","Fir","Pine"], // grid[0][0], grid[0][1]
  ["Red","Blue","Green","Yellow"],// grid[1][0], grid[1][1]
  ["Villa","Spurs","City","United"],
  ["Table","Chair","Door","Stool"]
];

var grid = answers.reduce(function(prev, current) {
  return prev.concat(current);
}, []);