javascript – I generate sport. balls are falling from high to backside a random width. nevertheless it overlapping someday

1. how i name consumer display screen width again in my code as enter.
2. how i can change in math.random formulation and re-apply in similar code imply in similar perform. like
   if
   @media display screen and(max-width: 700px)
   do

(Math.flooring(Math.random() * 300 + 1) or one thing like this
i need to have some area between 2 balls; for random generate width i’m saving in open empty array. however i’m very confused at how i can re-do random in similar perform. + in similar web site i’m making responsive. i’ve max-width=600px. so for cellular display screen some place balls are falling out of display screen. so i need to have one thing which like if display screen width scale back i can apply in Math.flooring(Math.random() * display screen.width + 1 if it attainable.

<div id="board-wrapper">
    <important id="board">
      <div
        class="ball ball-1"
        onclick="onClick(0)"
      ></div>
      <div
        class="ball ball-2"
        onclick="onClick(1)"
      ></div>
      <div
        class="ball ball-3"
        onclick="onClick(2)"
      ></div>
    </important>
    <part>
      <button kind="button" onclick="startGame()">START</button>
    </part>

JS


perform startGame() {
    console.log(board.width);
    balls.forEach(ball => {
        ball.classList.add('ball-move');
        ball.classList.take away('cover');
        ball.model.left = Math.flooring(Math.random() * 400 + 1) + 'px';
    });
}
perform reset(num) {
    balls[num].classList.take away('cover');
    balls[num].classList.add('ball-move');
    balls[num].model.left = Math.flooring(Math.random() * 400 + 1) + 'px';
    console.log(balls[num].model.left);
```