1. キー入力

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

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

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

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

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

7. それは、押されたときに教えてね！ プログラムを書きます。
簡単でしょ？

8. どうやって教えてもらうの？
if (document.addEventListener){
// キーボードを押したときに実行されるイベント
document.addEventListener("keydown" , KeyDownListener);
}
これー！！

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

10. keydown 以外に何があるの？
keydown
keypress
keyup
の３種類！
押した瞬間 down ！
押してる間 press ！
離した瞬間 up ！

11. ゲームの世界ではこの３つを頼りに
頑張ってみんなが押したボタンを見分けてます！
…でも２つあればなんとかなるんですけどね

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

13. ファイル名、 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;
}

14. 特に、
function KeyEventListener(e) {
// ------------------------------------------------------------
// 入力情報を取得
// ------------------------------------------------------------
// キーコード
var key_code = e.keyCode;
}
これが大事だったりします！

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

16. function KeyDownListener(e) {
// キーコード
var key_code = e.keyCode;
}
keyCode にカーソルを当てるとなんて表示されてます？

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

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

19. ちなみに、どのキーが押されたら何が入っているかはこちらをどぞ
一覧がのっています！
入力するのが面倒だったらググっちゃってください。
http://www.programming-magic.com/file/20080205232140/keycode_table.html

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

21. ブラウザ依存に関する話になりますが、
例えば表示物が表示されなくなったり
レイアウトが崩れたりということがあります。
ちなみに今回のゲームの作り方なら
表示物に関しては影響を受けないはずです。
それこそが HTML5 の素晴らしいところなのです。

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

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