jQuery - 如何在数组数组中随机化？答案

【问题标题】：jQuery - How to randomize within an array of arrays?jQuery - 如何在数组数组中随机化？
【发布时间】：2016-01-30 15:08:59
【问题描述】：

我正在构建一个在 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;
}

问题在于它只对整行进行打乱，而不是对每个数组中的项目进行打乱，例如，“chair”永远不会与“city”相邻。有人对如何做到这一点有任何建议吗？

【问题讨论】：

在grid 数组的每个元素（每一行）上调用您的shuffle() 函数。
也许把它全部放在一个数组中随机播放然后重建？

标签： javascript jquery arrays random

【解决方案1】：

椅子永远不会在城市旁边，因为您没有更改行内的元素，而只是打乱了行。

您可以使用修改后的算法，该算法适用于整个矩阵。

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/

【讨论】：

【解决方案2】：

尝试使用嵌套的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);

&lt;pre&gt;&lt;/pre&gt;

【讨论】：

【解决方案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);
}, []);

【讨论】：