如果 "x" 在 7x9 网格内，则 post "y"

Question

所以我有一个 7x9 的网格，该网格内的每个框都会从数组中随机选择一张图片。现在我想像这样“扫描”网格：如果“picture1”已经在 7x9 Grid 中，则从图片 4、5、6 中选择 - 如果不是，则使用 picture1。

这是我目前得到的。

let randomPic = ["../img/map1.jpg", "../img/map4.jpg", "../img/map5.jpg", "../img/map6.jpg"];
// map6 wird zu map2 wenn eingenommen
// map4 und map5 wird zu map3 wenn eingenommen
// map1 darf nur alle 7 felder 1mal vorkommen


let divs = document.querySelectorAll("div.box");
let divArray = Array.prototype.slice.call(divs);

divArray.forEach(function(div) {
  let randomNum = Math.floor(Math.random() * randomPic.length);
  div.style.backgroundImage = "url(" + randomPic[randomNum] + ")";
});

.container {
  display: inline-block;
  justify-content: center;
  display: flex;
}

.map {
  display: grid;
  grid-template-columns: repeat(7, 59px);
  grid-template-rows: repeat(9);
  grid-gap: 2px;
  background: rgb(53, 31, 3);
  border: 3px solid rgb(53, 31, 3);
  position: relative;
  top: 50px;
}

.box {
  width: 58px;
  height: 42px;
}

<div class="container">
  <!-- 7x9 map -->
  <div class="map">
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
  </div>
</div>

我希望我解释得足够好。

thnxs.

Answer 1

这应该是：

let randomPic = ["../img/map1.jpg", "../img/map4.jpg", "../img/map5.jpg", "../img/map6.jpg"];
// map6 wird zu map2 wenn eingenommen
// map4 und map5 wird zu map3 wenn eingenommen
// map1 darf nur alle 7 felder 1mal vorkommen

let divs = document.querySelectorAll("div.box");
let divArray = Array.prototype.slice.call(divs);

let imgSelected = false;

divArray.forEach(function(div) {
    if(!imgSelected) {
      let randomNum = Math.floor(Math.random() * randomPic.length);
      div.style.backgroundImage = "url(" + randomPic[randomNum] + ")";
      if (randomNum === 0) imgSelected = true; 
    } else {
      let filteredArray = randomPic.slice(1);
      let randomNum = Math.floor(Math.random() * filteredArray.length);
      div.style.backgroundImage = "url(" + filteredArray[randomNum] + ")";
    }
  });

如果 "x" 在 7x9 网格内，则 post "y"

if "x" is inside the 7x9 Grid then post "y"

html

javascript

css

grid