Жук который ползает. Возрождение

[Bond]

Всем доброго времени суток.
Сразу оговорюсь что с ООП не работал ни на каких языках, кроме JS, и то немного, на любительском уровне, чисто для себя, в больших проектах не участвовал.
Пару деньков почитал документацию по TypeScript и решил для пущего понимания переписать существующий код на JS который писали всем миром здесь :
Жук который ползает Часть 2

Много понимания не добавилось в виду относительной простоты приложения - все свелось к небольшой переписи кода, но все же есть вопрос по Typescript
Адекватный ли это код и структура с точки зрения более классических ООП-шных языков? Что можно изменить в структуре?

Как все работает можно посмотреть здесь - http://1.top-start.ru/bug/ - управление жуком стрелками.

Код на TypeScript:

//Класс жук
class Bug {
	step: number;
	rotation: number;
	direction: string;
	top: number;
	left: number;
	element: any;
	constructor() {
		this.step = 4;
		this.rotation = 0;
		this.direction = 'top';
		this.top = 200;
		this.left = 200;
		this.element = document.querySelector('.bug');
		this.bindKeys();
	}
	bindKeys(){
		var keyNav = { 38: 'top', 39: 'right', 37: 'left', 40: 'bottom' };
		var bug = this;
		document.addEventListener('keydown', function(e) {
			if (e.keyCode in keyNav)
				bug.moveTo(keyNav[e.keyCode]);

		}, false);
	}
	update(){
		var style = this.element.style;
		// if (this.left < 0) { this.left = 1; return; }
		// if (this.top < -25) { this.top = -24; return; }
		style.top = this.top + 'px';
		style.left = this.left + 'px';
		style.transform = 'rotate(' + this.rotation + 'deg)';
	}
	moveTo(direction) {
		this.direction = direction;
		var angle = { top: 0, left: 270, right: 90, bottom: 180 }[direction];
		var diff = angle - (this.rotation % 360);
		if (diff > 180)
			diff = diff - 360;
		else if (diff < -180)
			diff = diff + 360;
		this.rotation += diff;
		if (diff == 0) {
			this.advance();
		}
		this.update();
		limb1.rotateLimb(); limb2.rotateLimb(); limb3.rotateLimb(); //left limb
		limb4.rotateLimb(); limb5.rotateLimb(); limb6.rotateLimb(); //right limb
	}
	advance(){
		switch (this.direction) {
			case 'top':
				this.top -= this.step;
				break;
			case 'bottom':
				this.top += this.step;
				break;
			case 'left':
				this.left -= this.step;
				break;
			case 'right':
				this.left += this.step;
				break;
		}
	}
}
//Класс лапа
class Limb {
	limb: any;
	start: number;
	ltop: number;
	bottom: number;
	lstep: number;
	style_limb: any;
	flag: boolean;
	rotateLimb() {
		this.style_limb = this.limb.style;
		if (this.start <= this.ltop) this.flag = true;
		if (this.start >= this.bottom) this.flag = false;
		if (this.flag) { this.start += this.lstep; } else { this.start -= this.lstep; }
		this.style_limb.transform = 'rotate(' + this.start + 'deg)';
	}
	constructor(limb, start, ltop, bottom, step) {
		this.limb = document.querySelector(limb);
		this.start = start; //Стартовое положение лапы
		this.ltop = ltop; // Крайнее верхнее положение лапы
		this.bottom = bottom; // Крайнее нижнее пложение лапы
		this.lstep = step; // Шаг движения лапы
	}
}
var limb1 = new Limb('.limb_left1', -5, -35, 17, 12);
var limb2 = new Limb('.limb_left2', 0, 0, 50, 12);
var limb3 = new Limb('.limb_left3', -10, -15, 37, 12);
var limb4 = new Limb('.limb_right1', 38, -15, 38, 12);
var limb5 = new Limb('.limb_right2', 0, -48, 0, 12);
var limb6 = new Limb('.limb_right3', -10, -35, 5, 12);

var bug = new Bug();
bug.moveTo('top');

Ничего сложного 2 класса и несколько методов, но все же прошу прокоментить

При надобности код на JS скомпилированный с TS можно взять прям с сервера.
Исходный код с которого писал на TS - здесь - http://1.top-start.ru/bug/js/pics2.js

Также есть вопрос немного не по теме - Где можно взять литературу или видео на русском языке что бы нормально "въехать" в TypeScript? Потому как что то с уроками по TS на том же ютубе печаль беда - такое ощущение что все подразумевают что человек который знакомится с TS кроме JS знаком с С#, Java и т.д. знаком с интерфейсами, модулями и пр.
Буду признателен за комменты и подсказки.

[Bond]

Я тут немного посидел и решил усложнить себе жизнь - задался вопросом - а что если мне надо 2, 3 или 4 жука (пока не важно для какой цели)?
Немного изменил код в некоторых местах
Теперь 2 жука создаются так

var bug = new Bug(100, 100, '.bug');
bug.moveTo('top');

var bug2 = new Bug(300, 100, '.bug2');
bug2.moveTo('bottom');

Где в параметрах я задаю начальное положение жука сверху и слева и HTML класс самого жука.
И естественно у меня возникла проблема с лапами - теперь 2 жука управляют одновременно одними и теми же лапами - они двигаются у два раза быстрее

Может напрасно я создавал отдельный класс для лап? Лапы то ведь связать надо каждую со своим жуком
Посижу подумаю...

[Bond]

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

http://1.top-start.ru/bug/ - управление первым жуком по прежнему стрелками, вторым клавишами WASD.

Всего лишь сделал что бы каждый новый жук создавал сам себе лапы в конструкторе в строках 24-29.
По прежнему остается вопрос - адекватный ли этот подход и код в целом. Компилятор не матерится, все работает но все же програмерский подход "работает - не трогай" не катит. Прошу комментировать.

