how to load background images into different blocks from an array

user_18210940 0
Viewed 21

I have 9 blocks, where it is necessary that when reloading the background image, pictures from the folder are loaded without repeating. How can I implement this?

When I click on the button, I reload the page, then I interfere with the array. How then to get these pictures?

<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);
});
css arrays dom html javascript
1 Answers

The styling is up to you, but this setup allows you to refresh the board without completely reloading the page.

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);
});

live example: https://codepen.io/jriches/pen/OJOepNP

user_93182170
Related