【JavaScript/DHTMLのポイント】

玉突き振り子

ボールの絵五枚はDivでレイヤB1,B2,B3,B4,B5を作り各色のボールを貼りつけてある。ボールを釣り下げているロープは同じくDivでレイヤを作っているが、左に振れる絵を貼りつけてあるCL1,CL2,CL3,CL4,CL5と、右に振れる絵を貼りつけてあるCR1,CR2,CR3,CR4,CR5がある。
ロード直後にはInit()関数でレイヤ名を得、各絵を初期位置に配置する。
その後Start()関数が呼ばれボールを表示し、右に振れるロープは非表示、左に振れるロープを表示する。
次にフルスイングを10のタイムスロット(100ms)で表示するのを標準として、指定された高さから落とした時何タイムスロットで落とせば良いかを求める。
更に各タイムスロット毎のｘ、ｙ座標を求めると同時に、その時のロープの角度を求め最も近い角度のロープ番号を探す。（ロープは10°ずつ傾きを変化した絵を切り替えて表示するため。ロープの動きがこのためぎこちないがご勘弁。)
最初は指定の個数の左側ボールを左側指定の高さにセットし、ロープも指定の絵に切りかえる。その後100ms毎にインターバルタイマが働き、GoDownL()関数がボールを移動し、ロープの絵を切り替えていく。
ボールが最下端までくると左に振れるロープのレイヤを非表示にし、右に振れるロープの絵を表示にして100msタイムアウト後にGoUpR()関数を起動する。
今度は右側の指定個数のボールを予め計算された位置に100ms毎にGoUpR()関数が振り上げると同時にロープの絵も最適なものに切り替える。
ボールが指定の最高点に達すると100ms後にGoDownR()関数を起動する。
GoDownR()関数は100ms毎に指定個数のボールを降り下げると同時にロープの絵も切り替えていく。
ボールが最下端まで来ると右に振れるロープのレイヤを非表示にし、左に振れるロープの絵を表示にして100msタイムアウト後にGoUpL()関数を起動する。
左側の指定個数のボールを予め計算された位置に100ms毎にGoUpL()関数が振り上げると同時にロープの絵も最適なものに切り替える。
ボールが指定の最高点に達すると100ms後にGoDownL()関数を起動し、繰り返す。
ボールの個数はボタンを押すことにより変えられ、ボタンにリンクしたBnStart()関数がボールの個数指定を変更した後はじめから再実行する。
左のスクロールバーは始めにボールを落し始める位置を変更するもので、スクロールバーの絵にエリアマップを指定してある。
上向き三角位置をクリックするとHup()関数がボール位置指定が120より低い時は10高くして最実行する。
下向き三角位置をクリックするとHdown()関数がボール位置指定が20より大きい時は10低くして最実行する。
何れの時も現在位置を表わす三角マークのレイヤmarkを指定の高さにMoveTo()関数で動かしている。

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

鴈野さんちのHomePage TOPへ

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