Блог

Я создал сетку со случайными полями, желтыми и одним красным. Проблема в том, что иногда, когда я обновляю страницу, красное поле не появляется, оно где-то спрятано, я думаю, под желтым полем. Кроме того, иногда даже желтые поля отображаются не все. Я предполагаю, что есть проблема в цикле их создания?

 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>  

Вам нужно изменить 2 вещи:

1. начальное значение i должно быть равно 0 при создании квадратов

2. когда вы создадите красное поле, тогда

заменить

 if (playerOne.indexOf(randomIndex)
  

с помощью

 if (playerOne.indexOf(randomIndex) === -1 amp;amp; 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 amp;amp; obstacles.indexOf(randomIndex) === -1) { // second change
     playerOne.push(randomIndex);
     document.getElementById('square'   randomIndex).style.backgroundColor = 'red';
  }
}
  

Это потому, что, когда randomIndex будет равен нулю (0), тогда вы ищете элемент с идентификатором «square0», и он недоступен, потому что ваш цикл for запускается с 1 по 100.

Math.random() иногда возвращался бы 0 , но ваши идентификаторы начинаются с 1 , например: ‘square1’, нет ‘square0’ div .

Создайте свой цикл, начинающийся с 0 :

 for (var i = 0; i < 100; i  ){
  // Code here
}