我是一名新的编程学生，我已经坚持了很长一段时间的指导。我必须创建一个由Nyan猫下雨（在某个方向，随机旋转角度等）制作的动画。我尝试了很多东西，但我无法弄清楚如何在屏幕上添加随机数量的猫。
我试过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>
目前动画效果很好，但我怎样才能随机繁殖我的猫，以免许多猫同时下雨？
非常感谢你的帮助！
目前在您的DOM中只有一个猫图像，您可能需要在循环中创建多个：
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);
}
既然你有一系列的猫，你还需要每次滴答都更新它们：
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();
根据您的代码添加我的克隆和旋转解决方案版本请看这个小提琴：
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();
}