javascript - 网格 JavaScript 中的随机框

Question

我创建了一个带有随机框(黄色和一个红色)的网格。 问题是，当我刷新页面时，有时红色框不会出现，而是隐藏在某个地方，我猜是在黄色框下面。另外，有时甚至黄色框也不会全部显示。 我猜创建它们的循环有问题？

var grid = document.getElementById("grid-box");

for (var i = 1; i <= 100; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}

var obstacles = [];

while (obstacles.length < 10) {
  var randomIndex = parseInt(99 * Math.random());

  if (obstacles.indexOf(randomIndex) === -1) {
    obstacles.push(randomIndex);
    document.getElementById('square' + randomIndex).style.backgroundColor = 'yellow';

  }
}

var playerOne = [];

while (playerOne.length < 1) {
  var randomIndex = parseInt(99 * Math.random());

  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);
    document.getElementById('square' + randomIndex).style.backgroundColor = 'red';

  }
}

#grid-box {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  font-size: 0;
  position: relative;
}

#grid-box>div.square {
  font-size: 1rem;
  vertical-align: top;
  display: inline-block;
  width: 10%;
  height: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box"></div>

Answer 1

你必须改变两件事:

<强>1。创建正方形时 i 的初始值应为 0

<强>2。当你制作红框时

替换

if (playerOne.indexOf(randomIndex)

与

if (playerOne.indexOf(randomIndex) === -1 && obstacles.indexOf(randomIndex) === -1) {

这是最终的代码:

var grid = document.getElementById("grid-box");

// create 100 squares
for (var i = 0; i < 100; i++) { // first change
 var square = document.createElement("div");
 square.className = 'square';
 square.id = 'square' + i;
 grid.appendChild(square);
}

var obstacles = [];

while (obstacles.length < 10) {
var randomIndex = parseInt(99 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {        
    obstacles.push(randomIndex);
    document.getElementById('square' + randomIndex).style.backgroundColor = 'yellow';
 }
}

var playerOne = [];
while (playerOne.length < 1) {
 var randomIndex = parseInt(99 * Math.random());    
 if (playerOne.indexOf(randomIndex) === -1 && obstacles.indexOf(randomIndex) === -1) { // second change
     playerOne.push(randomIndex);
     document.getElementById('square' + randomIndex).style.backgroundColor = 'red';
  }
}

这是因为，当 randomIndex 为零(0)时，您正在搜索 id 为“square0”的元素，但它不可用，因为您的 for 循环从 1 开始运行到 100。