技術資料らしきものJavaScript−JavaScriptでゲームっぽいものを作ろう!その3

アドベンチャーゲームなわけだから、メッセージを表示させたいよね。

しかも、一気にパッと全部のメッセージが表示されたら、何か味気無いので、流れるように表示させたいですよね。


今回のポイント1

メッセージを1文字ずつ表示させるのに、タイマーを用います。

message_timer = setInterval("message_disp()", message_speed);

これで、message_speed の時間が経過したら、message_disp() が実行されます。 しかも延々と。

タイマーの解除は、、、

clearInterval(message_timer);

です。
今回は、テキストの表示の区切り及び完了時にタイマーを解除しています。

今回のポイント2

メッセージの中に「|」や「!」を置いて、「改行」や「クリック待ち」として扱うようにしています。(この辺は好みの問題だと思いますが、とりあえず今回はこのような形式で。)

「|」を改行「<br>」に変換するのは、単純に表示時に文字置換を行っています。

str = str.replace(/\|/g,'<br>');

正規表現に触れたことがある人なら上のものを見てなんとなく分かるのではないかと思います。
replace( マッチする正規表現, 置換文字列 );

次に、「!」が出てきた時にクリック待ちにする処理ですが、特定文字の抜き出しには substr を。

if ( message_str.substr(message_count,1) == '!' )

substr( 開始文字数(0からスタート), 抜き出す文字数 );
ちなみに、substring と似ていますが、こっちは第2引数が文字数ではなく”何文字目までを抜き出すか”です。用途によって使い分けましょう。

今回のポイント3

1文字ずつ表示させるメッセージというのは、時に最後まで待つのがダルイものです。
なので、クリックすると、次のブレイクポイントまですっ飛ばすようにした方が親切ですよね。

今回のブレイクポイントは「!」なので、次の「!」がどこにあるのかが取得できればOK。

var pos = message_str.indexOf( '!', message_start_point );

indexOf( 検索文字列, 開始位置(0からスタート) );
ちなみにマッチしなかった場合は「-1」を返すようです。

なんやかんやで現時点でのサンプル

犯人はヤス(2007.07.06)

しょーもないメインイメージもついでに表示させ、オープニングの大事な主人公の設定を絶妙な表現で説明出来たところで、本日は終了。(何を言っているんだ俺は?)
まあすぐに気が変わるわたくしですので、次の時はメッセージ変わってるような気がしますが。

 

JavaScriptでゲームっぽいものを作ろう!その4へ!

JavaScript関連リンク

サイト

Binbo-Special > 技術情報らしきもの > JavaScript
当サイトです。
OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい!です。

書籍

Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発
読み途中ですが、なかなか面白いです。
jQueryで作る Ajaxアプリケーション
jQueryに興味を持ったら読んでみるのも吉。

2007/07/06

▲一番上へ