[JS] 時間差実行と配列

[JS] 時間差実行と配列 – メディアデザイン実習J時間差実行
setTimeout( 関数(), 時間);

配列
var array = [item, ‘こんにちは’, 100];

 

動作サンプル
lupinCapt

JSとHTML5による ルパン三世タイトルコール

http://dev.koekatamarin.com/zokei/lupin/

 

このサンプルで使用する音声素材ファイル(ダウンロードして解凍)

http://dev.koekatamarin.com/zokei/sozai_lupin.lzh

 

 

■方針
まず、サウンド再生についてはこちらを参照

このプログラムは、大きく2つの「状態(モード)」があります。
(1)大きな文字が一文字ずつ表示されているモード
(2)すべての文字が一文に繋がって表示されているモード
1のモードが終わったら、2のモードにつながります。

まず、この2つの「状態(モード)」を、分けて考え始めます。

 

(1)大きな文字が一文字ずつ表示されているモード

文字列を一文字ずつに分けて、配列にしておきます。
配列から、文字を一文字ずつ取り出して、順に表示していきます。
配列を順番に処理するときに、for文(繰り返し処理)を使うと、一瞬で処理が全て終わってしまうので、意図した動きにはなりません。
ここでは、for文ではなく、時間差処理を使って、繰り返し処理を行います。

 

(2)すべての文字が一文に繋がって表示されているモード

こちらは何も難しいことはありません。表示のコントロールに show() とhide() を使います。
フラッシュが焚かれたように画面が一瞬白くなるとかっこいいので、白のレイヤーをshow()してからfadeOut()します。

 

 

■実際のコード
HTML5 Boilerplateを使いましょう

 

HTML(index.html)

 

CSS(style.css)

 

JavaScript(script.js)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です