nobu blog

プログラミングやゲーム、ゲーム音楽コンサート周りの話をつらつらと。

*



HTML5とJavaScriptでサウンドノベルを作る(TypeScript使用) その3

   

概要

前回はTypeScript(HTML5 + JavaScript)を用いてサウンドノベルっぽいキャレット表示と、自動改ページを行いました。
今回はページ戻し機能を追加します。

今回やりたいこと

文章を表示中に以前のページの表示内容を表示させます。
戻り中は文字色を変更して一目で戻し中とわかるようにします。
modosi

動くサンプルはこちらになります。

状態定義

今回は、文章の表示中と過去戻り中かを状態として保持するため、以下のようなenumを定義します。

ページを戻す、進める

次に実際にページの戻しと進める機能を考えます。
この機能を実現するためにNovelDisplayクラスに以下の2つのメンバーを追加します。
1.戻りページ
2.現在の状態

次に以下の2つの機能の実装を行います。
1.ページを戻す
2.ページを進める

ページを戻す機能として、現在の状態を判断して通常表示から過去表示に切り替える必要があります。
その際に文字色を変更します。
ページを進める機能としてはその逆を行います。

現在表示に戻す

過去のページ表示中でもクリック時などに一気に現在表示中に戻す必要があります。
そこで、文章表示の機能に状態をチェックして表示を切り替えるようにします。

コード全体

今回の機能を組み込んだクラスとしては以下のようになります。
動くサンプルはこちらになります。

まとめ

ということで、過去表示する箇所を一通り実装してみました。
リファクタといいつつ結局コードをそのまま組み込んでしまいました・・・。
なんとかリファクタをやりたいと思います。

 - HTML, TypeScript, ゲーム