Блог

Главная - Вопросы по программированию - Генерировать случайное число элемента (rain)

Генерировать случайное число элемента (rain)

#javascript

#javascript

Вопрос:

Я новичок в программировании, и я застрял с инструкцией на довольно долгое время. Мне нужно создать анимацию, изображающую ньянских кошек, идущих под дождем (в определенном направлении, под случайным углом поворота и т.д.). Я много чего перепробовал, но не могу понять, как добавить случайное количество кошек на свой экран.

Я пытался Math.floor(Math.random() , но я не знаю, как связать это с моей кошкой.

Вот мой код. Вероятно, это не очень оптимизировано, но на данный момент «пошаговое» написание мне понятно.

 <body>
    <button id="make_it_rain">Make it rain!</button>
    <img id ="cat" src="img/cat.png">
    <div id="container">
    </div>
    <audio id="myAudio"> 
        <source src="audio/nyancat.ogg">
            <source src="audio/nyancat.mp3">
            </audio>

<script>

var btn = document.getElementById("make_it_rain"); 
    btn.addEventListener("click", rainCat);

// Animation starts
function rainCat()
{ 
setTimeout(animationEnd,10000);

  // Background styling 
  var background = document.getElementById("container");
  background.style.display = "block";
  document.body.appendChild(background);
  var pos_background = 0;
  setInterval(frameBackground, 100);

  // Background moves
  function frameBackground()
  {
    if (pos_background == -100) {
        pos_background = 0;
    } else {
        pos_background--;
        background.style.top = pos_background   "%"; 
        background.style.left = pos_background   "%"; 
    }
  }

  // Cat styling
  var nyanCat = document.getElementById("cat");
  nyanCat.style.display = "block";
  nyanCat.style.transform = "rotate(45deg)";
  document.body.appendChild(nyanCat);

  // Cat variables (position, rotate, speed)
  var pos_cat_left = 100;
  var pos_cat_top = 0;
  var rotate = Math.floor(Math.random() * 360);
  setInterval(oneCat, 5);

  // One cat moves
  function oneCat()
  {
    if (pos_cat_left == 100) {
        pos_cat_left = Math.floor(Math.random() * 50);
        pos_cat_top = 0;
        rotateCat = Math.floor(Math.random() * 360);
    } else {
        pos_cat_top = pos_cat_top   0.5; 
        pos_cat_left = pos_cat_left   0.5;
        nyanCat.style.top = pos_cat_top   "%"; 
        nyanCat.style.left = pos_cat_left   "%"; 
        nyanCat.style.transform = 'rotate('   rotate   'deg)';
    }
  }

  // Music plays
  document.getElementById('myAudio').play();
  function playAudio() { audio.play(); }
}

  // Animation stops
  function animationEnd() {
    location.reload(); 
  }

</script>


</body>

На данный момент анимация работает хорошо, но как я могу случайным образом размножать своих кошек, чтобы одновременно шел дождь из множества кошек?

Большое спасибо за вашу помощь!

Ответ №1:

В настоящее время в вашем DOM есть только одно изображение cat, вероятно, вам придется создавать несколько в цикле:

 const cats = [];

for(let count = 0; count < 10; count  ) {
 const cat = document.createElement("img");

 cat.src = "./cat.png";
 cat.style.display = "block";
 cat.style.transform = "rotate(45deg)";

 document.body.appendChild(cat);
 cats.push(cat);
}

Теперь, когда у вас есть массив cats, вы также должны обновлять их каждый тик:

 function render() {
  for(const cat of cats) {
    // your cat update logic from oneCat()
  }
  requestAnimationFrame(update); // better as a timer, as it only updates on every display rerender
}

render();

Ответ №2:

Добавьте мою версию решения с клонированием и вращением на основе вашего кода, пожалуйста, посмотрите на эту скрипку:

https://jsfiddle.net/aq02wu4j/1/

суть заключается в использовании массива анимационных объектов :

 var btn = document.getElementById("make_it_rain"); 
    btn.addEventListener("click", rainCat);

// Animation starts
function rainCat()
{ 
setTimeout(animationEnd,1000000);

  // Background styling 
  var background = document.getElementById("container");
  background.style.display = "block";
  document.body.appendChild(background);
  var pos_background = 0;
  setInterval(frameBackground, 100);

  // Background moves
  function frameBackground()
  {
    if (pos_background == -100) {
        pos_background = 0;
    } else {
        pos_background--;
        background.style.top = pos_background   "%"; 
        background.style.left = pos_background   "%"; 
    }
  }
    var numbersOfCats = 3;
  // Cat styling
  var catsPos = {};
  for(var i = 0; i <numbersOfCats ;   i) {
  catsPos[i] = {};
  catsPos[i].nyanCat = $("#cat").clone()[0];
  catsPos[i].nyanCat.style.display = "block";
  catsPos[i].nyanCat.style.transform = "rotate(45deg)";
  document.body.appendChild(catsPos[i].nyanCat);

  // Cat variables (position, rotate, speed)
  catsPos[i].pos_cat_left = 0;
  catsPos[i].pos_cat_top = 0;
  catsPos[i].rotate = Math.floor(Math.random() * 360);
    runNewCat(i);

}
function runNewCat(i) {
setInterval(function() { 
  oneCat(i)
  }, 10);
}

  // One cat moves
  function oneCat(i)
  {
   var catData = catsPos[i];
    if (catData.pos_cat_left >= 100) {
        catData.pos_cat_left = Math.floor(Math.random() * 50);
        catData.pos_cat_top = 0;
        catData.rotateCat = Math.floor(Math.random() * 360);
        catData.rotate =45;
    } else {
            catData.rotate  =5;
        catData.pos_cat_top = catData.pos_cat_top   0.5; 
        catData.pos_cat_left = catData.pos_cat_left   0.5;
        catData.nyanCat.style.top = catData.pos_cat_top   "px"; 
        catData.nyanCat.style.left = catData.pos_cat_left   "px"; 
        catData.nyanCat.style.transform = 'rotate('   catData.rotate   'deg)';
    }
  }

  // Music plays
  document.getElementById('myAudio').play();
  function playAudio() { audio.play(); }
}

  // Animation stops
  function animationEnd() {
    location.reload(); 
  }