狠狠撸

狠狠撸Share a Scribd company logo
キー入力
私が思う、ゲームをゲーム足らしめる条件は
遊んでいる人が入力したら
それにゲームが反応すること!
そういうわけで、今回はキーボードで入力した時に
ゲームのキャラクタが色々反応するようにしてみましょう!
何はともあれ、とりあえず
← を押したり → を押した時に
キャラクタを移動させてみたくありませんか?
じゃあそれを作りましょう!
そもそも
プログラムではボタンを押した?押してないをどうやって知るの?
それは、押されたときに教えてね! プログラムを書きます。
簡単でしょ?
どうやって教えてもらうの?
if (document.addEventListener){
// キーボードを押したときに実行されるイベント
document.addEventListener("keydown" , KeyDownListener);
}
これー!!
Ctrl + F で検索用の箱を出して、
KeyDownListener
って入力して Enter 押してみましょ
う!
keydown 以外に何があるの?
keydown
keypress
keyup
の3種類!
押した瞬間 down !
押してる間 press !
離した瞬間 up !
ゲームの世界ではこの3つを頼りに
頑張ってみんなが押したボタンを見分けてます!
…でも2つあればなんとかなるんですけどね
押されたかどうかはわかった。
だが、何が押されたかが問題だ。
ファイル名、 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 の素晴らしいところなのです。
というわけで、今回の入力の受付のおかげで
キャラクタの移動が出来るようになったので、
前回の内容をと合わせて、
移動中のアニメーションを付けてみてください!
今日の講義はこれにて終了です!
お疲れ様でした。
Ad

Recommended

Element gamerule
Element gamerule
ssuser817966
?
はじめてのスクリプト?ネコから逃げろ!
はじめてのスクリプト?ネコから逃げろ!
fujit
?
20150512 進捗LT
20150512 進捗LT
mohemohe
?
CG2013 07
CG2013 07
shiozawa_h
?
CG2013 04
CG2013 04
shiozawa_h
?
2回目アニメ
2回目アニメ
Takuya Shishido
?
CG2013 11
CG2013 11
shiozawa_h
?
CG2013 01
CG2013 01
shiozawa_h
?
Game
Game
Takuya Shishido
?
1回目勉强会の説明
1回目勉强会の説明
Takuya Shishido
?
CG2013 12
CG2013 12
shiozawa_h
?
CG2013 13
CG2013 13
shiozawa_h
?
CG2013 06
CG2013 06
shiozawa_h
?
CG2013 14
CG2013 14
shiozawa_h
?
CG2013 03
CG2013 03
shiozawa_h
?
CG2013 09
CG2013 09
shiozawa_h
?
CG2013 05
CG2013 05
shiozawa_h
?
CG2013 02
CG2013 02
shiozawa_h
?
インストールしてね!
インストールしてね!
Takuya Shishido
?
CG2013 10
CG2013 10
shiozawa_h
?
CG2013 08
CG2013 08
shiozawa_h
?
SFC Design theory 2012 6/20
SFC Design theory 2012 6/20
Mitsuru Muramatsu
?
曲面レイトレ入门
曲面レイトレ入门
Toru Matsuoka
?
会社を作ってみた
会社を作ってみた
Takuya Shishido
?
Unity install
Unity install
Takuya Shishido
?

More Related Content

Viewers also liked (20)

CG2013 11
CG2013 11
shiozawa_h
?
CG2013 01
CG2013 01
shiozawa_h
?
Game
Game
Takuya Shishido
?
1回目勉强会の説明
1回目勉强会の説明
Takuya Shishido
?
CG2013 12
CG2013 12
shiozawa_h
?
CG2013 13
CG2013 13
shiozawa_h
?
CG2013 06
CG2013 06
shiozawa_h
?
CG2013 14
CG2013 14
shiozawa_h
?
CG2013 03
CG2013 03
shiozawa_h
?
CG2013 09
CG2013 09
shiozawa_h
?
CG2013 05
CG2013 05
shiozawa_h
?
CG2013 02
CG2013 02
shiozawa_h
?
インストールしてね!
インストールしてね!
Takuya Shishido
?
CG2013 10
CG2013 10
shiozawa_h
?
CG2013 08
CG2013 08
shiozawa_h
?
SFC Design theory 2012 6/20
SFC Design theory 2012 6/20
Mitsuru Muramatsu
?
曲面レイトレ入门
曲面レイトレ入门
Toru Matsuoka
?

More from Takuya Shishido (8)

会社を作ってみた
会社を作ってみた
Takuya Shishido
?
Unity install
Unity install
Takuya Shishido
?
9回目プログラム全体の説明とタイトル画面
9回目プログラム全体の説明とタイトル画面
Takuya Shishido
?
8回目ファイル読込み(セーブデータ)
8回目ファイル読込み(セーブデータ)
Takuya Shishido
?
7回目テキスト?ステージ管理
7回目テキスト?ステージ管理
Takuya Shishido
?
9回目プログラム全体の説明とタイトル画面
9回目プログラム全体の説明とタイトル画面
Takuya Shishido
?
8回目ファイル読込み(セーブデータ)
8回目ファイル読込み(セーブデータ)
Takuya Shishido
?
7回目テキスト?ステージ管理
7回目テキスト?ステージ管理
Takuya Shishido
?
Ad

3回目キー入力