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>