無音ゲーム「静寂道場」の作り方｜音がない制約をゲームデザインに変える【HTML/CSS/JS】

新たに公開した静寂道場は、効果音ファイルを1つも読み込まない「完全無音前提」のブラウザゲームだ。体内時計・居合（反応速度）・忍び足の3つの試練に挑み、総合点で段位を判定する。この記事では、その設計と実装を解説する。

目次 [ close ]
  1. 「音がない」を欠点から看板に変える
  2. 実装のポイント
    1. 1. 画面遷移は「ステージdivのinnerHTML差し替え」だけ
    2. 2. タイマーの一元管理
    3. 3. 「押している間だけ進む」はpointerイベントで
    4. 4. スコアは科学的な平均値を基準に設計する
    5. 5. 見張りサイクルには必ず「予兆」を入れる
  3. Claude Codeへの依頼プロンプト例
  4. まとめ

「音がない」を欠点から看板に変える

ブラウザゲームに音を付けない選択は、普通は手抜きに見える。だが調べてみると、「仕事中・学校でこっそり遊べるゲーム」は海外のRedditでも日本のメディアでも繰り返し話題になる定番ニーズで、ゲーム投稿サイトunityroomには「音無し」タグまである。音が出ないことは、遊ぶ場所を選ばないという立派な機能なのだ。

そこで一歩進めて、「静けさ」をテーマそのものにした。3つの試練はすべて、音がないからこそ成立する。

  • 体内時計：BGMや効果音のリズムという手がかりがないからこそ、純粋な時間感覚のテストになる
  • 居合：聴覚刺激への反応（平均140〜160ms）は視覚（180〜250ms）より速い。音の合図を使えない縛りが、そのまま競技性になる
  • 忍び足：「音を立てるな」という音テーマのステルスを、無音環境でプレイするという逆転構造

実装のポイント

1. 画面遷移は「ステージdivのinnerHTML差し替え」だけ

タイトル、試練の説明、プレイ画面、結果と、画面は10種類以上あるが、すべて1つのステージ要素のinnerHTMLを差し替える関数として実装した。フレームワークなしでも、「1画面=1関数」と決めるだけで見通しは保てる。

2. タイマーの一元管理

ゲームはsetTimeoutとsetIntervalだらけになる。画面を離れた後に古いタイマーが発火すると、別の画面を書き換える事故が起きる。すべてのタイマーを配列に記録し、画面遷移のたびに全消去する関数を最初に作っておくと、この種のバグが構造的に消える。

var timers = [];
function later(fn, ms) { var t = setTimeout(fn, ms); timers.push(t); return t; }
function clearAll() {
  for (var i = 0; i < timers.length; i++) { clearTimeout(timers[i]); }
  timers = [];
  if (tick) { clearInterval(tick); tick = null; }
}

3. 「押している間だけ進む」はpointerイベントで

忍び足のホールド操作は、mousedownとtouchstartを別々に書くのではなく、両方を統一的に扱えるpointerdown／pointerupを使う。指がボタンの外に滑った場合（pointerleave）やOSによる中断（pointercancel）でも確実に「離した」扱いにしないと、押しっぱなし状態が残るバグになる。スマホの長押しメニューを防ぐtouch-action:noneも必須だ。

hold.addEventListener('pointerdown', function(e){ e.preventDefault(); holding = true; });
hold.addEventListener('pointerup',     function(){ holding = false; });
hold.addEventListener('pointercancel', function(){ holding = false; });
hold.addEventListener('pointerleave',  function(){ holding = false; });

4. スコアは科学的な平均値を基準に設計する

居合のスコアは「平均250ミリ秒で約75点、200ミリ秒で約88点、150ミリ秒で100点」になるよう一次式で設計した。視覚反応の人間の平均が200〜250ミリ秒という公知のデータに合わせてあるので、プレイヤーは自分の数字の意味をすぐ理解できる。お手つきを700ミリ秒のペナルティ扱いにすることで、「見切り発車連打」の攻略法も潰してある。

5. 見張りサイクルには必ず「予兆」を入れる

忍び足の見張りは「進め（緑）→ 気配（黄・0.7秒）→ 見られている（赤）」のサイクルで動く。黄色の予兆なしで赤に変わると理不尽な即死ゲーになり、面白さが消える。予兆の0.7秒は人間の反応時間の約3倍で、「気づいていれば必ず止まれるが、油断すると死ぬ」絶妙なラインを狙った。理不尽と緊張感の境界は、こういう数値1つで決まる。

Claude Codeへの依頼プロンプト例

無音をテーマにしたブラウザゲーム「静寂道場」を単一HTMLで作って。

構成: 3つのミニゲーム連戦＋総合段位判定
1. 体内時計: 表示が一切動かない画面で10秒を体感で当てる
2. 居合: ランダムな合図への反応速度3本勝負（お手つきペナルティ付き）
3. 忍び足: ホールドで前進、足音ゲージと見張りサイクルを管理

制約:
- 音声ファイル・Web Audio API禁止（完全無音がコンセプト）
- 外部ライブラリ禁止、ES5文法、クラス名はszd-プレフィックス
- アンパサンドとバッククォート禁止（WordPress埋め込みのため）
- スマホはタップ、PCはスペースキー対応
- 反応速度の採点は人間の平均値（200〜250ms）を基準に

まとめ

制約は隠すより看板にしたほうが強い。「音がないゲーム」ではなく「無音で遊ぶためのゲーム」と言い換えた瞬間、欠点は差別化になる。技術的には、タイマーの一元管理とpointerイベントの取りこぼし対策という地味な2点が品質の大半を決めた。ゲームの面白さ調整は、予兆0.7秒のような「数値1つ」に宿る。

ゲーム本体は静寂道場｜無音で遊べるブラウザゲームから。過去の制作記は日常系ツールを4つ一気に作って公開した方法もどうぞ。