JavaScript | 方向キーとWASDキーの入力イベントを実装する方法
JavaScriptで方向キーとWASDキーの入力イベントを同時に実装する方法を紹介しています。
方向キーとWASDキーの入力イベント
方向キーとWASDキーの入力イベントを実装する動作サンプルとJavaScriptコードになります。
動作サンプルでは方向キーまたはWASDキーを押した際、その方向を描画します。
See the Pen JavaScript Specify the form to focus on by yochans (@yochans) on CodePen.
HTMLは確認用に結果を描画する為のpタグを作成しているのみです。
特に必要ありません。
<p id="output"></p>キー入力のイベントをaddEventListener()にkeydownを指定して実装しています。
変数「e」に押されたキーの情報が代入されますので、「code」または「keyCode」にてどのキーが押されているか判別していきます。
サンプルではキー入力情報から「code」を利用しています。
document.addEventListener('keydown', function (e) {
let output = ``;
if (e.code == 'KeyW' || e.code == 'ArrowUp') {
output = `Up`;
} else if (e.code == 'KeyS' || e.code == 'ArrowDown') {
output = `Down`;
} else if (e.code == 'KeyA' || e.code == 'ArrowLeft') {
output = `Left`;
} else if (e.code == 'KeyD' || e.code == 'ArrowRight') {
output = `Right`;
}
console.log(output);
document.querySelector(`#output`).textContent = output;
})方向キーとWASDキーの入力イベントの関数をアロー関数にしたバージョンです。
document.addEventListener(`keydown`, e => {
let output = ``;
if (e.code == `KeyW` || e.code == `ArrowUp`) {
output = `Up`;
} else if (e.code == `KeyS` || e.code == `ArrowDown`) {
output = `Down`;
} else if (e.code == `KeyA` || e.code == `ArrowLeft`) {
output = `Left`;
} else if (e.code == `KeyD` || e.code == `ArrowRight`) {
output = `Right`;
}
console.log(output);
document.querySelector(`#output`).textContent = output;
});