Всем здравствуйте.
Задача состоит в следующем - при определенном событии - а нашем случае при клике на кнопку нужно создать элемент( к примеру пулю) и заставить ее двигаться - а при определенном условии (в нашем случае при пролете пули 1000 пикселей) удалить анимацию которая ее двигала и саму пулю (элемент)
Все это я реализовал так
http://1.top-start.ru/bullet/
Вот код скомпилированный с TypeScript:
var Bullet = (function () {
function Bullet() {
this.element = document.getElementById('transline');
this.create();
}
Bullet.prototype.create = function () {
this.childElement = document.createElement("li");
this.element.appendChild(this.childElement);
this.move();
};
Bullet.prototype.move = function () {
var left = 0;
var _this = this;
var move = setInterval(function () {
_this.childElement.style.left = (left += 4) + "px";
if (left > 1000) {
clearInterval(move);
_this.childElement.remove();
}
}, 10);
};
return Bullet;
}());
var button2 = document.getElementById("create");
button2.addEventListener('click', function () {
new Bullet();
});
То есть имеется класс описывающий пулю, а при клике создается объект который все реализовывает для каждой отдельной пули.
Вопрос в следующем - правильный ли это подход?
Если да то получается при каждом клике создается объект - при достижении условия удаляется анимация и элемент изображающий пулю но сам объект остается - надо ли его удалять и если да то как? Ведь этих объектов теоретически может быть десятки а то и сотни тысяч.
Если мой подход неверный то как сделать что бы можно было создать один объект и что бы он управлял всеми пулями
В нашем случае это должно работать
var bullet = new Bullet();
var button2 = document.getElementById("create");
button2.addEventListener('click', function() {
bullet.create();
});
Изначально так и думал сделать - но не получилось - там проблемы с setInterval возникает и все криво работает.
Буду признателен за помощь.