Жук который ползает Часть 2
Всем здравствуйте.
Есть жук (благодаря РОНИ и 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)';
}
};
//-----------------------------------------------------------------------
Все работает, все норм, но есть самый главный вопрос - адекватное ли подобное решение? Или может можно сделать проще, лучше и понятнее? |
И еще вопрос - как сделать этот код универсальным для всех лап с учетом что некоторые параметры нужно при вызове передать только один раз - в дальнейшем они изменяются внутри функции. Видать я что то не дочитал в книге по JS :)
|
danik.js, рони, вы где? подскажите плиз, а то мозг уже кипит :help:
|
На данный момент ситуация такая
Код жука
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 лап |
Ну очевидно удобней вместо start_limb1, start_limb2 иметь массив limbs = [{start: 0}, {start: -10}], а функция rotateLimb() должна обойти все элементы массива.
Цитата:
Далее, зачем вообще два условия, зачем дважды проверять одно и то же? И почему у тебя строка 27 дублируется и засунута в условие если она не зависит от результата сравнения? |
Сто пудов, такие очевидные вещи пропустил.
По поводу массива не уверен - еще обход делать, можно так оставить без лишних строчек. Получилось вот что
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 раза для каждой из лап И вообще они двигаются как то синхронно не зависимо от своих стартовых положений. |
Цитата:
Хотя не вижу ничего плохого и в "классах". Как по мне с ними код выражительней. Просто с этими прототипами громоздко получаетя. ES6 рулит. Сделай "класс" Limb короче. И создай 6 инстансов. И дергай ими по очереди. |
Все пашет, но хотелось бы комментов по поводу кода
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, но это уже мелочи. Хотя в дальнейшем может при повороте нужно будет изменять шаг для отдельных лап |
| Часовой пояс GMT +3, время: 01:13. |