[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');