テキストを一文字ずつゲームっぽく表示する

　さてさて、開発中のGEO BATTLERですが、開発言語がJAVAってことでレンタルサーバじゃ公開できないのでサンプルを表示できないのが残念です。
　大学休み入ったらPHPかRubyで書き直して公開しようかと思います。
　勉強がてらRubyかなぁ・・・。

　さておき。GEO BATTLERで使ってる小手先テクニックを紹介したいと思います。
　ゲームのセリフよろしく、一文字ずつ表示して、特定の位置でクリック待ちしてるあれですね。

　まずは、テキストを表示するdivを作成します。

<div id="message_win">
    <div id="next">
    </div>
    <div id="message_panel">
    </div>
</div>

　こんな感じ。実際に文字を入れるのは#message_panelですね。
　スタイルシートは以下のような感じで。

#message_win {
	border: 1px solid black;
	height: 140px;
	margin: 5px;
	width: auto;
	overflow:hidden;
	position:relative;
}

#message_panel {
	font-size:16px;
	position:relative;
}

#next {
	position:absolute;
	top:115px;
	left:420px;
	z-index:2;
}

　HPビルダーよろしく絶対値やら相対値指定で位置を決めます。
　さて、ようやくJavaScriptの出番ですね。
　まずは適当な変数に表示したい文字をぶち込みます。
　これはAjaxを使って外部のファイルを読み込んでもいいし、PHPなりJSPなりRubyなりでJavaScriptを書き込んじゃってもいいですね。

var text = "これはテストです。";

var text = "<?php echo $text?>";

　今回はAjax関係ないのでAjaxの解説は省きます。
　さて、一文字ずつ表示するJavaScriptですが

var i = 0;
function add_text() {
    if (text.charAt(i)) {
        j$("#message_panel").append(text.charAt(i));
	i++;
	setTimeout(add_text,100);
    }
}

　はい、これだけですね。
　DOM操作だから楽ちんですね。
　アプリケーションだとこうはいかない。
　クリック待ちを作りたかったら

var i = 0;
function add_text() {
    if (text.charAt(i)) {
        if(text.charAt(i) != '/') {
            j$("#message_panel").append(text.charAt(i));
	    i++;
	    setTimeout(add_text,100);
        }
    }
}

function next(e) {
    i++;
    add_text();
}

　というような感じに作ってあげて、#nextにでもイベントをバインドしてやればおっけーですね。

　あ、あとvar i = 0;みたいに何もないところに変数を宣言するのはよくないらしいです。ガベージコレクションの対象にならないとかなんとか。
　次回はそこら辺を調べてみようかと思います。思うだけで全然違うこと描く可能性の方が高いですけど。