ようこそ 我が家の
Home Page へ
  
DHTML応用のトップページです。ペンギンの動く向きを変えられます。

【JavaScript/DHTMLのポイント】

Valid HTML 4.01!

足跡


  1. ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、5方向を向いたペンギン画像が貼り付けられたレイヤ名を取得し、初期位置(中央)へ移動します。 また21個分の足跡レイヤ名を設定し、各レイヤに貼り付けてあるイメージエレメント名を取得しておきます。
    その後1〜3を乱数を使って選択し引数としてSetDir()関数を呼び、移動方向を決めます。タイマを使ってWalk()関数を呼びペンギンを移動させます。
  2. SetDir()関数では指定された方向を向いたペンギンが貼り付けられたレイヤのみ表示し、他を向いたペンギンのレイヤを非表示にします。
  3. Walk()関数はまずウィンドウの大きさが変わっているときは画面をリロードします。変わっていなければそれぞれの向きに応じてX,Yの値をStepだけ増減させます。
    このとき画面の端まで達したときは向きを逆向きにSetDir()関数を使って変更します。
    その後 足跡のカウンタHcountが1のときは左足の、5の時は右足を表示します。HcountはWalk()関数が呼ばれる毎に1増加します。20を越えたときは0に戻します。
  4. 足跡の表示は今回表示の足跡レイヤLH[Pn]に進行方向の足跡画像を貼り付けた後、左右の足跡に応じてX,Y位置をずらしながら表示位置へ移動します。
    このレイヤを表示後、次に使用予定の足跡レイヤを非表示にします。
  5. 手動ボタンの「上」ボタンを押すとBup()関数が呼ばれ、乱数を使って-30〜-60の値をAutoに設定したあと、上向きにSetDir()関数を使って設定し、Walk()関数をタイマを使って呼びます。
    Walk()関数はAutoが負の時はAutoに1を加え同じ方向に進み続け0になると正面を向いたままになります。
    自動的に動くときはAutoは1になっており、このときは乱数を使って0.07の確立で動く向きを変更します。
    下、左、右、止ボタンも同様です。

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