JavaScript | 方向キーとWASDキーの入力イベントを実装する方法

JavaScript,JavaScript イベント

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;

});