プロジェクトの話

Flash以後のブラウザパズル:起動・記録・オフラインの違い

PuzzleVaultがゲームを読み込み、音を鳴らし、記録やファイルを保存する仕組みを解説。オフライン起動と進行保存を具体例で区別します。

ブラウザでパズルを始める操作は簡単です。ゲームを選び、一手進めれば結果が見えます。その間には、ファイルの読み込み、ルールの実行、描画、音、対応する記録の保存という別々の処理があります。役割を分けて理解すると、音が出ない、得点が見えない、接続なしで遊びたいといった場面で確認すべきことがわかります。

Flash以後、起動方法はどう変わった?

Adobeは2020年12月31日にFlash Playerのサポートを終了し、2021年1月12日からFlashコンテンツの実行をブロックしました。日付はAdobeの終了案内で確認できます。現在のPuzzleVaultはFlashプラグインではなくHTML、CSS、JavaScript、Canvasを使います。対応するページを開く際に、PuzzleVaultアカウントや別のゲームアプリのインストールは必要ありません。

これは配信方法の説明で、特定のフレームレートや全ブラウザで同一の動作を保証するものではありません。たとえばMergeChainでは描画と同時に動く玉や衝突を更新します。一手ずつ進む数字推理画面とは処理内容が違います。すべてのブラウザパズルが同じ速度だと考えず、使う端末で反応を確かめましょう。

画面の準備と音の準備は別

PuzzleVaultの短い効果音はコードで生成します。共通の入力処理は最初のポインター操作で音声を初期化し、音ボタンはオン・オフの設定を保存します。盤面が見えていて最初だけ静かな場合は、普通のゲーム操作をしてから、音ボタンと端末の音量を確認してください。無音だけで盤面の読み込み失敗とは判断できません。

操作が効かないときは、盤面と周辺ページのどちらを操作しているか確認します。MergeChainの矢印キーは盤面にフォーカスが必要です。ブラウザの戻る操作とゲームの再スタートも別物です。慣れない端末では、時間制限や記録を狙う前に練習操作を一度済ませると確実です。

ゲームファイル、保存記録、現在の盤面

ブラウザのローカルストレージはセッションをまたいでデータを保持でき、プライベート閲覧では扱いが異なります。MDNのlocalStorage説明を参照できます。PuzzleVaultは対応する統計、最高得点、設定、進行記録をここに保存します。現在の実装は端末間で同期するアカウントに記録をアップロードしていません。

混同しやすい3つの状態
見えること保存されているものそれだけではわからないこと
オフラインでゲームが開く以前にキャッシュされたページとファイル未訪問の別ページも開くか
最高得点が戻るこのブラウザのローカル記録別のスマートフォンにも同じ記録があるか
盤面が開いているそのページで進行中の状態閉じた後にすべての途中ゲームを再開できるか

説明用の場面を考えてみましょう。ノートパソコンで一局を終え、後からスマートフォンで同じURLを開きます。同じゲームは表示できても、スマートフォンの統計は別の新しい記録かもしれません。それはパソコンの得点が消えた証拠ではありません。逆に、サイトデータの削除後にキャッシュからゲームが開いても、以前の記録まで残っているとは限りません。比べる前に同じブラウザプロファイル、同じサイトアドレスかを確認しましょう。

オフラインには必要なファイルが必要

サービスワーカーはリクエストを処理し、キャッシュ済みリソースを利用できます。MDNのService Worker API説明が参考になります。PuzzleVaultのワーカーは主要ゲームのページ、スクリプト、スタイル、言語ファイルを保存しようとします。ページ移動ではネットワークを先に試し、失敗時にキャッシュへ戻ります。ゲームのスクリプトとスタイルはキャッシュを先に見ます。

一度短くオンラインで開けば全ページが永久に使える、という保証ではありません。インストールが完了し、必要なファイルが保存され、その後も残っている必要があります。利用可能なキャッシュがないページを最高得点の記録だけから再現することはできません。旅行で使う前には対象のゲームをオンラインで十分に読み込み、短時間接続を切って同じゲームを開き直してみましょう。大事な途中のプレイではなく練習用の回で確認してください。

更新時の再読み込みはタイミングを選ぶ

新しいワーカーが利用可能になると、PuzzleVaultが再読み込みの案内を出す場合があります。再読み込みはページを開き直す操作なので、進行中の時間制限プレイを残したいなら先にその回を終えましょう。コンテンツ更新と個人の得点は別のデータです。更新案内や見た目の変更は、端末間の記録同期を示しません。

使っている操作、記録の保存先、必要なページが実際に開くかを区別すると、ブラウザで遊びやすくなります。最初は時間制限のない論理パズルで操作を確認してください。 NumVaultを試す