【JavaScript/DHTMLのポイント】

落ち葉

落ち葉は20枚用意されており、それぞれが独自のレイヤDIV L1～L20にイメージで貼りつけられている。
落ち葉のイメージは５種あり、L1.gif～L5.gif がDIV L1 からL20に順番に貼りつけられている。
この5種のイメージはそれぞれがアニメーションgifになっており、ひらひら落ちるよう動く。
実際の落ち葉はLoadが完了した時にStart()関数が呼ばれて始まる。この関数では乱数を使い未使用の落ち葉を探し、未使用の落ち葉があると落下開始位置(横方向位置)を決めた後、Enableを1にし非表示を解除して表示する。
次の落ち葉落下時刻を乱数を使って決める。
「落ち葉増加」のボタンを押した時はこの時刻を待たずにStart()関数を呼び、次ぎに落下させる落ち葉を探す。
100ms毎にインターバルタイマが働き、落ち葉の位置を移動(落下)させる。
縦方向は5ピクセル移動するが、横方向はサインカーブを描くように移動する。落ち葉ごとにサインカーブの位相をずらしているので各落ち葉が独立に揺らいで落ちてくる。
「風」のボタンを押すと横方向位置に風の量(Wind：時間の関数)を足して落ち葉の位置を移動する。18時刻ユニット(1.8秒分)経過すると風は吹き止む。
風により左に飛び出た落ち葉は右側に、右側に飛び出た落ち葉は左側に移動して表示する。
画面の高さ分落下した落ち葉のレイヤを非表示にすると同時にEnable値を0にして、次ぎの落下に備える。

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

鴈野さんちのHomePage TOPへ

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