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