JavaScript»ゲーム制作»keydownイベントでキー入力 おされたキーを表示する
ファイル名: js-game/quest_00762.html
下のプログラムをうつして、おされたキーの名前を
ソースコード
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
addEventListener("keydown", e => {
context.fillStyle = "#666";
context.font = "48px monospace";
context.textAlign = "center";
context.clearRect(0, 0, 320, 320);
context.fillText(e.key, 160, 160);
});
解説
addEventListenerは、loadやclickイベントのほかにもいろいろなイベントを設定できます。keydownイベントは、どれかのキーがおされたときに関数を実行します。
この関数は上から順に、文字の色、文字の大きさとフォント、文字位置の基準をどこにするかを決めたあと、キャンバスに表示されていたものを消して、まんなかにおされたキーの名前を表示します。
9行目のkeyは、おされたキーの値を返します。