如何将背景图像加载到阵列中的不同块中

Question

我有9个块，当重新加载背景图像时，必须加载文件夹中的图片，而不重复。我该如何实现？

当我点击按钮时，我会重新加载页面，然后干扰数组。那么怎样才能得到这些照片呢？

<div class="game">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

const imgCollection = [
"assets/img/1.png",
"assets/img/2.png",
"assets/img/3.png",
"assets/img/4.png",
"assets/img/5.png",
"assets/img/6.png",
"assets/img/7.png",
"assets/img/8.png",
"assets/img/9.png",
];
reset.addEventListener("click", () => {
location.reload();
x=imgCollection.sort(()=>Math.random()-0.5);
});

Answer 1

样式由您决定，但此设置允许您在不完全重新加载页面的情况下刷新板。

HTML:

<div class="game">
</div>
<button id="reload-btn">reload</button>

Javascript：

let gameEl = document.querySelector('.game');
let reloadBtn = document.querySelector('#reload-btn');
const imgCollection = [
"assets/img/1.png",
"assets/img/2.png",
"assets/img/3.png",
"assets/img/4.png",
"assets/img/5.png",
"assets/img/6.png",
"assets/img/7.png",
"assets/img/8.png",
"assets/img/9.png",
];
const shuffle = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
const drawBlocks = (imageArray) => {
gameEl.innerHTML = "";

shuffle(imageArray).forEach((image) => {
let newBlock = document.createElement('div');
newBlock.innerHTML = image;
newBlock.style.backgroundImage = `url('${image}')`; 
gameEl.appendChild(newBlock);
})
}
reloadBtn.addEventListener("click", () => {
drawBlocks(imgCollection);
});

实例：https://codepen.io/jriches/pen/OJOepNP