Moving diagonally in 2d canvas JavaScript game

Question

I've scoured the web for this answer. If it is buried in a StackOverflow answer somewhere I apologize.

I am working on a 2d canvas JavaScript game.

I am handling arrow key input with onkeydown and onkeyup events.
I store this input in an object called Keys.

var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
};

This is what my event handlers look like:

window.onkeydown = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = true;
     else if(kc === 38) Keys.up = true;
     else if(kc === 39) Keys.right = true;
     else if(kc === 40) Keys.down = true;

     move();
 };

window.onkeyup = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = false;
     else if(kc === 38) Keys.up = false;
     else if(kc === 39) Keys.right = false;
     else if(kc === 40) Keys.down = false;
};

Then each time the keydown event occurs, I call my move() function:

var move = function(){

    if(Keys.up){
        hero.y -= 10;
    }

    else if(Keys.down){
        hero.y += 10;
    }

    if(Keys.left){
        hero.x -= 10;
    }

    else if(Keys.right){
        hero.x += 10;
    }

    main();
}

The move() function calls my main() function which just draws the map again. I'm trying to avoid looping the game, and instead update the map each time the player moves.

So my problem arises when I try to move diagonally. I am able to do it, however once I release the second key pressed, my character stops.

For example: Right key pressed and then up key pressed, character moves northeast. Up key released, player stops.

However, if I release the right key, the character continues moving up.

Another glitch is when I hold both left and right, the character will move left, but I want it to stop moving.

Answer 1

You mention that you want the player to stop moving when you press the left and right keys simultaneously. It appears you should be able to easily do this by replacing the else if statements in move with if statements, resulting in a move function similar to:

var move = function(){

    if(Keys.up){
        hero.y -= 10;
    }

    if(Keys.down){
        hero.y += 10;
    }

    if(Keys.left){
        hero.x -= 10;
    }

    if(Keys.right){
        hero.x += 10;
    }

    main();
}

Answer 2

Quickly sketched an example, jsfiddle: http://jsfiddle.net/ofnp4vj4/

HTML: <div id="log"></div>

JS:

var Keys = {
    up: false,
    down: false,
    left: false,
    right: false
};

var hero = {
    x: 0,
  y: 0
};

var log = document.getElementById("log");

window.onkeydown = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = true;
     if(kc === 38) Keys.up = true;
     if(kc === 39) Keys.right = true;
     if(kc === 40) Keys.down = true;
 };

window.onkeyup = function(e){
     var kc = e.keyCode;
     e.preventDefault();

     if(kc === 37) Keys.left = false;
     if(kc === 38) Keys.up = false;
     if(kc === 39) Keys.right = false;
     if(kc === 40) Keys.down = false;
};



function main() {
  /* body */

    move();

  log.innerHTML = "x: "+hero.x+", y: "+hero.y;
};

function move(){

    if(Keys.up){
        hero.y -= 10;
    }

    if(Keys.down){
        hero.y += 10;
    }

    if(Keys.left) {
        hero.x -= 10;
    }

    if(Keys.right){
        hero.x += 10;
    }
}

setInterval(main, 100);