キーボード入力に明確な契約を与える

意味とレイアウトでキーを選択

操作をキーボード配列で入力される文字に対応させる場合はKeyboardEvent.keyを使い、物理的なキーの位置に対応させる場合はKeyboardEvent.codeを使います。この違いはキーボード配列によって結果が変わります。一貫した割り当てを用意して説明に示し、誰もがWASDを使うと決めつけないようにします。

テキストフィールドや編集可能なコントロールにフォーカスがある間は、キー入力を横取りしないでください。ページのスクロールなどブラウザーの既定動作を止めるのは、ゲーム面がそのキーを実際に処理する場合だけにします。そうすれば、プレイヤーがゲーム領域に入る前に通常の文字入力を妨げたり、ブラウザーの操作を邪魔したりしません。

押下状態とキーの解放を管理する

連続移動では、keydownでキーの押下状態を有効にし、keyupで解除します。キーを押し続けるとブラウザーはkeydownを繰り返し送ることがあります。そのため、ジャンプのような一度だけの動作は、繰り返しが意図された仕様でない限り、反復を無視します。ゲームがフォーカスを失ったときやウィンドウが非アクティブになったときは、押下中のキーを解除します。フォーカスが別の場所に移るとkeyupがゲームに届かない場合があるためです。

2つのキーの同時入力、長押し、短いタップ、フォーカスを失ってから戻ったときの動作をテストします。一度だけ行う操作では、繰り返しが仕様でない限り、keydownの反復を無視します。MDNではKeyboardEvent.key、KeyboardEvent.code、イベントの種類が説明されています。操作の割り当てに合うプロパティを選びましょう。

⁨ブラウザゲームのキーボードコントロール⁩についての質問