【JavaScript/DHTMLのポイント】

フライング果物

ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、3種の果物の10種の大きさのイメージを読み込み、果物の湧き出し位置を画面中央に設定するなどの初期設定をします。
果物を表示するために20のレイヤ(DIV)を準備し、これらのレイヤは初期状態では非表示にしておきます。それぞれのレイヤと関連付けて、表示中であるか(VF),表示しているイメージ(IF),最終到達x座標(XF),最終到達ｙ座標(YF)の配列変数を用意します。
初期設定が終わると100msごとにインターバルタイマを起動し、Display()関数で果物のレイヤで表示中のものをVFが0より大きいかで判断し、10ステップまで表示した(VF=10)ものは非表示にし、 VFとIFも0にします。
10ステップまで行っていないものはステップ数(VF)を1増加し、イメージ番号(IF）も1増加し、一回り大きいイメージをこのレイヤのイメージソースとして与えます。
同時にこのレイヤの位置を初期位置(XO,YO)と最終到達位置(XF,YF) から求めそこへ移動します。
次に乱数を発生させ、rateより大きければNewF()関数で新たな果物を発生させます。NewF()関数では未使用のレイヤを探し、乱数を使って３種の果物のどれを使うか(イメージ1か11か21か)を選択しレイヤに割り付け, 初期位置(XO,YO)にレイヤを移動し、表示させます。
さらに最終到達座標を求めるため乱数で4辺のどの辺にするか、その辺のどの位置にするかを決めXF,YFに設定します。
画面をクリックしたときはイベントを発生させ、初期位置XO,YOをクリックした座標に置き換え最初から表示をしなおします。
「果物を増やす」ボタンを押したときはrateの値を小さくし、新たな果物を発生しやすくし、「果物を減らす」ボタンではrateの値を大きくし新たな果物の発生確率を下げています。

Java Script事例集トップページへ

鴈野さんちのHomePage TOPへ

ご感想などは鴈野敏生まで。