ООП. Летящие пули
 

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

Rise, так и есть, поразбирался, погуглил, в коде поставил создание 10 объектов через каждые 100 мс за один клик - запустил в отладчике посмотрел - вроде все гуд, память очищается почти сразу же.

Coriolan161, ну может не сам объект а ссылки на него через delete.
А вообще имел ввиду стоит ли в моей ситуации заботиться о памяти и т.д

Bond, move вынести наружу и забиндить, иначе он каждый раз заново создаётся, что не есть хорошо.

var Bullet = (function() {
	function Bullet() {
		this.element = document.getElementById('transline');
		this.bullet = document.createElement('li');
		this.left = 0;
		this._move = this.move.bind(this);
	}
	Bullet.prototype.create = function() {
		setTimeout(this._move, 10);
	};
	Bullet.prototype.move = function() {
		this.left += 4;
		this.bullet.style.left = this.left + 'px';
		if(this.left >= 1000) this.remove();
		else setTimeout(this._move, 10);
	};
	Bullet.prototype.remove = function() {
		this.bullet.remove();
		this.left = 0;
	};
	return Bullet;
}());

Также советую почитать про requestAnimationFrame.

Rise,
спасибо за код, только не совсем понял как это работает. Понял что это рекурсивный setTimeout, но как он потом убивается - при удалении элемента? И не будет ли проблем если мне нужно будет не удалить элемент пулю, а остановить?
Ruslan_xDD, спасибо почитаю про requestAnimationFrame. Вернее уже почитал разобраться надо.

Bond, думаю, вот так лучше будет:

var Bullet = (function() {
	function Bullet() {
		this.element = document.getElementById('transline');
		this.bullet = document.createElement('li');
		this.left = 0;
		this._play = this.play.bind(this);
		this.element.appendChild(this.bullet);
	}
	Bullet.prototype.play = function() {
		this.left += 4;
		this.bullet.style.left = this.left + 'px';
		if(this.left >= 1000) {
			this.remove();
		}
		else {
			this._timeoutID = setTimeout(this._play, 10);
		}
	};
	Bullet.prototype.remove = function() {
		this.stop();
		this.bullet.remove();
	};
	Bullet.prototype.restart = function() {
		this.stop();
		this.play();
	},
	Bullet.prototype.stop = function() {
		this.left = 0;
		clearTimeout(this._timeoutID);
	};
	return Bullet;
}());

var bullet = new Bullet;
bullet.play();

Rise,
спасибо, посмотрю что лучше
Мне там еще нужно предусмотреть возможность расширения. К примеру надо будет считывать положение относительно других движущихся объектов в зависимости от положения делать определенные действия. то ли шар сам свое положение будет считать, то ли это будет отдельный класс хз. Да и сами шары будут летать не по одной и той же траектории.
Вообще суть такая - сверху экрана будут ползти жуки, а эти шары будут их сбивать. Жуков я запилил, для них рандомно задается оступ слева и они ползут вниз, также запилил пушку шары которой мы здесь делали - пушка передвигается внизу экрана за курсором и стреляет кликом. Пока что эти шары сделал по своему коду, потом может ваш вариант поставлю.
Но это уже другая история - завтра, когда залью свой код на сервер напишу вопрос как высчитывать положения жуков и шаров и если их положения совпадают то удалять шар и жука или еще что-то с ними делать.