ブラウザゲーム作成2日目です。
phina.jsの学習コストやモチベと相談して、よりシンプルな構成でスタートすることにしました。
【画面レイアウト】
HTMLとCSSで定義しました。やりたいことをググるとすぐサンプルコードが手に入ります。打った結果がすぐに見れるのも嬉しい。(←これ大事)
しばらく格闘した結果がこちら
それらしいゲーム画面が出来ました。非常にシンプルなUIなので、テキストエリアとボタンの描画周りは全てCSSの属性指定で済みました。ネットでフリーフォントを拾ってきて、レトロな雰囲気を演出しています。
内部処理はjavascriptで書いていきます。コーディングしやすくする為、よく使う共通機能はutil.jsに定義して、使い回すことにしました。
テキスト表示処理はこんな感じ
画面読み込み時に呼ばれる処理で、サンプル文を表示させています。
ここから、ボタン押下時に呼ばれる処理でゲームを動かしたいのですが、どんな仕組みにすればコーディングが楽に済むか、思案中です。
【ここまでに格闘した主な内容】
・解決済み
Safariがキャッシュを記憶してしまい、更新内容が画面に反映されない→HTMLヘッダでキャッシュさせない設定
ページ全体に指定したつもりの書式がテキストエリアやボタンに反映されない→CSSに個別設定を追加
ボタンをダブルタップすると画面が拡大されてしまう→CSSで動作制御
・未解決の問題
家の外からインターネット経由でアクセスすると504エラーでタイムアウトしてしまう
家のWifi経由だとURL指定でも表示されるのですが、Apacheのタイムアウト設定あたり？
【今後の課題】
ゲームを進行するには必ずステート管理が必要だが、ボタンキックで動かす場合、ゲームの進行状況をどんな形で保持するべきか。
シナリオデータをどんな形で保存するか。データを読み込ませて動かすにはRPGツクールのような仮想マシンが必要だが、どんな作りにするか。特に条件分岐やイベント呼び出しの仕組みをどうやって実装するか。
チマチマと育てていく感じが楽しいです。