Показать сообщение отдельно
  #1 (permalink)  
Старый 07.06.2016, 22:10
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

ООП. Летящие пули
Всем здравствуйте.
Задача состоит в следующем - при определенном событии - а нашем случае при клике на кнопку нужно создать элемент( к примеру пулю) и заставить ее двигаться - а при определенном условии (в нашем случае при пролете пули 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 возникает и все криво работает.
Буду признателен за помощь.

Последний раз редактировалось Bond, 07.06.2016 в 22:13.
Ответить с цитированием