A more concise way to loop a function on keypress in a case?

Question

What am I trying to accomplish?

I'm trying to get the TrumpHead to continue moving until another key is pressed moving it in a different direction, like in the game snake. The only thing I can think of it making a bunch of cases with functions filled with cases in each? Any ideas welcome and help needed, new to javascript.

My code

var width = 1000, height = 1000; //Width and Height of Canvas
var cvs = document.getElementById('Snake'); //cvs is representing Canvas
var ctx = cvs.getContext('2d'); //ctx is context represented in 2 dimentions.

cvs.width = window.innerWidth; //setting the canvas width to be the width above.
cvs.height = window.innerHeight; //setting the canvas height to be the height above.

var img = new Image();
img.src = 'snakeHead.png';
var TrumpHead = canvasImage(100, 100, img);
window.addEventListener('keydown',this.checkOn,false);
//window.addEventListener('keyUp',this.checkOff,false);

function canvasImage(x, y, img) {
    this.image = img;
    this.x = x;
    this.y = y;
    this.width = img.width;
    this.height = img.height;
    return this;
}

function checkOn(e) {
    //var pos = getTrumpPos();
    //var x = pos [0];
    //var y = pos [1];
    //alert(e.keyCode);
    switch (e.keyCode) { 
        case 37://left

        if (TrumpHead.x == cvs.width) {  //this is just alerting you lose if 
            you go off the canvas
            alert("You Lose");
        } else if (TrumpHead.x < 0) {
            alert("You Lose");
        } else {
            LeftDirection ();
            console.log("Pressed Left");
            console.log(x,y);
        }
        break;

        case 38: //up key

        if (TrumpHead.y < 0) {
            alert("You Lose");
        } else if (TrumpHead.y > cvs.height) {
            alert("You Lose");
        } else {
            console.log("Pressed Up");
            UpDirection();
            console.log(x,y);
        }
        break;

        case 39: //right

        if (TrumpHead.x > cvs.width) {
            alert("You Lose");
        } else if (TrumpHead.x < 0) {
            alert("You Lose");
        } else{
            console.log("Pressed Right");
            console.log(x,y);
            RightDirection();
        }
        break;

        case 40: //down

        if (TrumpHead.y < 0) {
            alert("You Lose");
        } else if (TrumpHead.y > cvs.height) {
            alert("You Lose");
        } else{
            console.log("Pressed Down");
            console.log(x,y);
            DownDirection(); //this is a function defined in the movementFunctions section.
        }
        break;
        // default: alert(e.keyCode); //Everything else
    }
}

function gameLoop()
{
    // change position based on speed
    checkOn();
    setTimeout("gameLoop()",10);
}

function LeftDirection ()
{
    TrumpHead.x = TrumpHead.x - 50;
    ctx.clearRect(0,0,cvs.width,cvs.height); //clears the gamescreen
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50); 
    //Puts Trump down.
}
function RightDirection ()
{
    TrumpHead.x = TrumpHead.x + 50;
    ctx.clearRect(0,0,cvs.width,cvs.height);
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50);
}
function UpDirection () 
{
    TrumpHead.y = TrumpHead.y - 50;
    ctx.clearRect(0,0,cvs.width,cvs.height);
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50);
}

function DownDirection () {
    TrumpHead.y = TrumpHead.y + 50;
    ctx.clearRect(0,0,cvs.width,cvs.height);
    ctx.drawImage(TrumpHead.image, TrumpHead.x, TrumpHead.y, 50, 50);
}

Answer 1

You need to break the program execution into at least two loops/pumps.
1) An input loop, 2) An update loop

If you don't then your scene update will be at the mercy of your user input or vis-a-vis.

Good luck!

Answer 2

You need two loops: one for input, and one for actually drawing on the display. You can use browser events to check for key input (shown here with the up and left arrow keys, and set state based off of which keys were pressed. Then you can use this in your update loop. Here's an example:

var movingLeft = false, movingUp = false;

document.body.onkeydown(function(e) { 
   switch(e.keyCode) { 
      case 38: 
          movingUp = true;
          movingLeft = false;
          break;
      case 37: 
          movingLeft = true;
          movingUp = false;
          break;
   }
});

// and a loop:

function loop() {
  if (movingLeft) {
    updateDisplayByLeftIncrement(); //update display how you want
  else if(movingUp) {
     updateDisplayByUpIncrement(); //update display how you want
  } //...and so on for all the movements
}

//and then you can use setInterval() to loop with a delay between iterations
setInterval(loop, timeOut);