【JavaScript/DHTMLのポイント】

シュプール

ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、Go()関数を使ってスキーヤー/シュプールを8組の中から選択し、滑り始めをセット後タイマーでSpur()関数を呼び出します。
Go()関数では乱数を使って表示されていない（VSP[i]=0のもの）シュプール／スキーヤを探し、５０回でも見つからなければ、表示し終わった（VSP[i]=9999のもの）シュプール／スキーヤを探し、表示をはじめるためVSP[i]に最初のステップ値SStepを設定します。
その後画面上の表示X位置を乱数を使って求め、SMove()関数を使ってシュプールとスキーヤを現在位置まで移動し表示します。
SMove()関数は滑ったY方向位置yyまでだけが見えるようにシュプール画像のまだ滑っていない分をクリップして表示します。
operaブラウザではクリップ表示ができないためまだ滑っていない部分にマスク画像を重ねて隠しています。（シュプールが重なるときは一部かけてしまいます。)
その後シュプールの軌跡をサイン関数で近似して現在のスキーヤの位置を計算しスキーヤのレイヤを移動します。このときに滑り始めの初期位相、振幅などはシュプールごとに決められた値を使います。
さらに滑っているときのスキーヤの形を変えるため近似するサインカーブの位相角から８種の画像を選択しスキーヤのレイヤに貼り付けられた画像を切り替えます。
タイマで100msごとに呼び出されるSpur()関数は画面サイズが変更されていないか調べ、変更されているときには画面をリロードします。
変更されていなければ8種のシュプールの中で表示中のものを探し、１ステップ表示を進めSMove()関数でシュプールとスキーヤを表示します。
画面下まで(y=600まで）滑ったときはVSP[i]の値を9999にセットして滑り終わり状態にし、スキーヤを非表示にします。
その後乱数を使って10秒に１回程度の割合で次のスキーヤを滑り始めさせるためGo()関数を呼び出し、最後に再びタイマを使ってSpur()関すを呼びます。
「すべる」ボタンが押されたときはGo()関数を呼び出し、スキーヤ/シュプールを追加します。
「消す」ボタンが押されたときはRestart()関数を呼び、全てのスキーヤ/シュプールを非表示に、滑っていない状態にリセット後、Go()関数・タイマでSpur()関数呼び出しで再び表示を始めます。

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

鴈野さんちのHomePage TOPへ

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