Javascript/Jquery Animation Conditional Question

Question

I'm working on a project where you can control a character around the screen. I'm using a sprite sheet that changes the frames depending which way you're walking. I have it set up where it works when I press the up arrow key and the animation works, but now I'm having trouble figuring out how to implement the logic to stop animating.

Heres what my case switch for moving looks like:

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);   
        }

    }

I've only implemented the animateScript() in the first case and it works. Now I don't know how to implement my stopAnimation() function, or where. Basically, it has to be whenever the user stops using the arrow keys this needs to be triggered. Any ideas?

Here's the animation functions:

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()

Answer 1

If you want to call function after an user stops pressing on a key, you need to add a keyup event. Just like your keydown event handler, you can check for each arrow key. Hope the following example helps.

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>