【JavaScript/DHTMLのポイント】

パイプ

パイプは赤、緑、青、黄の4色あり、それぞれの色について横パイプ、曲り角パイプ、縦パイプ、曲がり角パイプの繰り返しで20のパイプをレイヤ(DIV)に割り付けます。
これらのレイヤは初期は見えないようにstyleでhide(hidden)の指定をします。
bodyのloadが終わったところでIniSet関数を起動し、表示するパイプの最大長さを決めるためウィンドウの幅、高さを求めます。その後タイトルのレイヤ、本文のレイヤを画面幅中央に設定します。その後Start()関数を起動します。
Start()関数はすべてのパイプを非表示にした後、4色の表示順を乱数を使って決めます。開始パイプ番号を1に設定後タイマを起動し、SetUp()関数を起動します。
SetUp()関数は各色の表示の最初に起動され、19本のパイプ(20番目は表示しない)の開始位置、終了位置を決め、これらから表示するパイプの長さ、向き、曲り角のパイプのgifパターンの選択を行い、これらのパイプを初期位置に移動します。その後タイマを起動しタイムアウトでShowP()関数を起動します。
ShowP()関数はパイプ番号を見て、曲り角パイプの時は曲り角パイプを表示して次ぎのパイプ番号にします。横向きあるいは縦向きパイプの時は現在長さが0の時はまずパイプを表示し、現在長さにStepを加え、この長さにパイプをクリップ表示します。現在長さが規定の長さに達した時は、次回の長さを0にし、パイプ番号を次ぎの番号にします。
パイプ番号が最後(20)の時はパイプ番号を1に戻し、表示色を次ぎの色に設定し、タイムアウト後にSetUp()関数を呼びます。
表示色も最後の色なら最初のStart()関数を呼びます。
そのたの時はタイムアウト後再度ShowP()関数を呼び、パイプの表示を続けます。

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