トップ 差分 一覧 Farm ソース 検索 ヘルプ PDF RSS ログイン

プログラミング特別講座2(C219-6)2006/02/20)

プログラミング特別講座2(C219−6) 第3回 2006/02/20

JavaScriptDOMを使ってモグラ叩きゲームを作る。

  • 配布したプログラムの空欄を埋め、モグラ叩きゲームとして動作させる。
  • 完成したら、ミスしたら減点する、時間制限を設けるなどの改良を加えること。

 実装例

 ステージ

モグラ叩きゲームのステージは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

[プログラミング特別講座2(C219-6)]