Заставить персонажа бегать за курсором

Question

В общем, у меня есть спрайт бега персонажа. Задача состоит в том, что нужно, чтобы персонаж бегал за мышкой. Анимацию бега реализовать удалось, и, вроде за курсором бегает, но дергается и не останавливается анимация, когда курсор статичен. В чём проблема?

var styles = {
 width: 607,
 height: 609
};

var frames = 22; // Количество кадров
var speed = 10; // Размер одного шага

document.body.addEventListener("mousemove", getClickPosition);

function getClickPosition (e) { //слушатель события движения мыши
var picture = document.getElementById("ellen");
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x - (picture.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (picture.clientHeight / 2);
picture.style.left = xPosition + "px";
picture.style.top = yPosition + "px";
}

function getPosition(element) { //расчёт позиции элемента
var xPos = 0;
var yPos = 0;
while (element) {
 if (element.tagName == "BODY") {
  var xScroll = element.scrollLeft || document.documentElement.scrollLeft;
  var yScroll = element.scrollTop || document.documentElement.scrollTop;
  xPos += (element.offsetLeft - xScroll + element.clientLeft);
  yPos += (element.offsetTop - yScroll + element.clientTop);
 } 
 else {
  xPos += (element.offsetLeft - element.scrollLeft + element.clientLeft);
  yPos += (element.offsetTop - element.scrollTop + element.clientTop);
 }
 element = element.offsetParent;
}
spriteAnimation('ellen', 'css_sprites.png', styles);
return { x: xPos, y: yPos };
}

function spriteAnimation(elementId, imgName, styles) {
 var img = document.createElement('img');
 var offset = 0;
 img.onload = function() {
   var element = document.getElementById(elementId);
   element.style.width = styles.width +'px';
   element.style.height = styles.height +'px';
   var i = 0;
   // размер одного спрайта в пикселях
   var step = img.width / frames;
   interval = setInterval(function() {
     if (--i < 0) i = frames - 1; 
     offset = step * i;
     element.style.background = "url('" + imgName + "') " + offset + "px 50%";
     
   }, 1000 / 10)
 }
 img.src = imgName;

}

<style>
    #ellen {
        width: 50%;
        height: 560px;
        background-image: url("Anim_IDLE_00001.png");
        position: absolute;
        left: -200px;
        transition: left .65s ease-in;
    }
    
</style>
<body>
 
<div id="ellen"></div>
 
<script src="animation.js"></script>
</body>

БЛОГ НА HUSL

Заставить персонажа бегать за курсором

Ответы (0 шт):