はじめに
ブラウザ上で動くゲームを作りたい！という時に必要になる、複数キー入力受け付けコードサンプルです。備忘録として載せておきます。
##コード
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を使ったほうが良いとのご指摘を受け、該当部分を修正しました、ありがとうございます！