音だけで遊ぶゲームを作る：画面を見ないで成立する遊び

状態を3つの軸に割り当てる

最初に決めるのは、伝えたい状態と、それを運ぶ音の軸の対応です。今回の試作では、次の表のように割り当てます。

• 自分の位置（16マスの左右）、運ぶ軸：左右（パン）、割り当て：左端が左耳、右端が右耳
• 目標までの距離、運ぶ軸：間、割り当て：近いほどビープの間隔が短い
• 決定の成功、運ぶ軸：音色と高さ、割り当て：高い角張った音の上昇2音
• ミスの回数、運ぶ軸：音の数、割り当て：低い音がミスの回数だけ鳴る
• ゲームの終了、運ぶ軸：音色と長さ、割り当て：最も低く長い音

ポイントは、1つの軸に1つの意味だけを持たせることです。たとえば「間」で距離を表しながら、同じ「間」でミス回数も表すと、聞き手はどちらの話なのか区別できません。軸が足りなくなったら、意味を足すのではなく、音色や音の数のような別の軸に逃がします。

準備するものと最小の試作

必要なのは、ブラウザ、ステレオで聞けるヘッドホン、メモ用の紙とペンです。スピーカーでも動きますが、左右の位置の判別が難しくなるため、ヘッドホンをおすすめします。ブラウザは音の自動再生を制限しているので、キー操作を合図に音を始める作りにしています。

次のコードを index.html として保存し、ブラウザで開いてください。外部ライブラリは使わず、単独で動きます。

<!doctype html>
<meta charset="utf-8">
<title>音だけの探しもの</title>
<body style="background:#000;color:#888">
<p>Enterで開始。←→で移動、スペースで決定。</p>
<script>
const N = 16;
let ac, pos, goal, miss, timer;
function tone(f, d, pan, type, when = 0) {
  const t = ac.currentTime + when;
  const o = ac.createOscillator(), g = ac.createGain(), p = ac.createStereoPanner();
  o.type = type; o.frequency.value = f; p.pan.value = pan;
  g.gain.setValueAtTime(0.2, t);
  g.gain.exponentialRampToValueAtTime(0.001, t + d);
  o.connect(g).connect(p).connect(ac.destination);
  o.start(t); o.stop(t + d);
}
const panOf = () => pos / (N - 1) * 2 - 1;
function newGoal() { do { goal = Math.floor(Math.random() * N); } while (goal === pos); }
function loop() {
  tone(440, 0.1, panOf(), "sine");
  timer = setTimeout(loop, 150 + Math.abs(goal - pos) * 90);
}
function decide() {
  if (pos === goal) {
    tone(660, 0.15, 0, "square"); tone(880, 0.3, 0, "square", 0.16);
    newGoal(); return;
  }
  miss++;
  for (let i = 0; i < miss; i++) tone(120, 0.2, 0, "sawtooth", i * 0.25);
  if (miss >= 3) { clearTimeout(timer); tone(80, 1, 0, "sawtooth", 1); ac = null; }
}
addEventListener("keydown", e => {
  if (e.key === "Enter" && !ac) {
    ac = new AudioContext(); pos = 0; miss = 0; newGoal(); loop(); return;
  }
  if (!ac) return;
  if (e.key === "ArrowRight" && pos < N - 1) pos++;
  else if (e.key === "ArrowLeft" && pos > 0) pos--;
  else if (e.key === " ") { e.preventDefault(); decide(); return; }
  else return;
  tone(300, 0.05, panOf(), "triangle");
});
</script>

遊び方は単純です。Enterで始めると、定期的にビープが鳴ります。左右キーで動き、ビープの間隔が短くなる方向が目標の方向です。目標の位置でスペースを押すと成功音が鳴り、新しい目標が決まります。外れた場所で押すと低い音がミスの回数だけ鳴り、3回目で長い終了音が鳴ります。

まず自分で数回遊び、画面を見ずに成立しそうかを確かめてください。この段階で気づいた違和感は、次の節の記録の「仮説」欄に書いておくと、後で比較できます。

試遊の手順と記録の取り方

自分ひとりの感覚は、作った本人の知識に引きずられます。ミスの音が何を意味するか知っているので、何を聞いても正しく解釈できてしまうためです。可能なら、仕組みを知らない人を数人誘ってください。3〜5人が一つの目安です。

