|
Жук который ползает. Усовершенствование
Всем здравствуйте.
Есть жук еще с этой темы http://javascript.ru/forum/misc/6274...rozhdenie.html Решил добавить функционал - добавил кнопку что бы при клике добавлялся еще один жук + чтобы можно было по кликом выбирать жука который становится активным и им можно было управлять. Посмотреть что получилось можно здесь - http://1.top-start.ru/bug/ Что бы реализовать задуманное создал новый класс который создает жуков Писал на TypeScript, а вот код который уже сгенерирован в JS
var CreateBug = (function () {
function CreateBug() {
this.elemBug = document.getElementById("marg").innerHTML;
this.create();
this.eventsBug();
}
//Метод добавление жука при клике на кнопку
CreateBug.prototype.create = function () {
var elementBug = this.elemBug;
//Вешаем клик на кнопку
document.getElementById("create").addEventListener("click", function () {
//Удаляем класс active так как новый жук уже будет с этим классом
document.getElementsByClassName("active")[0].classList.remove("active");
//Вставляем нового жука в поле #marg
document.getElementById("marg").innerHTML += elementBug;
//запускаем метод eventsBug который переназначает клик на всех жуков
el.eventsBug();
var bug = new Bug(100, 100, '.active');
}, false);
};
//Метод переключения между жуками
CreateBug.prototype.eventsBug = function () {
var removeClass = function () { //Функция которая срабатывает при клик
//Удаяем класс active с жука у торого этот класс есть
document.getElementsByClassName("active")[0].classList.remove("active");
// Добавляем класс active для жука по котором кликнули
this.classList.add("active");
var bug = new Bug(this.offsetTop, this.offsetLeft, '.active');
};
var elements = document.getElementsByClassName("bug");
//Вешаем событие на всех жуков
for (var i = elements.length - 1; i >= 0; i--) {
elements[i].addEventListener('click', removeClass);
}
};
return CreateBug;
}());
var bug = new Bug(100, 100, '.active');
var el = new CreateBug();
Жуки добавляются как было задумано, новый жук становится активным, им можно управлять остальные жуки не двигаются, а вот при переключении между жуками есть проблема - жуки двигаются все на которые кликнул не смотря на то что класс active нормально переключается. А если добавить еще жука то все становится как надо - все жуки стоят на месте - активный двигается. Все писал в стиле ООП так как цель всего действа именно для изучения ООП + TypeScript а еще чтобы поближе познакомится именно с JS, потому как все время сидел на jQuery Подскажите в чем проблема, буду признателен за помощь. |
Как это вообще работает?!
document.getElementById("marg").innerHTML += elementBug; присваиваем в поле #marg содержимое этого поля + содержимое этого же поля. eventsBug() вот тут под капот хотелось бы посмотреть. |
Bond,
Смотрел-смотрел, но так и не понял: Зачем это? Что оно делает? var bug = new Bug(this.offsetTop, this.offsetLeft, '.active'); (строка 28) |
aklis,
Да все верно мы присваиваем в поле #marg содержимое этого поля + содержимое этого же поля только то содержимое которое было при загрузке страницы - а у нас там был код только одного жука с классом active |
Bond,
попробуйте не использовать Цитата:
|
Dilettante_Pro,
У нас есть класс Bug - он управляет жуком и т.д, а этой строкой мы создаем объект вернее как бы пересоздаем иначе вообще не пашет var bug = new Bug(this.offsetTop, this.offsetLeft, '.active'); Передаем три параметра - отступ сверху, отступ слева и html класс того блока который сейчас активный, то есть по которому мы кликнули - заметьте это все происходит при клике. Да загвоздка именно в этом - создавать постоянно новый объект при каждом клике не годится - но как тогда поступить? Создавать объект для каждого нового жука - то есть три жука три объекта - но что бы двигался только активный? Или нужен деструктор который будет удалять все объекты....? А потом создавать новый для активного жука? |
Bond,
Причем bug у вас каждый раз переопределяется - то как глобальная, то как локальная переменная... В результате глобальный bug как был, так и остается, а локальные, живущие в пределах функции - что с ними? Для чего они? |
Dilettante_Pro,
локальные не нужны, это моя грубейшая ошибка. Но дело все равно не меняет - мы создаем объект который управляет жуком с классом active если создать еще жука и класс active переписать ему то все равно этот объект будет управлять первым жуком, а если пересоздать объект то будут двигаться два жука. |
Bond,
Bug.prototype.moveTo = function (direction) {
if(!this.element.classList.contains("active")) return;
|
Bond,
мысли вслух ...
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Заголовок</title>
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://1.top-start.ru/bug/css/main.css" />
</head>
<body>
<h3>Управление стрелками</h3>
<button id="create">Добавить еще одного жука</button>
<div id="marg">
<div class="bug active">
<div class="limb_left1">
<span></span>
</div>
<div class="limb_left2">
<span></span>
</div>
<div class="limb_left3">
<span></span>
</div>
<div class="limb_right1">
<span></span>
</div>
<div class="limb_right2">
<span></span>
</div>
<div class="limb_right3">
<span></span>
</div>
</div>
</div>
<script>var Bug = (function () {
function Bug(top, left, element) {
//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, 11);
this.limb2 = new Limb(element + ' ' + '.limb_left2', 0, 0, 50, 11);
this.limb3 = new Limb(element + ' ' + '.limb_left3', -10, -15, 37, 11);
this.limb4 = new Limb(element + ' ' + '.limb_right1', 38, -15, 38, 11);
this.limb5 = new Limb(element + ' ' + '.limb_right2', 0, -48, 0, 11);
this.limb6 = new Limb(element + ' ' + '.limb_right3', -10, -35, 5, 11);
this.moveTo('top');
}
Bug.prototype.bindKeys = function () {
var keyNav = { 38: 'top', 39: 'right', 37: 'left', 40: 'bottom' };
var bug = this;
document.addEventListener('keydown', function (e) {
if (e.keyCode in keyNav)
e.preventDefault()
bug.moveTo(keyNav[e.keyCode]);
}, false);
};
Bug.prototype.update = function () {
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)';
};
Bug.prototype.moveTo = function (direction) {
if(!this.element.classList.contains("active")) return;
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.update();
this.limb1.rotateLimb();
this.limb2.rotateLimb();
this.limb3.rotateLimb(); //left limb
this.limb4.rotateLimb();
this.limb5.rotateLimb();
this.limb6.rotateLimb(); //right limb
};
Bug.prototype.advance = function () {
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;
}
};
return Bug;
}());
var Limb = (function () {
function Limb(limb, start, ltop, bottom, step) {
this.limb = document.querySelector(limb);
this.start = start; //Стартовое положение лапы
this.ltop = ltop; // Крайнее верхнее положение лапы
this.bottom = bottom; // Крайнее нижнее пложение лапы
this.lstep = step; // Шаг движения лапы
}
Limb.prototype.rotateLimb = function (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)';
};
return Limb;
}());
(function () {
var marg = document.querySelector("#marg"),
elemBug = marg.removeChild(document.querySelector(".bug")),
but = document.querySelector("#create");
but.addEventListener("click", function () {
var act = document.querySelector(".active")
act && act.classList.remove("active");
marg.appendChild(elemBug.cloneNode(true));
var bug = new Bug(100, 100, '.active');
bug.element.addEventListener('click', function () {
document.querySelector(".active").classList.remove("active");
this.classList.add("active");
});
}, false);
but.click()
}());
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:54. |
|