(1)/キャラ非表示/キー入力
「ねこみみか」というシリーズものを開始しました。
- サンプル:ねこみみか(1)/キャラ非表示/キー入力
技術的には、キャラの非表示と、キー入力に対応しました。
- キャラクターの非表示
00000000.xml
<?xml version="1.0" encoding="UTF-8" ?> <pages> <!-- 略 --> <page> <character>off</character> <background>BG02.jpg</background> <text>そして恋歌は家に帰り、俺は誰もいない家に着く。</text> </page> <!-- 略 --> </pages>
<character>タグでoffを指定すると、キャラを消せるようにしました。
これと同時に背景を一枚絵にすると、一枚絵の表示になるとゆー。
キャラクターの表示・非表示は、対象オブジェクトのstyle.visibilityプロパティにvisible/hiddenをセットすることで行えます。
main.js
// キャラ。 if( page.characterUrl != null ) { // イメージ置き換え先の取得。 var characterObj = document.getElementById( characterObjId ); if( page.characterUrl.indexOf( "off" ) == 0 ) { // offの時は非表示に。 characterObj.style.visibility = "hidden"; } else { // イメージを置き換えます。 characterObj.src = page.characterUrl; characterObj.style.visibility = "visible"; } }
つか、JavaScriptって、JavaのString#equals()に当たるメソッドってないんか?(汗)
indexOf()で比較したけど、前方一致だからちょっと不安だな。うーむ。
- キー入力すると進むようにする。
スペースキー、←、→を押すと進むようにしました。
なんかこれがえらいめんどかった。
main.js
/** * キーが押された時に呼び出されるイベントハンドラです。 */ function onKeyPressNext( e ) { var keyCode = null; if(document.all) { // IE6の場合。 keyCode = event.keyCode; } else { // FireFoxの場合。 keyCode = e.which; } // スペースキー、←、→の場合に次へとスキップします。 if( ( keyCode == 32 ) || ( keyCode == 37 ) || ( keyCode == 39 ) ) { next(); return false; } } // イベントハンドラとしてセットします。 document.onkeypress = onKeyPressNext;
まずイベントハンドラのセットは、document.onkeypressプロパティにイベントハンドラとなるメソッドを渡すことで行います。
そうすると、キー入力時に指定したメソッドが呼ばれます。
メソッドでは引数ひとつ持たせます……が、この引数というか、キー入力の内容が格納されている変数がIE6とFireFoxとでことなるので、そのあたりを吸収しています。
よくわからんが、document.allがあるとIE6らしい?
あと、このイベントハンドラでfalseを返せば、ブラウザ上での処理はされません。普通ならスペースキーを押すと下にスクロールするけど、それもされないです。
IMEっぽい処理をしてるプログラムは、こういうふうにしてるんかな。
とりあえずこれでかなりゲームっぽい感じに。
他にしたいのはこんなとこかな。
- メッセージウィンドウの表示・非表示切り替え。
- 分岐まわり。
分岐まわりは結構大変そうだなぁ。ウィンドウ表示はできるけど、そのあたりをXML側で定義するのが面倒そう。