Horizontal movement with Javascript

Question

I feel like a complete klutz, I had this working and then I accidentally forgot to save it! I'm an idiot. I've spent the last day trying to recreate what I had but I can't do it. Basically (from my last save) I had this:

function canvasMove(e) {

    if(!e) var e = window.event;

    var downcheck;
    var upcheck;
    var leftcheck;
    var rightcheck;

    if(e.keyCode == '38') {

        if(up + down == 0) downcheck = false;
        else downcheck = true; 

        e.preventDefault();

    } 


    if(e.keyCode == '40') {

        if(up + down > HEIGHT - 110) upcheck = false;
        else upcheck = true; 
        e.preventDefault();
    } 


    if(e.keyCode == '37') { 

        if(left + right == 0) rightcheck = false;
        else rightcheck = true;
        e.preventDefault();
    } 


    if(e.keyCode == "39") { 
        if(left + right > WIDTH - 110) leftcheck = false;
        else leftcheck = true; 
        e.preventDefault();
    }

    if(leftcheck == true) { left += 10; counting() };
    if(rightcheck == true) { right -= 10; counting() };
    if(upcheck == true) { up += 10; counting(true) };
    if(downcheck == true) { down -= 10; counting(true) };

}

The problem of course being that Javascrpt doesn't support the ability to check if two keys are being pressed at the same time. What I want to accomplish is when the user pressed up and left they'll move diagonally. Ignore the "counting" function, it's just to keep track of how much the user has moved.

I managed to accomplish this with just else and if statements, no less! So I was wondering if you guys could give it a shot. The first if statement in each key if statement is so the user can't leave the canvas box. Then I have a function that moves the user by redrawing the canvas.

function redraw() {
    clear(draw);
    draw.fillStyle = 'rgba(0,0,0,0.5)';
    draw.fillRect(left + right, up + down, '100', '100');   
}

The "clear" function is just a simple function that clears the entire canvas. This is all controlled by an init function that looks like this:

function init() {
    canvas = document.getElementById('game');
    HEIGHT = canvas.height;
    WIDTH = canvas.width;
    draw = canvas.getContext('2d');

    setInterval(redraw, 30);

    document.onkeydown = canvasMove;
}

Answer 1

Your -check flags need to be global variables rather than function-scoped variables, otherwise they will never stay set between keydown events (handling only one key at a time). You also need a keyup event handler that will unset the correct flag when a key is released.