class Bug {
	step: number;
	rotation: number;
	direction: string;
	top: number;
	left: number;
	element: any;
	limb1: any;
	limb2: any;
	limb3: any;
	limb4: any;
	limb5: any;
	limb6: any;
	controlBug: boolean;
	constructor(top, left, element, control) {
		this.controlBug = control;
		this.step = 4;
		this.rotation = 0;
		this.direction = 'top';
		this.top = top;
		this.left = left;
		this.element = document.querySelector(element);
		this.bindKeys();
		this.limb1 = new Limb(element + ' ' + '.limb_left1', -5, -35, 17, 12);
		this.limb2 = new Limb(element + ' ' + '.limb_left2', 0, 0, 50, 12);
		this.limb3 = new Limb(element + ' ' + '.limb_left3', -10, -15, 37, 12);
		this.limb4 = new Limb(element + ' ' + '.limb_right1', 38, -15, 38, 12);
		this.limb5 = new Limb(element + ' ' + '.limb_right2', 0, -48, 0, 12);
		this.limb6 = new Limb(element + ' ' + '.limb_right3', -10, -35, 5, 12);
	}
	bindKeys(){
		if(this.controlBug) {
			var keyNav = { 38: 'top', 39: 'right', 37: 'left', 40: 'bottom' };
		} else {
			var keyNav = { 87: 'top', 68: 'right', 65: 'left', 83: 'bottom' };
		}
		var bug = this;
		document.addEventListener('keydown', function(e) {
			if (e.keyCode in keyNav)
				bug.moveTo(keyNav[e.keyCode]);

		}, false);
	}
	update(){
		var style = this.element.style;
		// if (this.left < 0) { this.left = 1; return; }
		// if (this.top < -25) { this.top = -24; return; }
		style.top = this.top + 'px';
		style.left = this.left + 'px';
		style.transform = 'rotate(' + this.rotation + 'deg)';
	}
	moveTo(direction) {
		this.direction = direction;
		var angle = { top: 0, left: 270, right: 90, bottom: 180 }[direction];
		var diff = angle - (this.rotation % 360);
		if (diff > 180)
			diff = diff - 360;
		else if (diff < -180)
			diff = diff + 360;
		this.rotation += diff;
		if (diff == 0) {
			this.advance();
		}
		this.update();
		this.limb1.rotateLimb(); this.limb2.rotateLimb(); this.limb3.rotateLimb(); //left limb
		this.limb4.rotateLimb(); this.limb5.rotateLimb(); this.limb6.rotateLimb(); //right limb
	}
	advance(){
		switch (this.direction) {
			case 'top':
				this.top -= this.step;
				break;
			case 'bottom':
				this.top += this.step;
				break;
			case 'left':
				this.left -= this.step;
				break;
			case 'right':
				this.left += this.step;
				break;
		}
	}
}
class Limb{
	limb: any;
	start: number;
	ltop: number;
	bottom: number;
	lstep: number;
	style_limb: any;
	flag: boolean;
	parent: any;
	rotateLimb(e) {
		this.style_limb = this.limb.style;
		if (this.start <= this.ltop) this.flag = true;
		if (this.start >= this.bottom) this.flag = false;
		if (this.flag) { this.start += this.lstep; } else { this.start -= this.lstep; }
		this.style_limb.transform = 'rotate(' + this.start + 'deg)';
	}
	constructor(limb, start, ltop, bottom, step) {
		this.limb = document.querySelector(limb);
		this.start = start; //Стартовое положение лапы
		this.ltop = ltop; // Крайнее верхнее положение лапы
		this.bottom = bottom; // Крайнее нижнее пложение лапы
		this.lstep = step; // Шаг движения лапы
	}
}

var bug = new Bug(100, 100, '.bug', true);
bug.moveTo('top');

var bug2 = new Bug(200, 100, '.bug2', false);
bug2.moveTo('top');

[aklis]

Чтобы небыло иллюзии невнимания скажу что вы не один
К сожалению комментировать код не смогу - навыков не хватит, а чем больше нового узнаю тем больше понимаю что нуб полный. От нуба критики не будет, вот.
Думаю поковырять малость это в свободное время, сделаю жука самостоятельным. Свободу жукам!

[Bond]

aklis,
в каком плане самостоятельным? Вроде как каждый жук сам по себе.

[aklis]

Самостоятельным - в плане будет бегать сам.

Хочу пожаловаться, вот предыстория:
Смотрю на лостфилм выпустили первую серию шестого сезона игры престолов, а если сидишь с российского айпи тогда мол скачать нельзя ее.
Глянул, там просто див кнопки скачивания скрыт. Посмотрел, по клику на нем запускается функция ShowAllReleases('145','6.00','01') .
id сериала, номер сезона и серии - класс думаю я, очень удобно теперь будет качать.
Выполнил в консоли ее, открылось всплывающее окно, скачал серию спокойно и без прокси. Думаю: надо поделится с народом в комментах, а то многие ссылки выискивают среди всех комментариев. Поделился.

Суть: никто не обратил внимания, просят линк... Хотя казалось бы сделать по моему не сложнее чем плюнуть через губу, но народ хочет тыкать мышкой, только дайте цель! Абзац блин...

[Bond]

aklis,
Ну кому то легко, а кому то показалось тяжело видимо... Бывает
По поводу самостоятельного жука - думал сделать так, там вроде и делов немного. Вообще можно намножить кучу жуков и сделать пусть двигаются хаотично. Но это слабо осложнит жизнь, надо что то потяжелее придумать с уклоном на ООП.

[aklis]

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

[nerv_]

Вроде как каждый жук сам по себе

жук, который гулял сам по себе