Горизонтальное движение с Javascript

Question

Я чувствую себя полным клуцем, у меня это сработало, а потом я случайно забыл его сохранить! Я идиот. Я провел последний день, пытаясь воссоздать то, что у меня было, но я не могу этого сделать. В основном (из моего последнего сохранения) у меня было это:

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

}

Проблема, конечно, в том, что Javascrpt не поддерживает возможность проверки, нажаты ли две клавиши одновременно. То, что я хочу сделать, это когда пользователь нажал и оставил, они будут двигаться по диагонали. Не обращайте внимания на функцию «подсчета», она просто отслеживает, сколько пользователь переместил.

Мне удалось сделать это с помощью просто еще и если не меньше заявлений! Поэтому мне было интересно, если вы, ребята, могли бы это сделать. Первый оператор if в каждом ключе if так, что пользователь не может покинуть холст. Затем у меня есть функция, которая перемещает пользователя путем перерисовки холста.

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

Функция очистки - это простая функция, которая очищает весь холст. Все это контролируется функцией init, которая выглядит следующим образом:

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

    setInterval(redraw, 30);

    document.onkeydown = canvasMove;
}

Answer 1

Ваши флаги -check должны быть глобальными переменными, а не переменными в функциональной области, иначе они никогда не останутся установленными между событиями нажатия клавиш (обработка только одной клавиши за раз).Вам также понадобится обработчик события keyup, который будет сбрасывать правильный флаг при отпускании ключа.