はじめての個人ゲーム開発 09｜動作・画面幅・容量を確かめる

今回の完成形

第08回の星あつめを、そのまま検証する回です。30秒以内に10個というルール、落下速度、素材、HTML/CSS/JavaScriptは変更しません。今回は新機能を増やさず、遊ぶ前・遊んだ後の状態を比べます。

残り29秒、星1個で停止した星あつめの実画面 — 通常の開始操作で中央の星を取得し、Escapeで停止。人の実時間クリアを示す画面ではありません。タップして拡大できます。

取得・停止・リセットを順に試す

ZIPを別フォルダーへ展開し、index.htmlを開きます。「ゲームを始める」を押し、中央の星を取ったらEscapeを押してください。今回の確認では星1個・残り29秒で停止し、進捗も1/10でした。「最初からやり直す」で0個・30秒へ戻ることを確認しました。

止まっている間に待っても得点や時計が変わらないか、開始後に別の操作へ移ると止まるかも確かめます。エラーが出る場合はブラウザーの開発者ツールのConsoleを開き、最初のエラーと対象ファイル名を記録します。見た目が出るだけでscript.jsも動いたと判断しないでください。

// script.jsの既存処理
function pause(){
  running=false; previous=null; keys.clear();
  cancelAnimationFrame(frameId); paint();
}

画面幅と、ゲーム内の座標を分ける

PCの開発者ツールで表示幅を320・375・812・1280pxに変えます。今回、ページ全体の横はみ出しはなく、左右ボタンは約61×50pxでした。Canvas内部の幅は420のまま、表示幅は320px画面で288px、375px画面で343pxになりました。表示の縮小とゲームの座標変更は別です。

375px幅で表示した星あつめ。左右ボタンと操作説明が画面内に収まる — PC上の375px幅表示です。スマホ実機での動作確認ではありません。タップして拡大できます。

実機では縦・横の持ち替え、タップ、ブラウザーの上下のバー、音の開始も確認する必要があります。今回の左右ボタンは1回32pxで、長押しは未対応です。画面幅の試験だけでスマホ対応済みとは表記しません。

容量を測り、未確認を残して次へ

第08回フォルダーの7ファイルは合計42,948バイトでした。HTML・CSS・JavaScript・星のSVG・フォントという実行時の5ファイルは37,856バイトで、うちフォントが28,568バイトです。ライセンスとREADMEも配布物に含めます。これらはファイル内容の非圧縮サイズで、通信量や読み込み速度の実測ではありません。

Networkで実際の転送量を見る場合はキャッシュの有無と測った環境も残します。小さなファイルだから全端末で軽い、とは判断できません。今回は低性能端末・通信制限・継続的なFPS測定・スマホ実機・直接試聴・全ルートの人の実時間クリアは未検証です。

確認日は2026年10月14日。自作コードと星はCC0、同梱フォントはOFL 1.1で、OFL.txtを残します。次の10「公開場所と公開用データ」は公開済みです。全12回の目次から前の回を読み返せます。