Жук который ползает Часть 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, время: 07:40. |