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は、おされたキーの値を返します。