技術メモ|HTML1本のブラウザゲームの作り方

公開: 2026年10月25日 ・ 筆者: Toshi(開発者)

バズ走は、ゲームエンジンも画像素材も使わず、HTMLファイル1本とJavaScriptだけで動いています。開発記録では全体の考え方を書きましたが、ここではテーマごとに一歩踏み込んで、実際のコードの構造や、はまったバグとその直し方を残しておきます。同じようにブラウザゲームを個人で作ろうとしている方の参考になれば幸いです。

前提となる技術スタック

記事一覧

1. 日付をタネにして地形を作る — 「今日のコース」の仕組み

完全ランダムをやめて日付から擬似乱数の種を作り、全員が同じ地形を走れるようにした話。使っている乱数生成器、1区画ごとに何回乱数を引くか、速度と加速の設計値、ランキングとの整合まで。

2. 画像を1枚も使わずに世界を描く — Canvasだけの落書きグラフィック

東京タワーもピラミッドも円弧と直線だけ。手描きらしく見せるための「ずらして重ねる」テクニック、配色のルール、縦画面でカメラを引く実装、毎秒60回描いても重くならない工夫。

3. サーバーを1台も持たずに5人対戦 — Durable Objectsの使い方と落とし穴

部屋ごとに1つのオブジェクト、WebSocketで毎秒12回の同期、ハイバネーションで状態が消える問題にどう対処したか、ホスト交代・再接続・放置部屋の立て直しの設計。

4. QRコードを自分で実装した話 — リード・ソロモン符号で2回はまった

外部ライブラリを使わない方針を貫くためにQR生成器を書いた記録。ガロア体の計算、多項式の項順の取り違え、フォーマット情報の縦横転置、本当にカメラで読めるかを機械的に検証した方法。

この連載の方針

すべて実際に本番で動いているコードをもとに書いています。数値(速度、送信頻度、上限値など)は執筆時点の実装値で、調整により変わることがあります。記事の内容に誤りを見つけた場合はお問い合わせからお知らせください。

⚽ いますぐ走る