Javascript 生成元素的随机数（rain）_Javascript

Javascript 生成元素的随机数（rain）

javascript

Javascript 生成元素的随机数（rain）,javascript,Javascript,我是一名新的编程专业的学生，很长一段时间以来我一直在学习一门指令。我必须创建一个尼安猫下雨的动画（在一个特定的方向，在一个随机的旋转角度，等等）。我尝试了很多方法，但我不知道如何在我的屏幕上添加随机数目的猫我尝试了Math.floor（Math.random（），但我不知道如何将它链接到我的猫这是我的代码。它可能不是很优化，但现在“一步一步”的写作对我来说是可以理解的 <body> <button id="make_it_rain">Make it rain!

我是一名新的编程专业的学生，很长一段时间以来我一直在学习一门指令。我必须创建一个尼安猫下雨的动画（在一个特定的方向，在一个随机的旋转角度，等等）。我尝试了很多方法，但我不知道如何在我的屏幕上添加随机数目的猫

我尝试了

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>


让它下雨！
var btn=document.getElementById（“make_it_rain”）；
btn.addEventListener（“点击”，雨猫）；
//动画开始
函数rainCat（）
{ 
设置超时（动画结束，10000）；
//背景造型
var background=document.getElementById（“容器”）；
background.style.display=“block”；
document.body.appendChild（背景）；
var pos_background=0；
setInterval（frameBackground，100）；
//背景动作
函数frameBackground（）
{
如果（位置背景==-100）{
pos_背景=0；
}否则{
pos_背景--；
background.style.top=pos_background+“%”；
background.style.left=pos_background+“%”；
}
}
//猫造型
var nyanCat=document.getElementById（“cat”）；
nyanCat.style.display=“块”；
nyanCat.style.transform=“旋转（45度）”；
文件.正文.附件（nyanCat）；
//Cat变量（位置、旋转、速度）
var pos_cat_left=100；
var pos_cat_top=0；
var rotate=Math.floor（Math.random（）*360）；
设置间隔（一个CAT，5）；
//一只猫动
函数oneCat（）
{
如果（位置左侧=100）{
pos_cat_left=数学地板（数学随机（）*50）；
位置/类别/顶部=0；
rotateCat=Math.floor（Math.random（）*360）；
}否则{
pos_cat_top=pos_cat_top+0.5；
左位=左位+0.5；
nyanCat.style.top=pos_cat_top+“%”；
nyanCat.style.left=位置类别左+“%”；
nyanCat.style.transform='rotate（'+rotate+'deg'）；
}
}
//音乐剧
document.getElementById（'myAudio'）.play（）；
函数playAudio（）{audio.play（）；}
}
//动画停止
函数animationEnd（）{
location.reload（）；
}

现在动画效果很好，但我如何随机繁殖我的猫，使许多猫同时下雨

非常感谢您的帮助！

目前您的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);
}

添加我的解决方案版本，并根据您的代码进行克隆和轮换请看这把小提琴：

要点是使用动画对象数组：

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(); 
  }

var btn=document.getElementById（“make_it_rain”）；
btn.addEventListener（“点击”，雨猫）；
//动画开始
函数rainCat（）
{ 
设置超时（动画结束，1000000）；
//背景造型
var background=document.getElementById（“容器”）；
background.style.display=“block”；
document.body.appendChild（背景）；
var pos_background=0；
setInterval（frameBackground，100）；
//背景动作
函数frameBackground（）
{
如果（位置背景==-100）{
pos_背景=0；
}否则{
pos_背景--；
background.style.top=pos_background+“%”；
background.style.left=pos_background+“%”；
}
}
var numbersOfCats=3；
//猫造型
var catsPos={}；
对于（变量i=0；i=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；
}否则{
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'）；
}
}
//音乐剧
document.getElementById（'myAudio'）.play（）；
函数playAudio（）{audio.play（）；}
}
//动画停止
函数animationEnd（）{
location.reload（）；
}

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(); 
  }