はじめに

Javascriptでゲームを作っていた際、addEventListenerでユーザーのキー入力を取得していたのですが、同時に複数キーが押された時のキーの取得に詰まったので、メモとして残しておきます。

もともとやっていた方法

addEventListenerについてはこちら

//keyが押されたなら
document.addEventListener('keydown', (event) => {
    if(event.key == "ArrowUp"){
        //上キーが押された時の処理
    }
    if(event.key == "ArrowDown"){
        //下キーが押された時の処理
    }
    if(event.key == "ArrowLeft"){
        //左キーが押された時の処理
    }
    if(event.key == "ArrowRight"){
        //右キーが押された時の処理
    }
    
});

このままだと、押されたキーの取得は同時には1種類しかできません。

改良後

キーが押されているか変数で保持しておけばできます。

let up_push = false;
let down_push = false;
let left_push = false;
let right_push = false;

//keyが押されたなら
document.addEventListener('keydown', (event) => {
    if(event.key == "ArrowUp"){
        up_push = true;
    }
    if(event.key == "ArrowDown"){
        down_push = true;
    }
    if(event.key == "ArrowLeft"){
        left_push = true;
    }
    if(event.key == "ArrowRight"){
        right_push = true;
    }
    
});


//keyが離されたなら
document.addEventListener('keyup', (event) => {
    if(event.key == "ArrowUp"){
        up_push = false;
    }
    if(event.key == "ArrowDown"){
        down_push = false;
    }
    if(event.key == "ArrowLeft"){
        left_push = false;
    }
    if(event.key == "ArrowRight"){
        right_push = false;
    }
    
});

function move(){
    if(up_push){
        //上キーが押された時の処理
    }
    if(down_push){
        //下キーが押された時の処理
    }
    if(left_push){
        //左キーが押された時の処理
    }
    if(right_push){
        //右キーが押された時の処理
    }
}

お役に立てれば幸いです。
もっと簡単な方法があれば是非教えてください。