DHTML応用のタイトル画面です。

---

【JavaScript/DHTMLのポイント】

花火

1. 花火を打ち上げる夜空はTableの背景色を黒に指定して作ってある。ここに打ち上げる花火は8個あり、火柱の部分と火輪の部分それぞれをDivでレイヤを指定してある。
   DIV L1,L3,L5,L7,L9,L11,L13,L15が火柱、DIV L2,L4,L6,L8,L10,L12,L14,L16が火輪である。
2. DIV L1,L3,L5,L7,L9,L11,L13,L15の火柱にはそれぞれ3種の色の火柱の画像v1.gif，v2.gif，v3.gifを表示させている。
   この火柱の画像は始めは下の部分をクリップして夜空に上の部分のみを表示する。時間と共に表示位置を上に移動すると共に下のクリップ量を減らして行く。
3. DIV L2,L4,L6,L8,L10,L12の火輪のレイヤには4つの色(1〜9.gifの白、11〜19.gifの黄、21〜29.gifの赤、31〜39.gifの青）の火輪の絵を切り替えていく。x1.gifからだんだん開きx9.gifで火輪が消滅する。
   DIV2は画像幅を狭くし、縦長の花火にしている。DIV4は画像高さを小さくし、横長の花火にしている。その他の花火は円である。Div6は大きい花輪、Div8は小さい花輪にしてある。
4. 実際の花火はLoadが完了した時にStart()関数が呼ばれて始まる。この関数では乱数を使い未使用の花火を探し、未使用の花火があると打ち上げ位置(横方向位置と高さ)を決めた後、火柱の部分を初期位置に移動した後、非表示を解除して表示する。
   次の打ち上げ時刻を乱数を使って決める。
5. 100ms毎にインターバルタイマが働き、打ち上げた花火を変化させる。
   火柱表示中のものは火柱を上へ移動させる。絵の下の部分のクリップ量も上へ移動した分小さくする。
   始めに決められた高さまで上がっていれば次回に火輪を表示するようEnable値を2にしておく。
   火輪を表示中なら次ぎの火輪のgifに切りかえるが、この時Ccol関数を呼び、乱数を使用して火輪の色を変えることがある。
6. 最後の火輪まで表示した時には火柱、火輪の両方のレイヤを非表示にすると同時にEnable値を0にして、次ぎの打ち上げに備える。

---

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

鴈野さんちのHomePage TOPへ

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