JavaScriptでの複数キー入力受付 #JavaScript

はじめに

ブラウザ上で動くゲームを作りたい！という時に必要になる、複数キー入力受け付けコードサンプルです。備忘録として載せておきます。

コード

controllerを連想配列として用意しているのはキーの同時押し等に柔軟に対応するためです。

controller.js

const controller = {};

const showController = () => {
    const elem = document.getElementById("debug-controller");
    let controllerStr = "";
    Object.keys(controller).forEach(key => {
        controllerStr += `${key}:${controller[key]} \n`;
    });
    elem.innerText = controllerStr
}

document.addEventListener('keydown', (event) => {
    console.log(`keydown:${event.code}`);
    controller[event.code] = true;
    showController();
});

document.addEventListener('keyup', (event) => {
    console.log(`keyup:${event.code}`);
    controller[event.code] = false;
    showController();
});

controller.html

<!DOCTYPE html>
<html>

<head>
    <title>アクションゲーム-controller-</title>
    <script src="/static/js/controller.js"></script>
</head>

<body>
    <h1>キーの状態が表示されます</h1>
    <div id="debug-controller"></div>
</body>

</html>

実際に動かしたサンプルサイトはこちら

後はsetInterval等でフレームごとにcontrollerを参照すればゲームを作ることができると思います。

解説

document.addEventListener()でキー入力の受け付けを行っています。("keydown"がキーが押された時、"keyup"がキーから指が離れたときになります)

追記(2021/04/15)

コメントでevent.keyよりもevent.codeを使ったほうが良いとのご指摘を受け、該当部分を修正しました、ありがとうございます！