Условный вопрос об анимации Javascript / Jquery - PullRequest
Новая
       12

Условный вопрос об анимации Javascript / Jquery

0 голосов
/ 11 июля 2019

Я работаю над проектом, где вы можете управлять персонажем по всему экрану. Я использую спрайт лист, который меняет кадры в зависимости от того, как вы идете. Я установил его там, где он работает, когда я нажимаю клавишу со стрелкой вверх и анимация работает, но теперь у меня возникают проблемы с выяснением, как реализовать логику, чтобы остановить анимацию.

Вот как выглядит мой переключатель для перемещения: 

switch (e.which) {

      case 38: //up
        console.log("Up")
        $(".player").finish().animate({
            top: "-=10"
        }, 100);

        animateScript();
        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            top: "+=20"
        }, 100);
        }

        break;


      case 37: //left
        console.log("Left")
        $(".player").finish().animate({
            left: "-=10"
        }, 100);

        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            left: "+=20"
        }, 100);
        }

        break;


      case 39: //right
        console.log("Right")
        $(".player").finish().animate({
            left: "+=10"
        }, 100);

        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            left: "-=20"
        }, 100);  
        }

        break;


      case 40: //down
        console.log("Down")
        $(".player").finish().animate({
            top: "+=10"
        }, 100); 

        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            top: "-=20"
        }, 100);   
        }

    }

Я реализовал animateScript () только в первом случае, и он работает. Теперь я не знаю, как реализовать мою функцию stopAnimation () или где. По сути, это должно происходить всякий раз, когда пользователь прекращает использовать клавиши со стрелками, это должно быть запущено. Есть идеи?

Вот функции анимации: 

var tID; //clear the setInterval()
function stopAnimate() {
clearInterval(tID);
}
 //end of stopAnimate()


function animateScript() {
var    position = 50; //start position for the image slicer
const  interval = 100; //100 ms of interval for the setInterval()
const  diff = 50;     //diff as a variable for position offset
tID = setInterval ( () => {
$('.player').css('background-position', `-${position}px 0px`);
//we use the ES6 template literal to insert the variable "position"
if (position < 1601)
{ position = position + 
diff;}
//we increment the position by 50 each time
else
{ position = 50; }
//reset the position to 50px, once position exceeds 1536px
}
, interval ); //end of setInterval
} //end of animateScript()

1 Ответ

1 голос
/ 11 июля 2019

Если вы хотите вызвать функцию после того, как пользователь перестает нажимать на клавишу, вам нужно добавить событие keyup .Как и ваш обработчик событий keydown , вы можете проверять каждую клавишу со стрелкой.Надеюсь, что следующий пример поможет. 

const game = document.getElementById('game');

document.addEventListener('keydown', event => {
  event.preventDefault();
  game.textContent = "keyDown: " + event.key;
});

document.addEventListener('keyup', event => {
  event.preventDefault();
  game.textContent = "keyUp: " + event.key;
});
<div id="game">Click on me, then press a key!</div>
...