【JavaScript/DHTMLのポイント】

跳ねるボール

ロード直後に起動されるInit()関数ではレイヤ名を得ます。
上下左右の壁はそれぞれレイヤに割り当てます。左右の壁は高さが300と最初から固定ですので、スクロールバーで壁が隠れないようにするため両側から20の隙間を持って移動します。
上下の壁はウィンドウの幅により横幅が変わりますのでIniset()関数の中で幅をウィンドウ幅に合わせてクリップ表示します。
ボールが飛び出す高さ、右への速度を示すマークもそれぞれレイヤに割り当て、左と下の壁の上に配置します。
その後最初にボールが飛び出す高さを3に、右への速度を3に指定してStart()関数を呼びます。
Start()関数は高さ、速度対応を示すマークを全て一旦ピンクにし(0ff.gif)、その後指示された高さ、速度に該当するマークを赤く変更(on.gif)します。
その後Start()関数は指示された高さ、速度に応じてｘ、ｙ方向の位置と速度を求めた後、タイマを起動して20ms後にMoveball()関数を呼び出します。
MoveBall()関数は物理法則に基づき、X=X+Vx,　Vy=Vy+G,　Y=Y-Vyで次の位置を求めボールを移動します。このとき左右の壁にぶつかれば横方向に反射し、下の壁にぶつかれば上に反射するようにします。
反射するときは速度が反射係数Ref(=0.98)分減衰するようにします。ボールを表示後再度タイマでMoveBall()関数を起動します。
反射係数による減衰のためボールの弾みはだんだん小さくなり移動距離が0.1より小さくなると次回のタイマを起動しないことでと一連の動作は終わります。
左と下の壁にあるボールの初期設定ボタンを押すと一旦タイマをリセット後、指定の高さ、横速度でStart()関数を起動し、ボールの動きが始まります。

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