что обозначает этот код

142

25 октября 2019, 21:20

изучал код простой игры змейки на js и не понимаю два фрагмента кода.

1)не понимаю саму формулу. знаю что такое рандом и раунд, но не понимаю, зачем нужно умножать и для чего вычитать и слагать

let posX = Math.round(Math.random() * (10 - 3) + 1);

2) я так понимаю, это спецсимволы,но всё равно не могу понять, что делает код. понимаю, что он ищет селектор, а как именно не понимаю

let snakeBody = [document.querySelector('[posX = "' + coordinates[0] +'"][posY = "' + coordinates[1] + '"]')];

let container = document.createElement('div'); 
document.body.appendChild(container); 
container.classList.add('container'); 
 
for (let i=1; i<101; i++) { 
  let excel = document.createElement('div'); 
  container.appendChild(excel); 
  excel.classList.add('excel'); 
} 
 
let excel = document.querySelectorAll('.excel'); 
let x = 1; 
let y = 10; 
 
for (let i = 0; i < excel.length; i++) { 
    if (x > 10) { 
      x = 1; 
      y--; 
    } 
    excel[i].setAttribute('posX', x); 
    excel[i].setAttribute('posY', y); 
    x++; 
} 
 
function generateSnake() { 
   
    let posX = Math.round(Math.random() * (10 - 3) + 1);  
    let posY = Math.round(Math.random()* (10 - 3) + 1); 
    return [posX, posY]; 
} 
 
let coordinates = generateSnake(); 
let snakeBody = [document.querySelector('[posX = "' + coordinates[0] + '"][posY = "' +  
coordinates[1] + '"]')];

* { 
  box-sizing: border-box; 
} 
body { 
  margin: 100px; 
} 
 
.container { 
  width: 500px; 
  height: 500px; 
  margin-left: 200px ; 
  display: flex; 
  flex-wrap: wrap; 
  background: #cccccc; 
} 
 
.excel { 
  width: 50px; 
  height: 50px; 
  padding: 5px;  
} 
 
.bodySnake { 
  background-image: url(bodySnake.jpg); 
  background-size: cover; 
} 
 
.head { 
  background-image: url(tanya.jpg); 
  background-size: cover; 
}

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <title>Snake</title> 
    <link rel="stylesheet" href="main.css"> 
  </head> 
  <body> 
 
    <script src="script.js" charset="utf-8"></script> 
 
  </body> 
</html>

Answer 1

Такие танцы с бубном вокруг math.rand нужны чтоб получить удобный генератор случайного числа в диапазоне от минимального до максимального, т.к. сам метод rand возвращает значение в диапазоне от 0 до 1, а чаще всего нужно значение между какими-то более понятными приземлёнными числами. Конкретно тут в примере происходит следующее:

// берём случайное число от 0 до 1
Math.random()
// умножая его на 7 (10 - 3) получаем случайное число от 0 (0 * 1) до 7 (1 * 7)
Math.random() * (10 - 3)
// сдвигаем диапазон на 1 вверх и вместо "от 0 до 7" получаем случайное "от 1 до 8"
Math.random() * (10 - 3) + 1
// округляем т.к. нужна координата по X, а не float-значение
Math.round(Math.random() * (10 - 3) + 1);

Вот и всё, никакой магии. В итоге получаем "случайное целое число от 1 до 8".

А про селекторы сначала почитайте что это и как работают. Вопрос слишком общий. https://www.w3schools.com/cssreF/css_selectors.asp

Answer 2

Math.round(Math.random() * (10 - 3) + 1)

Это случайное число от 1 до 8, Math.random() вернет от 0 до 1 значение, умножаем на 7 (10-3) разница только из-за подгонки кода, возможно думали ввести переменную. Далее добавляем минимальное значение, это 1. Получится от 1 до 8. Т.к. переменная не целая ее округляют round.

let snakeBody = [document.querySelector('[posX = "' + coordinates[0] +'"][posY = "' + coordinates[1] + '"]')];

Назначают переменной snakeBody элемент который отбирают по заданному селектору. Т.к. селектор генерируется то нужны координаты змеи X и Y, их берут из переменной coordinates которая получена их фукнции generateSnake() с результирующими X и Y.