前回までのあらすじ
前回は、AIに勧められた土台テンプレートが実は存在しなかったところから始まり、DOM移行や連鎖パズルの作り込みを経て、1部屋だけの脱出ゲーム（初号機）を公開するところまでを書きました。ただ、当時の状態にはまだ抜けがありました。触ったら即ゲームオーバーになるような危険な仕掛けが一つも無く、スマホでちゃんと遊べるかどうかも確認できていなかったのです。
今回はその2つに手を付けた回です。危険な仕掛けを追加し、ゲームクリアの幅も広げ、実際に公開してスマホで動作確認までした結果、想定していなかった落とし穴に2つぶつかりました。
第1章：触ったら即アウト、でも不公平にならないように
まず着手したのは、「触ったら即ゲームオーバーになる」危険な仕掛けです。ただの棒のような見た目のオブジェクトを配置して、クリックした瞬間にゲームオーバー画面が出る、という仕組みは実装自体はすぐに終わりました。
ところが実際に触ってもらったところ、「怪しいワイヤーがただの棒にしか見えない。クリックした途端ゲームオーバーになるのは不公平で、マウスホバーで説明が出るなどの事前情報が必要」という指摘をもらいました。確かに、見た目で危険だと分からないものに触れて即座に失敗するのは、謎解きというよりトラップゲームの理不尽さに近くなってしまいます。
そこでまず、危険物にはトゲトゲした専用の見た目と、警告色で点滅する演出を追加。あわせて、マウスカーソルを合わせるとヒント欄に説明文が出るhoverTextという仕組みを、最初は危険物専用として実装しました。
ただ、これもすぐに「危険物だけホバー対応なのは不自然。全部のオブジェクトに必要」という指摘を受け、hoverTextを全オブジェクト共通の機能に一般化。個別に文言を設定しなくても、「拾えそうなものには『○○が見える。』、調べられそうなものには『調べられそうだ。』」といったタイプ別の汎用文言が自動で出るフォールバックも用意し、設定し忘れても何も表示されないという事故を防ぐようにしました。
第2章：AIのサンプルコードに紛れていた2つの見落とし
同じタイミングで、ゲームオーバー以外の「4本柱」もまとめて実装しました。アイテムごとに個別の反応を返すitemActions、オブジェクトの見た目や状態を切り替えるhideOnFlag、クリア条件によって結末が変わる複数エンディング、そして制作者向けのDEBUGパネルです。
ここでAIから提示されたサンプルコードをそのまま組み込む前に見直したところ、2つ問題を見つけました。
1つ目は、DEBUGパネルを表示するmeta.debugのデフォルト値がtrueになっていたことです。提案してきた側も「通常販売時はfalseにする」とロードマップ上では明言していたのに、実際のサンプルコードはtrueのままでした。気づかずにこのままテンプレートを公開していたら、買い手が作ったゲームに「全アイテム取得」のようなチート機能が遊び手からも見えてしまうところでした。
2つ目は、ゲームオーバー画面のHTMLが、実際にはスタイルシートに存在しない.overlay-contentや.btnというクラス名を使っていたことです。このまま表示すると、ボタンがブラウザ標準の飾り気ないデザインになり、既存のタイトル画面やクリア画面と統一感が崩れてしまいます。指摘した上で修正版をもらったのですが、その修正版もクラス名だけを直してdivの入れ子構造自体は残ったままで、.overlay側の余白設定が直接の子要素にしか効かない仕様と噛み合わず、レイアウトの間隔が詰まったままになっていました。ボタンにも代替のクラスが付いていなかったため、結局スタイルが何も当たらない状態です。最終的に入れ子を完全に排除し、既存のタイトル・クリア画面とまったく同じDOM構造に作り直しました。
AIが出してくるサンプルコードは、一見動きそうに見えても、実際にブラウザで表示してみるまで気づけない見落としが混ざっていることがあります。この一件は特にその教訓が強く残った出来事でした。
第3章：スマホには「ホバー」が存在しない
危険物の事前情報をホバーで出す仕組みを作ったものの、そもそもスマートフォンには「ホバー」という概念がありません。マウスカーソルを合わせるという操作自体が存在しないため、このままではスマホ版で危険物の警告が一切機能しないことになります。
代替案として、レビュー役のGeminiから3つの案が出てきました。
- 長押しをホバー扱いにする
- 「調べるモード」のトグルボタンを用意する
- 1回目のタップで選択、2回目のタップで実行する2段階タップ方式
それぞれ検証したところ、案1は「知っていないと使えない」ため、初見のプレイヤーは結局今まで通り即タップしてしまい、不意打ち防止という本来の目的に効かないことが分かりました。案2は常時画面にモード切り替えのUIが増える上に、切り替え忘れという別の事故を生みかねません。案3は安全ではあるものの、全オブジェクトに適用すると、鍵を拾うような無害な操作までいちいち2回タップが必要になり、テンポが悪化してしまいます。
最終的に採用したのは、「危険物だけ2段階タップ、それ以外は今まで通り1タップ」というスコープを絞ったハイブリッド案です。さらに「PC版はそのままでいい、スマホ版だけ対応してほしい」という要望に合わせて、タッチイベント（touchend）のみに限定した実装にしました。PCのマウスクリックやホバーの挙動は一切変更していません。1回目のタップでヒント文と「もう一度触れると実行される」という案内を表示し、3秒以内の2回目のタップで実際に処理を実行する形です。
ここまでロジックはスクリプトで検証できましたが、実際のタッチイベント（touchstart→touchend→合成click)の連鎖を完全に再現できる開発環境が手元になかったため、実機のiPhoneでの動作確認はできないまま、いったんここで公開することにしました。
第4章：公開して、実際にiPhoneで開いてみたら
ブログで第1話を公開したあと、実際に自分のiPhoneで開いて確認したところ、2つの不具合が見つかりました。
1つ目は、パスコードダイヤルの「決定」「閉じる」ボタンが画面の下にはみ出して押せないというものです。原因を調べると、ゲーム画面全体を包む.frameが900:560という横長比率に固定されていたため、スマホの画面幅で表示すると高さが約203pxしか取れず、実際のモーダルの中身（約316px）が収まりきらずにoverflow:hiddenで切れてしまっていたのが原因でした。モーダル側に最大高さとスクロールの指定を追加し、画面に収まらない場合はモーダル内をスクロールして操作できるようにしました。
2つ目は、タイトル画面の文字が読みづらく、背後の部屋がうっすら透けて見えるというものです。こちらは、オーバーレイの背景色がダーク固定の値にハードコードされていたことが原因でした。スマホ本体がライトモードの設定になっていると、文字色だけがライトモード用の暗い色に切り替わってしまい、暗い文字が暗い背景に沈んで読めなくなっていたのです。背景の色をテーマに応じて変わる値に直し、不透明度も引き上げて対応しました。
PCのブラウザで何度も確認していたつもりでしたが、実機の、しかも普段使っている設定のままのスマホで見て初めて気づく問題があるものだと実感しました。
第5章：ついでに、金庫の鍵も「見て拾う」演出に
危険物やスマホ対応と並行して、地味に気になっていた点も直しました。パスコードが正解しても、ダイヤルに「OPEN」と表示されるだけで何も起きないのが味気ない、鍵は目で見てクリックして手に入れたい、という要望です。
正解してもすぐに鍵を渡すのではなく、いったん金庫が「開いた」状態のフラグだけを立て、ダイヤルと同じ位置に鍵のオブジェクトを重ねて配置。フラグが立つとダイヤルの「OPEN」表示が消えて、代わりに鍵が現れてクリックで拾えるようにしました。あわせて、ズーム画面で何かを拾ったら自動で元の部屋の画面に戻るreturnAfterPickupという汎用オプションもエンジン側に追加しています。他のシナリオでも使い回せる仕組みなので、地味ですが今後の資産になりそうです。
🎮 今回のバージョン
危険な罠、複数のエンディング、そしてスマホでも安全に遊べる2段階タップの仕組みが入っています。PCでもスマホでも、ぜひ実際に触ってみてください。
💬 読者へのヒアリング
今回はこちらでも実機のiPhoneで確認して2つ不具合を直しましたが、手元にあるのは1機種だけです。Androidや他のiPhone、他のブラウザで遊んでみて、ボタンが押しにくい・文字が読みにくい・危険物のタップ判定がおかしい、といった点に気づいたら、ぜひコメントで教えてください。
まとめ＆次回予告
危険物を追加して、AIのサンプルコードの見落としを2つ拾い、スマホ向けの操作方式を設計して、公開後の実機テストでさらに2つの不具合を見つけて直す。今回は「作って終わり」ではなく、実際に世に出してから気づくことの多さを実感した回でした。
次回は、初めて本物の背景・オブジェクト画像を組み込んだ話です。procedural描画（グラデーションの壁やSVGの図形）だけの間は絶対に起きなかった種類のバグが、実素材を入れた瞬間に一気に噴き出すことになります。
次回：第3話「実素材を入れたら、いままで存在しなかったバグが一気に噴き出した話」
コメント