プログラミング特別講座2(C219−6) 第3回 2006/02/20
JavaScript、DOMを使ってモグラ叩きゲームを作る。
- 配布したプログラムの空欄を埋め、モグラ叩きゲームとして動作させる。
- 完成したら、ミスしたら減点する、時間制限を設けるなどの改良を加えること。
実装例
- Javaアプレットでの例
- JavaScript版1 授業の解答
- JavaScript版2 ボタンでゲームの開始、制限時間、減点を追加
ステージ
モグラ叩きゲームのステージは3x3の表で、穴の画像を表示する。このページの表示はWikiの仕様上すき間がある。
http://k-sakabe.com/file/img0.gif http://k-sakabe.com/file/img0.gif http://k-sakabe.com/file/img0.gif
http://k-sakabe.com/file/img0.gif http://k-sakabe.com/file/img0.gif http://k-sakabe.com/file/img0.gif
http://k-sakabe.com/file/img0.gif http://k-sakabe.com/file/img0.gif http://k-sakabe.com/file/img0.gif
モグラの表示
- DOMを使う。
- モグラ表示用関数を作り、0から8までの乱数を作り、3x3の表のいずれかに表示させる。
- 直前のモグラの表示を穴の表示に変更する。
- ハンマーのみの表示を穴の表示変更する。
- インターバルタイマーでモグラ表示関数を一定時間間隔で実行する。
当たり判定
- IMG要素のonClik属性に当たり判定用関数を指定する。
- 当たり判定用関数ではクリックした画像の番号と乱数の値を比較する。
- 値が一致すれば、叩かれたモグラの画像を表示する。
- 値が一致しなければ、ハンマーの画像を表示する。
画像
今回のプログラムで使用する画像。自分で用意してもよい。
画像 | ファイル名 | |
---|---|---|
穴 | http://k-sakabe.com/file/img0.gif | img0.gif |
モグラ | http://k-sakabe.com/file/img1.gif | img1.gif |
ハンマー | http://k-sakabe.com/file/img2.gif | img2.gif |
叩かれたモグラ | http://k-sakabe.com/file/img3.gif | img3.gif |