Tengo 9 bloques, donde es necesario que al recargar la imagen de fondo se carguen imágenes de la carpeta sin repetir. ¿Cómo puedo implementar esto?
Cuando hago clic en el botón, vuelvo a cargar la página y luego interfiero con la matriz. Entonces, ¿cómo obtener estas imágenes?
<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); });El estilo depende de usted, pero esta configuración le permite actualizar el tablero sin recargar completamente la página.
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); });ejemplo en vivo: https://codepen.io/jriches/pen/OJOepNP