ようこそ 我が家の
Home Pageへ
ねずみ
牛
トラ
うさぎ
辰
へび
馬
羊
さる
鳥
犬
いのしし
当り
はずれ
当り得点 得点得点
発射数 得点得点
難易度 難易度難易度
矢
矢
矢
矢
矢
弓
弓
弓
弓
弓
弓
弓
弓
弓
弓
ポール
吹流し
吹流し
吹流し
吹流し
吹流し
吹流し
吹流し
Over


難易度

DHTML応用のトップページです。弓矢の向きも変わります。
難易度に応じて風の変化が速くなったり遅くなったりします。

【JavaScript/DHTMLのポイント】

射的


  1. ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、12支の的、当りマーク、弓矢、吹流しなどのレイヤ名を設定し、 各レイヤを初期位置に移動します。
    的のレイヤは100ピクセルごとに乱数で40ピクセルの範囲でずらして配置します。
    また風は二つのサイン関数の複合値で0〜6の値を決めますが、その初期値も乱数で設定します。
  2. IniSet()関数が初期設定を終了すると100msごとにShoot()関数を呼び出します。
    Shoot()関数はまず 当り・はずれのマークを非表示にし、左側に行き過ぎた的も非表示にした後、表示中の的を左にStepH移動します。 その後画面の右端から55ピクセル以内に的が無い(新たに追加しても重ならない)なら乱数を使って表示する的とその位置を決め表示します。
  3. 次にShoot()関数は矢の位置が的の位置まで飛んできていればその位置近傍に表示中の的があるか調べ、あれば当りマークを表示し 当った的を当り済み設定・非表示にし、当り数を1増やし表示します。
    的が無ければ外れマークを表示します。
    その後 弓矢の初期設定をした後 発射数を調べ50になっていればGame Overを表示し、当り数が12になっていればCongratulations表示し、 3秒後にRestart()関数が得点をリセットし再開します。
  4. Shoot()関数は矢が放たれていれば風向きと矢の発射角を考慮にいれて次の矢の位置へ移動させます。
  5. その後 二つのsin()関数値を使って風を計算し、現在の風の強さと向きを吹流しのレイヤを切り替えて表示します。
  6. Shoot()関数は最後に100ms後にまたshoot()関数が呼ばれるようタイマを起動します。
  7. 左、右のボタンは矢が待機中の時は矢の向きをそれぞれ左と右に1ステップ回転し、弓と矢を対応した弓矢のレイヤに切り替え表示します。
  8. 発射ボタンを押すと矢が待機中の時はON変数を1に変更することで矢の発射状態にすると同時に発射数に1を加えて表示します。
  9. 難易度の易しく、難しくボタンを押すとBStepの値を0.02〜0.1の範囲で0.02ずつ減らしたり増やしたりして 風の強さが変わる周期を短くしたり長くしたりしています。
    難易度変更後は難易度をDispL()関数で画像のsrcを1〜5を表す画像に切り替えて表示しています。
  10. 得点と発射数の表示はそれぞれDispT()関数とDispH()関数で1の桁、10の桁の画像のsrcを0〜9を表す画像に切り替えて表示しています。

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

鴈野さんちのHomePage TOPへ

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