Логика нескольких путешествующих анимаций в javascript

Question

У меня есть изображение ошибки. Я хочу, чтобы 5 копий этого изображения пролетели со стороны экрана и отскочили вокруг экрана и отскакивали от сторон. Я хочу, чтобы у них были разные стартовые позиции и разные направления.

поэтому я сделал некоторые переменные глобального уровня

var flyVar; 

var flySpeed = 5; 
var widthMax = 0; 
var heightMax = 0; 
var xPosition = 0; 
var yPosition = 0; 
var xDirection = ""; 
var yDirection = ""; 
var bugFly; 

var count = 1; 
var bug = "bug"; 

У меня есть функция под названием setBugs(), что я использую, чтобы установить значение widthMax и heightMax в зависимости от размера экрана пользователя.

У меня есть функция bugStartingPlace, чтобы установить начальное начальное место для каждой ошибки. Я не буду публиковать всю функцию, но она делает то же самое для «bug1» через «bug5», придавая им разные значения.

function bugStartingPlace(bugName) { 
//Accepts string as argument and sets the starting position and starting direction of each bug. 
    if (bugName == "bug1") { 
     xPosition = 0; 
     yPosition = 100; 
     xDirection = "right"; 
     yDirection = "up"; 
    } 
} 

У меня есть функция flyBug(), которая выполняет анимацию и устанавливает положение изображения. Он состоит из множества таких утверждений. Я знаю, что это работает, потому что я могу заставить его работать с 1 ошибкой. Проблема заключается в 5 ошибках.

function flyBug() { 
    if (xDirection == "right" && xPosition > (widthMax - document.getElementById("bugImage").width - flySpeed)) 
     xDirection = "left"; 
<!--More flow control statements are here--> 

document.getElementById("bug1").style.left = xPosition + "px"; 
document.getElementById("bug1").style.top = yPosition + "px"; 
<!-- More statements are here that set the position of the image --> 

} 

Итак, мне нужно каким-то образом получить анимацию с тегом onload(). Одна из проблем заключается в том, что setInterval не разрешает функции, содержащие параметры. Поэтому я не могу поместить несколько операторов в событие onload body, которые передают «bug1» в качестве параметра этой функции, «bug2» в качестве параметра этой функции и т. Д. Вот почему я сделал глобальную переменную счета. Таким образом, в любое время мне нужно изменить имя ошибки, изменить имя графа, а затем сделать

bug = bug + count; 

Но что добавляет много сложности. Мне нужно имя ошибки для функции bugStartingPlace(), поэтому мне нужно изменить значение count, а также изменить значение ошибки, прежде чем использовать эту функцию. Как только я использую функцию bugStartingPlace(), которая изменяет значение глобальных переменных. Затем мне нужно использовать flyBug(), прежде чем снова изменить значение ошибки.

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

Может ли кто-нибудь дать мне советы о том, как должна работать логика этой программы?

Answer 1

setInterval позволяет, как SetTimeout, использование параметров в функции НО:

setInterval(funcName(param1,param2...), 100); 

не будут работать. Youll заставить его работать так:

var func = function() { funcName(param1,param2..); } 

setInterval(func, 100); 

Чтобы понять, что часть JavaScript, прочитать dougles crockfords объяснение функций, он говорит об этом очень ясно и глубоко. Link to a video of him

EDIT: Sry я понял ваш вопрос неправильно ...

Проблемы, почему она не будет работать это, как вы выяснили глобальный ВАР. Вы можете просто сделать ошибку объектом. Его действия будут тогда методами, которые могут содержать функцию и так далее. Если вы затем инициализируете новую ошибку (вы можете сделать это тысячу раз), все варны остаются в объекте, не конфликтуя друг с другом. Это безопасный способ обеспечения надежности вашего кода.

Вы можете сделать это очень просто, с вложенными функциями.

Другим способом было бы отправить имя параметра ошибки vie, например, функции fly. И единственная работа в этой функции с предоставленным ей параметром.