Жук который ползает Часть 2

[Bond]

Всем здравствуйте.
Есть жук (благодаря РОНИ и danik.js) который двигается при нажатии клавиш вверх, вниз, вправо, влево:
(Приведу только тот код который касается сути вопроса)
Лапа в HTML

<div class="marg">
		<div class="bug"> <!-- Жук -->
			<div class="limb_left1"> <!-- Лапа -->
				<span></span>
			</div>
		</div>
	</div>

А здесь жук в JS

function Bug() {
    this.step = 1;
    this.rotation = 0;
    this.direction = 'top';
    this.top = 200;
    this.left = 200;
    this.element = document.querySelector('.bug');
    this.bindKeys();
    //--------------------Лапа 1-----------------------------------
    this.limb = document.querySelector('.limb_left1');
    this.start_limb1   = -35; //Стартовое положение лапы
    this.top_limb1     = -35; // Крайнее верхнее положение лапы
    this.bottom_limb1  = 17;  // Крайнее нижнее положение лапы
    this.flag_limb = true; // Флаг лапы
    this.step_limb = 5; // Скорость движения лапы
    debugger;
}

Я добавил ему пока что одну лапу которая двигается вверх-вниз только при движении жука
(движение осуществляется через transform: rotate(0deg)

//---------------Лапа 1 - верхняя левая----------------------
Bug.prototype.rotate_limb1 = function() {
	var style_limb = this.limb.style;
	// Переключение флага
	if(this.start_limb1 < this.top_limb1) this.flag_limb = true;
	if(this.start_limb1 > this.bottom_limb1) this.flag_limb = false;
	// Двигаем лапу вверх если флаг true
	if(this.flag_limb == true){
		this.start_limb1 = this.start_limb1+this.step_limb;
		style_limb.transform = 'rotate(' + this.start_limb1 + 'deg)';
	}
	// Двигаем лапу вниз если флаг false
	if(this.flag_limb == false){
		this.start_limb1 = this.start_limb1-this.step_limb;
		style_limb.transform = 'rotate(' + this.start_limb1 + 'deg)';
	}
};
    //-----------------------------------------------------------------------

Все работает, все норм, но есть самый главный вопрос - адекватное ли подобное решение? Или может можно сделать проще, лучше и понятнее?

[Bond]

И еще вопрос - как сделать этот код универсальным для всех лап с учетом что некоторые параметры нужно при вызове передать только один раз - в дальнейшем они изменяются внутри функции. Видать я что то не дочитал в книге по JS

[Bond]

danik.js, рони, вы где? подскажите плиз, а то мозг уже кипит

[Bond]

На данный момент ситуация такая
Код жука

function Bug() {
    this.step = 1;
    this.rotation = 0;
    this.direction = 'top';
    this.top = 200;
    this.left = 200;
    this.element = document.querySelector('.bug');
    this.bindKeys();
    //Лапа 1
    this.limb1 = document.querySelector('.limb_left1');
    this.start_limb1   = -20; //Стартовое положение лапы
    this.top_limb1     = -35; // Крайнее верхнее положение лапы
    this.bottom_limb1  = 17;  // Крайнее нижнее пложение лапы
    this.flag_limb1 = true; // Флаг лапы
    this.step_limb = 3; // Скорость движения лапы
    // Лапа 2
    this.limb2 = document.querySelector('.limb_right1');
    this.start_limb2   = 0; //Стартовое положение лапы
    this.top_limb2     = -15; // Крайнее верхнее положение лапы
    this.bottom_limb2  = 38;  // Крайнее нижнее пложение лапы
    this.flag_limb2 =  false; // Флаг лапы
    this.step_limb2 = 3;
    
    debugger;
}

А вот лапы

// -------------------      Лапа 1                -------------------------
Bug.prototype.rotate_limb1 = function() {
	 this.style_limb = this.limb1.style;
	// Переключение флага
	if(this.start_limb1 <= this.top_limb1) this.flag_limb1 = true;
	if(this.start_limb1 >= this.bottom_limb1) this.flag_limb1 = false;
	// Двигаем лапу вверх если флаг true
	if(this.flag_limb1 == true){
		this.start_limb1 += this.step_limb;
		this.style_limb.transform = 'rotate(' + this.start_limb1 + 'deg)';
	}
	// Двигаем лапу вниз если флаг false
	if(this.flag_limb1 == false){
		this.start_limb1 -= this.step_limb;
		this.style_limb.transform = 'rotate(' + this.start_limb1 + 'deg)';
	}
};
//------------------      Лапа 2             -----------------------------
Bug.prototype.rotate_limb2 = function() {
	 this.style_limb = this.limb2.style;
	// Переключение флага
	if(this.start_limb2 <= this.top_limb2) this.flag_limb2 = true;
	if(this.start_limb2 >= this.bottom_limb2) this.flag_limb2 = false;
	// Двигаем лапу вверх если флаг true
	if(this.flag_limb2 == true){
		this.start_limb2 += this.step_limb;
		this.style_limb.transform = 'rotate(' + this.start_limb2 + 'deg)';
	}
	// Двигаем лапу вниз если флаг false
	if(this.flag_limb2 == false){
		this.start_limb2 -= this.step_limb;
		this.style_limb.transform = 'rotate(' + this.start_limb2 + 'deg)';
	}
};

Вызываются так

this.rotate_limb1();
this.rotate_limb2();

Нужно объединить этот код что бы был универсален для всех 6 лап

[danik.js]

Ну очевидно удобней вместо start_limb1, start_limb2 иметь массив limbs = [{start: 0}, {start: -10}], а функция rotateLimb() должна обойти все элементы массива.

if(this.flag_limb2 == true)

Че у нас в flag_limb, true/false, да? Зачем сравнивать true/false с true, чтобы в результате получить true/false?

Далее, зачем вообще два условия, зачем дважды проверять одно и то же?
И почему у тебя строка 27 дублируется и засунута в условие если она не зависит от результата сравнения?

[Bond]

Сто пудов, такие очевидные вещи пропустил.
По поводу массива не уверен - еще обход делать, можно так оставить без лишних строчек.
Получилось вот что

Bug.prototype.rotate_limb1 = function() {
	 this.style_limb = this.limb1.style;
	// Переключение флага
	if(this.start_limb1 <= this.top_limb1) this.flag_limb1 = true;
	if(this.start_limb1 >= this.bottom_limb1) this.flag_limb1 = false;
	// Двигаем лапу вверх если флаг true
	if(this.flag_limb1){
		this.start_limb1 += this.step_limb;
	}else{ // Двигаем лапу вниз если флаг false
		this.start_limb1 -= this.step_limb;
	}
	this.style_limb.transform = 'rotate(' + this.start_limb1 + 'deg)';
};

А вот что бы для всех лап один код использовать - не получается
Делаю так

Bug.prototype.rotate_limb = function(limb, start, ltop, bottom, flag, step) {
	 this.style_limb = limb.style;
	 //Проверяем есть ли свойство, если нет обьявляем только один раз
	if (typeof this.start == 'undefined') {this.start = start; this.flag = flag;}
	// Переключение флага
	if(this.start < ltop) this.flag = true;
	if(this.start > bottom) this.flag = false;
	// Двигаем лапу вверх если флаг true
	if(this.flag){
		this.start += step;
	}
	// Двигаем лапу вниз если флаг false
	else{
		this.start -= step;
	}
	this.style_limb.transform = 'rotate(' + this.start + 'deg)';
};

Вызов пока что двух лап так:

this.rotate_limb(this.limb1, this.start_limb1, this.top_limb1, this.bottom_limb1, this.flag_limb1, this.step_limb);
this.rotate_limb(this.limb2, this.start_limb2, this.top_limb2, this.bottom_limb2, this.flag_limb2, this.step_limb2);

Пашет но не так как надо - все смешивается в кучу - шаг движения лапы удваивается - если сейчас две лапы, то обе лапы продвигаются на 6, если подключить третью лапу до будет двигаться на шаг 9 и т.д. Получается что код выполняется по 2 раза для каждой из лап И вообще они двигаются как то синхронно не зависимо от своих стартовых положений.

[danik.js]

this.start

this.start один. А лап много. Говорю же, создай массив и храни в нем свойства каждой лапы. В других ЯП мы бы создали новый класс Limb, у которого были бы свойства (состояние лапы - угол повотора и направление движения) и метод - (подрыгать лапой или типа того). В js же объекты можно создавать и без классов: var limb1 = {prop1: 0, ..}

Хотя не вижу ничего плохого и в "классах". Как по мне с ними код выражительней. Просто с этими прототипами громоздко получаетя. ES6 рулит.
Сделай "класс" Limb короче. И создай 6 инстансов. И дергай ими по очереди.

[Bond]

Все пашет, но хотелось бы комментов по поводу кода

function Limb(limb, start, ltop, bottom, step){
	this.limb           = document.querySelector(limb);
	this.start          = start; //Стартовое положение лапы
	this.ltop           = ltop; // Крайнее верхнее положение лапы
	this.bottom       = bottom; // Крайнее нижнее пложение лапы
	this.lstep         = step; // Шаг движения лапы
	this.rotateLimb = function(){
		this.style_limb = this.limb.style;
		// Переключение флага
		if(this.start <= this.ltop) this.flag = true;
		if(this.start >= this.bottom) this.flag = false;
		// Двигаем лапу вверх если флаг true
		if(this.flag){
			this.start += this.lstep;
		}
		// Двигаем лапу вниз если флаг false
		else{
			this.start -= this.lstep;
		}
		this.style_limb.transform = 'rotate(' + this.start + 'deg)';
	}
}
// Создаем пока что 2 лапы
var limb1 = new Limb('.limb_left1', -20, -35, 17, 3);
var limb2 = new Limb('.limb_right1', 38, -15, 38, 3);

Вызов метода в нужном месте так

limb1.rotateLimb();
limb2.rotateLimb();

Можно еще сделать общий шаг лапы this.lstep, но это уже мелочи. Хотя в дальнейшем может при повороте нужно будет изменять шаг для отдельных лап