Я работаю над проектом, где вы можете управлять персонажем по всему экрану. Я использую спрайт лист, который меняет кадры в зависимости от того, как вы идете. Я установил его там, где он работает, когда я нажимаю клавишу со стрелкой вверх и анимация работает, но теперь у меня возникают проблемы с выяснением, как реализовать логику, чтобы остановить анимацию.
Вот как выглядит мой переключатель для перемещения:
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()