半角英数字で数文字まで
(102匹まで)
DHTML応用のトップページです。

【JavaScript/DHTMLのポイント】

天道虫


  1. ロードが終わるとInit()関数がレイヤを設定したあと、天道虫を表示する位置OffSetX,OffSetYを計算し、次の表示文字列を決めるNextSelect()関数を呼びます。
  2. NextSelect()関数は表示する文字列をstr[]配列から選びStringに設定します。Modeが0の時は入力された文字列をStringに設定します。
    それ以外の時はModeで示されるstr配列要素から取り出し、Modeは1増加します。
    その後天道虫の次回位置nextPosiX,nextPosiYを現在位置cupPosiX,curPosiYにコピーします。表示すべき文字列Stringから1文字ずつ切り出し、Moji[]配列に登録されているかを探し、 登録されているならその文字を表す天道虫の数の分の位置をnextPosiX,nextPosiYに設定していきます。
    Moji[]配列には文字、ドット数、文字幅、各ドットのXY位置が順に入っています。その後タイマーを使ってMoveToNext()関数を呼びます。
  3. MoveToNext()関数は呼ばれるたびにStepを増加させてcupPosiX,curPosiYからnextPosiX,nextPosiYに天道虫を移動していきます。StepがStepMaxになるまでタイマーで再びMoveToNext()関数を呼びます。
    StepがStepMaxになるとタイマーでDisplay()関数を呼び、今度は同じ場所で揺らいだ表示をします。
  4. Display()関数は、同じ場所で揺らいだ表示をするため、乱数を使って表示位置を少し動かした後Stepを1増加して、タイマーを使って再びDisplay()関数を呼びますが Stepが2*StepMaxになると次の表示文字列を選択するためNextSelect()関数がタイマーで呼ばれます。
  5. ボタンが押されたときはDisplayText()が呼ばれModeが0に設定され、次にNextSelect()関数が呼ばれたときに次に表示する文字列としてテキストボックスの文字列がStringに設定され表示されます。

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

鴈野さんちのHomePage TOPへ

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