試遊の流れ

1. 説明は「Enterで始まります。左右キーとスペースを使います」だけにします。音の意味は教えません。
2. 画面は見ない約束にします。ブラウザのウィンドウを黒い紙で隠すか、画面の明るさを最低にします。
3. 1人あたり5ラウンド（ミス3回で終了するまでを1ラウンドとします）を遊んでもらいます。
4. 各ラウンドの途中で、ミスの後に1度だけ「いまミスはいくつですか」と尋ねます。
5. 終了後に「音の意味で分かったこと、分からなかったこと」を自由に話してもらいます。

記録する項目

記録は紙に1ラウンド1行で書きます。単位は「ラウンド」です。

• 目標に着くまでの左右キーの押下回数（キー入力のたびに、横に正の字で数えます）
• 成功の回数、ミスの回数
• ミス後の質問への答えと、実際のミス回数が合っていたか
• 目標を見つけるまでに「迷った」と思われる行動（同じ場所を往復した、動かず止まったなど）の有無
• 遊び手が自発的に言った一言（そのまま書き取ります）

1人5ラウンドを日を置いて2回やると、慣れの影響も見られます。ただし、回数を増やすほど遊び手の負担も増えるので、無理のない範囲で構いません。

結果の読み方

数字が集まったら、次のように読みます。閾値は目安なので、自分の試作の目的に合わせて決め直してください。

「ミスの回数」の質問が合っているか。 回答と実際の回数が多くの場面で一致していれば、「音の数」で回数を運ぶ割り当ては機能している可能性があります。一致しにくい場合は、音が短く連続しすぎて数えにくい、あるいは低すぎて聞き取りにくいことが考えられます。音の間隔を広げる、音色を変える、といった改良の候補になります。

キー入力回数が1ラウンド目から2ラウンド目以降で減っているか。 減っていれば、「間の短さ＝近い」という対応が自力で見つけられたと読めます。変わらない、あるいは増えていれば、この対応が直感に合っていない可能性があります。その場合、距離を間ではなく音の高さに割り当てた版を作り、同じ手順で比べてみてください。

聞き取った内容が、遊び手によって食い違っていないか。 たとえば「間が短い」ではなく「テンポが速い」と表現する人と、「音が高い」と表現する人がいたら、同じ音を別の軸として聞いている兆候です。割り当ての意図と、実際に聞かれている軸のずれが、設計の見直し箇所です。

迷った行動の偏り。 画面の端（0番と15番）で止まって動かなくなる人が多ければ、端の合図が足りません。今回のコードでは、端でキーを押しても何も鳴らないので、壁にぶつかったのか、キーが効いていないのかが区別できません。

起こりやすい誤り

実験が思うように進まない原因は、音の設計よりも条件の設定にあることが少なくありません。

• 音の意味を先に教えてしまう。 説明すると、音が自力で伝わっているのか、説明を覚えているのかが分けられなくなります。
• 聞こえ方の違いを考慮しない。 低い音が聞き取りにくい人や、左右の聞こえ方に差がある人もいます。結果が悪いときは、割り当てが悪いのか、聞こえの条件が合っていないのかを分けて考えてください。
• 音量の差で意味を作ってしまう。 成功音を大きく、ミス音を小さくすると、環境音量の影響を受けやすくなります。意味は音色・高さ・数・間に持たせ、音量は揃えておきます。
• 一度に変える点を増やす。 間隔と音色とパンを同時に変えると、どれが効いたのか分かりません。1回の改良で変えるのは1か所だけにします。
• 同じ人で比べすぎる。 同じ人が複数の版を遊ぶと、前の版で覚えた規則が次の版に影響します。可能なら版ごとに別の人を募るか、順番を入れ替えて記録します。

次の行動

まず上のコードを保存し、自分で3ラウンド遊んで、気になった点を一つ決めてください。その1か所だけを変えた版を作り、仕組みを知らない人に遊んでもらって、ミスの回数を聞き取る質問が合うかを記録します。アソバースへ公開する場合は、HTMLを直接アップロードでき、紹介文に「画面はほぼ暗く、音で遊ぶ」と明記しておくと遊び手が準備できます。

参考資料

• MDN Web Docs「Web Audio API」「StereoPannerNode」