風船

ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズを求め、風船のレイヤ名を設定し、マウスが移動したときに発生するイベントを設定します。
風船のレイヤは風船ごとに膨らんだ風船の画(Bi)、割れ始めの裂け目の絵(X)、もう少し割れた裂け目の絵(Y)、消滅直前の画(Zi)を貼り付け4枚一組で風船の色　６色分用意してあります。
IniSet()関数は最後にタイマをセットし100ms後にBaloon()関数を起動します。
Baloon()関数は呼ばれるとまず画面のサイズが変更されていないか確認します。変更されているとReloadします。
その後乱数を発生させ0.05より小さい時には新たに風船を表示します。これはやはり乱数を用いて現在未表示（Bs=0)の風船を探し、未表示の風船を見つけると状態を表示(Bs=1)にし、最初の初期位置をBx,Byにセットし、同時に揺らぎを発生させるBpの値もセットし、 MoveTo()関数で初期位置に移動後、Visible()関数でこの風船が見えるようにします。
その後６種の風船につき順番に現在の状態に応じた処理をしていきます。Bsが1(表示）なら次の位置を計算し移動します。 Bsが2なら割れ始めの裂け目の絵(X)のレイヤを風船と同じ位置に移動して見えるようにし、Bsを3にします。 Bsが3ならもう少し割れた裂け目の絵(Y)のレイヤを風船と同じ位置に移動して見えるようにし、Bsを4にします。 Bsが4なら消滅直前の画(Zi)のレイヤを風船と同じ位置に移動して見えるようにし、Bsを5にします。他の画は非表示にします。 Bsが5なら消滅直前の画(Zi)のレイヤを非表示にし、Bsを0（未表示)に戻します。
各風船の画にはリンクが貼られ、風船の上でマウスクリックされるとClick()関数が呼ばれます。
Click()関数ではY座標が風船の中心近辺かを調べ、中心近辺の時はその風船のBsを2にセットし、次にBalloon()関数が呼ばれたときに割れる処理に入ります。
一旦割れる処理に入るとBalloon()関数が呼ばれるたびに破壊が進み最後に消滅します。

Java Script事例集トップページへ
鴈野さんちのHomePage TOPへ
ご感想などは鴈野敏生まで。