| 【JavaScript/DHTMLのポイント】 |
|
クリスマス
- ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、レイヤ名を設定し、
リボン飾り、リース、樹木、家、サンタクロースの非表示の画像を貼り付けたレイヤを初期位置に移動します。
- リボンのレイヤは左右の上端にそれぞれの画像幅を考慮して移動後、それぞれ2種類あるパターンを乱数で選択し表示します。
リースのレイヤはそれぞれの画像幅を考慮して中央に移動後、3種類あるパターンを乱数で選択し表示します。
木のレイヤは4種類の表示位置を乱数を使って決めた後、Visible()関数を使って表示します。
家のレイヤは2種類の表示位置を乱数を使って重なら無いように決めた後、Visible()関数を使って表示します。
雪だるまのレイヤも同様に2種類の表示位置を乱数を使って決め、それぞれをVisible()関数を使って表示します。
更に20ある雪の画像を貼り付けたレイヤを乱数を使って表示位置と揺らせて落とすためのsin関数のパラメータを決めます。画像表示部分と同じ領域を画面の上にも取り、
そこにも雪を配置しています。この領域の雪は表示領域まで落ちてきて始めて見えるようになります。
- その後タイマを使って100ms後にSanta()関数を呼び出し、そりに乗ったサンタクロースと雪の移動表示処理を開始します。
- Santa()関数はWindowの大きさが変更されているかをまず調べ、変わっているときは画面をReloadし、始めからやり直します。
画面サイズが変わっていないときは４つあるそりに乗ったサンタクロースのレイヤが表示中かどうかを調べ、非表示の時は乱数を使って0.01の確率で表示するようにします。
このときには表示する画面の高さ位置と上下に揺らすためのSin()関数のパラメータを乱数を使って設定後Visible()関数で表示させます。
表示中のサンタクロースのレイヤは現在位置が画面の外に出ていれば非表示とし、画面内にあるときはそりの進行方向(DS[i])にStepSだけ進め、高さ方向には揺らぎを加えた表示位置に移動します。
- その後20の雪のレイヤについて画面の下端に達していれば画面上に隠れた領域に乱数で場所を設定します。
画面内にある雪はStepYだけ下方に、揺らぎを加えた横方向の位置に移動します。
Santa()関数は最後に再びタイマを使って自分を呼びます。
- 「再配置」ボタンを押すとreloadし、始めからやり直します。
- なお家の絵の煙とそりを引くトナカイはアニメーションGifで勝手に動いています。
Java Script事例集トップページへ
鴈野さんちのHomePage TOPへ
ご感想などは鴈野 敏生 まで。
