JS:如何从数组中选择随机的项目对

Question

我有一个数组PAIRS在25张图片中(意味着总共50张图片)，每张图片路径都在它自己的关联数组中。

const cardArray = [
{ name:'A', img:'images/A.jpg' },
{ name:'A', img:'images/A.jpg' },
{ name:'B', img:'images/B.jpg' },
{ name:'B', img:'images/B.jpg' },
{ name:'C', img:'images/C.jpg' },
{ name:'C', img:'images/C.jpg' },
...
... (bla bla bla, up to 25 times)
]

我知道如果我正好有8对那么我可以使用的函数是:

cardArray.sort(() => 0.5 - Math.random())

我想做的是随机选择8对这些图像，然后像在记忆匹配游戏中一样洗牌。我如何使它，以便每次用户重新加载浏览器，不同的图像对数组将加载，而不是相同的8个每次?

谢谢。

Answer 1

要从卡片数组中随机选择一张卡片，只需:

const randomCard = Math.floor(Math.random() * cardArray.length);

Answer 2

下面将从总共25个可能的选择中随机选择8对图像。然后按随机顺序呈现16张图片。

function shuffle(a,n){ // shuffle array a in place (Fisher-Yates)
let m=a.length;
n=n||m-1;
for(let i=0,j;i<n;i++){
j=Math.floor(Math.random()*(m-i)+i);
if (j-i) [ a[i],a[j] ] = [ a[j],a[i] ]; // swap 2 array elements
}
}
const a=[...new Array(25)].map((v,i)=>i);
shuffle(a,8);  // array of indices, like  [ 2, 13, 0, 7, 5, 24, 19, 8, ... ]
let sel=a.slice(0,8).map(k=>  // array of 8 image paths
"images/"+String.fromCharCode(k+65)+".jpg");
sel=sel.concat(sel);          // double the array ...
shuffle(sel);                 // ... and shuffe it again
console.log(sel);

.as-console-wrapper {max-height: 100%  !important}

该方法基于数组洗牌算法(Fisher-Yates)，我只应用于前8个元素。然后提取这些元素并以大写字符表示。

我擅自将您的images对象重新排列为图像名称数组。现在，图像被挑选两次(sel.concat(sel))，并再次洗牌，以随机顺序呈现。