開発記録｜1本のHTMLでブラウザゲームを作った話

2026年7月

バズ走は、HTMLファイル1本だけで動くブラウザゲームです。外部のゲームエンジンもライブラリも使っていません。ここでは、どういう考えで作ったのかを開発メモとして残しておきます。同じようにブラウザゲームを作ってみたい方の参考になれば幸いです。

設計方針：とにかく「踏んだ瞬間に遊べる」こと

最初に決めたのは、リンクを踏んでから遊び始めるまでの時間を限界まで短くするという一点でした。スマートフォンで暇つぶしのゲームを探している人にとって、アプリのインストールやアカウント登録は大きな壁です。ロード画面すら離脱の原因になります。

そこで、次の制約を自分に課しました。

結果として、ゲーム本体は数十KBに収まりました。回線が細い環境でも、タップした次の瞬間には走り始められます。

画像ファイルを一切使わない方針なので、背景も棒人間もすべて Canvas API のコードで描いています。円弧、直線、二次ベジェ曲線の組み合わせだけで、東京タワー、五重塔、ピラミッド、エッフェル塔、自由の女神といったランドマークを表現しました。

この制約は不便なようでいて、実は作品の統一感を生む要因にもなりました。手描き風の線と、白い紙のような背景、差し色の赤だけ。素材を集める時間もゼロで、あとから都市を追加するのもコードを数十行足すだけで済みます。

実装メモ：落書き感の出し方
太陽は「わずかに中心をずらした円弧を3本重ねる」だけで、手でぐるぐる描いたような質感になります。完全な円を1本描くより、ずれた線を重ねる方が手描きらしく見える、というのは他の描画にも応用しました。

初期版は地形を完全なランダムで生成していました。しかし何度もテストするうちに、明らかな問題が見えてきました。同じ腕前でも、地形の引き次第でスコアが数倍変わるのです。これでは記録に意味がなく、友達とスコアを比べても盛り上がりません。

そこで、日付から擬似乱数の種を作る方式に変更しました。これにより、同じ日のうちは世界中の全員が同じ地形を走るようになりました。運の要素が消えたことで、繰り返し走って地形を覚えるという上達の道筋も生まれました。

当初、称号は6段階しかありませんでした。ところが自分で遊んでいると、何度走っても同じ称号ばかり出てきて、リザルト画面を見る楽しみが薄れていくことに気づきました。

そこで50mごとに1つ、合計100種類まで拡張しました。ポイントは、上手い人だけが報われる設計にしなかったことです。序盤の称号ほど自虐的で笑える文言にしてあります。「靴ひも結び中」「ゴミ出しダッシュ」「犬の散歩ペース（先に犬が帰った）」といった具合です。

下手なプレイほど面白い結果が出るようにしたことで、初心者でも結果を見せたくなる。この構造は、ゲームそのものより重要だったかもしれません。

パソコンでは快適に遊べたのに、スマートフォンの縦画面ではまったく別のゲームになってしまう、という問題がありました。原因は前方の視認距離です。横に広い画面では障害物が早く見えるのに対し、縦長の画面では見えた瞬間にはもう避けられません。

解決策として、画面幅が狭いときはカメラを引いて描画する仕組みを入れました。ゲーム内部の物理計算はそのままに、見える範囲だけを約1.7倍に広げています。難易度そのものは変えていないので、端末による有利不利を最小限に抑えつつ、縦持ちでも「見てから反応できる」状態になりました。

距離だけを競うゲームは、数字が伸びても実感が湧きにくいという弱点があります。そこで、距離に応じて背景が切り替わる世界一周コースを用意しました。

ニューヨークから出発し、アジア、中東、ヨーロッパを巡り、成層圏を突破して月・火星・土星・太陽へ。帰りはスペイン、ポルトガル、モロッコを経由して出発地に戻る全22ステージ、1周3,550mです。

これにより「1,850m走った」ではなく「火星まで行った」と言えるようになりました。数字より場所の方が、人に伝えるときの言葉として強いというのが実感です。

今後は、遊んでくださった方の反応を見ながら、地形パターンの追加や新しい称号の検討を進めていく予定です。更新内容はお知らせで随時ご報告します。

「1本のHTMLでどこまでできるか」という実験でもあるので、なるべくこの制約は維持したまま育てていくつもりです。