キー入力

私が思う、ゲームをゲーム足らしめる条件は遊んでいる人が入力したらそれにゲームが反応すること！

そういうわけで、今回はキーボードで入力した時にゲームのキャラクタが色々反応するようにしてみましょう！

何はともあれ、とりあえず← を押したり → を押した時にキャラクタを移動させてみたくありませんか？

じゃあそれを作りましょう！

そもそもプログラムではボタンを押した・押してないをどうやって知るの？

それは、押されたときに教えてね！ プログラムを書きます。

簡単でしょ？

どうやって教えてもらうの？

if (document.addEventListener){

// キーボードを押したときに実行されるイベントdocument.addEventListener("keydown" , KeyDownListener);

}

これー！！

Ctrl + F で検索用の箱を出して、KeyDownListenerって入力して Enter 押してみましょう！

keydown 以外に何があるの？

keydownkeypresskeyup

の３種類！

押した瞬間 down ！押してる間 press ！離した瞬間 up ！

ゲームの世界ではこの３つを頼りに頑張ってみんなが押したボタンを見分けてます！

でも２つあればなんとかなるんですけどね…

押されたかどうかはわかった。だが、何が押されたかが問題だ。

ファイル名、 KeyEventListener

function KeyDownListener(e) {// ------------------------------------------------------------// 入力情報を取得// ------------------------------------------------------------// キーコードvar key_code = e.keyCode;// Shift キーの押下状態var shift_key = e.shiftKey;// Ctrl キーの押下状態var ctrl_key = e.ctrlKey;// Alt キーの押下状態var alt_key = e.altKey;

}

特に、

function KeyEventListener(e) {// ------------------------------------------------------------// 入力情報を取得// ------------------------------------------------------------// キーコードvar key_code = e.keyCode;

}

これが大事だったりします！

function KeyDownListener(e) {// 試しにここで F9 を押してマークを付けてみましょう// そんで ↑ キーを押してみると？

}

function KeyDownListener(e) {// キーコードvar key_code = e.keyCode;

}

keyCode にカーソルを当てるとなんて表示されてます？

そう、その数字こそが、どのキーが押されたかを判断する番号なのです！

つまり、↑ が押された時のためのプログラムを書くには！？

ちなみに、どのキーが押されたら何が入っているかはこちらをどぞ一覧がのっています！入力するのが面倒だったらググっちゃってください。

http://www.programming-magic.com/file/20080205232140/keycode_table.html

ここでの表の通り、使っているブラウザによってボチボチ違うんですよ！

ブラウザ依存に関する話になりますが、

例えば表示物が表示されなくなったりレイアウトが崩れたりということがあります。

ちなみに今回のゲームの作り方なら表示物に関しては影響を受けないはずです。それこそが HTML5 の素晴らしいところなのです。

というわけで、今回の入力の受付のおかげでキャラクタの移動が出来るようになったので、前回の内容をと合わせて、移動中のアニメーションを付けてみてください！

今日の講義はこれにて終了です！お疲れ様でした。