javascript - 循环填充 div 中的剩余空间

Question

我正在为我的下一个项目创建战舰游戏来学习 javascript，并且我正在尝试创建 div 来填充容器wrapper。我不希望 div 溢出，只是为了填满剩余的空间，直到它被填满。如何测试 div 中剩余的空白空间以继续添加到我的循环中，直到容器被填满？

我要填充的容器是#wrapper. 我在 javascript 中的循环正在创建divs. 我想为循环在容器已满时停止填充创建一个条件(i = 0; i < ?; i++)。我该如何测试？

const body = document.querySelector('body');
const wrapper = document.querySelector('#wrapper')
const box = document.getElementsByClassName('.box');
const div = document.querySelector('div');

for (i = 0; i < 250; i++) {
  let div = document.createElement('div');
  div.classList = 'squares';
  wrapper.appendChild(div);
}

const destroyer1 = document.querySelector('#destroyer1');
const destroyer2 = document.querySelector('#destroyer2');

destroyer1.addEventListener("drag", function(event) {}, false);

destroyer1.addEventListener("dragstart", function(event) {}, false);

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(0, 0, 0);
}

h1 {
  color: white;
}

#messageBoard {
  color: white;
}

#shipContainer {
  width: 100%;
  height: 15rem;
  top: 0;
  left: 0;
  background-color: rgb(41, 25, 25);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#wrapper {
  width: 100%;
  height: 30rem;
  padding: 5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}

.squares {
  border: 1px solid blue;
  width: 5%;
  height: 5%;
}

.destroyer {
  border: 1px solid blue;
  width: 30%;
  height: 30%;
  display: flex;
  flex-direction: row;
}

.destroyerSquare {
  border: 1px solid orange;
  width: 33%;
  height: 100%;
}

<h1>BattleShip!</h1>
<p id="messageBoard">Place Your Ships!</p>
</div>
<div id="shipContainer" draggable="true">
  <div class='destroyer' id='destroyer1'>
    <div class='destroyerSquare'></div>
    <div class='destroyerSquare'></div>
    <div class='destroyerSquare'></div>
  </div>
  <div class='destroyer' id='destroyer2'>
    <div class='destroyerSquare'></div>
    <div class='destroyerSquare'></div>
    <div class='destroyerSquare'></div>
  </div>
  <div class="battleship"></div>
  <div class="cruiser"></div>
  <div class="spyShip"></div>
</div>
<div id="wrapper">
</div>

标签： javascript