マウスだけで遊べるゲームと、キーボードだけで遊べるゲームを同じルールで作る

問いを一つに絞る

先に「何を比べるか」を決めます。入力装置の比較は、気を抜くと別のものまで一緒に比べてしまいます。この実験で問うのは次の一点です。

同じ的の並びを30秒で追うとき、マウス版とキーボード版で、命中数・ミス・反応時間・主観的な疲れや迷いはどう違うか。

動かしてよい変数は「マスの指定方法」だけです。次の項目は固定します。

• マスの数と大きさ（3×3、1マス80px）
• 的が出る順番（固定の乱数で再現できるようにします）
• 制限時間（30秒）
• 得点の数え方（命中数とミス数のみ）
• 同じマスに続けて的が出ない、という規則

結果の予想も、始める前に1行で書いておきます。「キーボード版のほうが遠いマスで遅くなるはず」のような形で十分です。後で結果と見比べると、自分の思い込みがどこにあったかが分かります。

準備するもの：同じルールを固定する

必要なのはブラウザとテキストエディタ、タイマー、記録用の紙かスプレッドシートです。ゲームは外部ライブラリを使わない1つのHTMLにまとめます。下のコードを index.html として保存してください。

<!doctype html><meta charset="utf-8">
<style>
#g{display:grid;grid-template-columns:repeat(3,80px);gap:6px}
.c{width:80px;height:80px;background:#ddd;border:3px solid transparent;box-sizing:border-box}
.t{background:#f90}.f{border-color:#06c}
</style>
<button id="b">開始</button><p id="s"></p><div id="g"></div>
<script>
const mode=new URLSearchParams(location.search).get("mode")||"mouse";
const g=document.getElementById("g"),s=document.getElementById("s"),b=document.getElementById("b");
const cells=[];let target=-1,cur=4,hit=0,miss=0,run=false,log=[],t0=0,r=1;
function rnd(){r=(r*1664525+1013904223)%4294967296;return r/4294967296}
for(let i=0;i<9;i++){const d=document.createElement("div");d.className="c";g.append(d);cells.push(d);
 if(mode=="mouse")d.onclick=()=>pick(i);}
b.hidden=mode!="mouse";
s.textContent=mode=="mouse"?"開始ボタンで30秒":"スペースキーで30秒";
function draw(){cells.forEach((d,i)=>d.className="c"+(i==target?" t":"")+(mode=="key"&&i==cur?" f":""));}
function next(){let n;do n=Math.floor(rnd()*9);while(n==target);target=n;t0=performance.now();draw();}
function pick(i){
 if(!run)return;
 if(i==target){hit++;log.push(Math.round(performance.now()-t0));next();}else miss++;
 s.textContent="命中 "+hit+" / ミス "+miss;}
function start(){if(run)return;run=true;r=1;target=-1;hit=miss=0;log=[];next();s.textContent="命中 0 / ミス 0";setTimeout(finish,30000);}
function finish(){run=false;target=-1;draw();const a=log.reduce((x,y)=>x+y,0)/(log.length||1);
 s.textContent="終了 命中 "+hit+" / ミス "+miss+" / 平均 "+Math.round(a)+"ms";console.log(log.join(","));}
b.onclick=start;
addEventListener("keydown",e=>{
 if(e.code=="Space"&&mode=="key"){start();e.preventDefault();return;}
 if(mode!="key")return;
 if(e.key=="ArrowLeft"&&cur%3>0)cur--;
 if(e.key=="ArrowRight"&&cur%3<2)cur++;
 if(e.key=="ArrowUp"&&cur>2)cur-=3;
 if(e.key=="ArrowDown"&&cur<6)cur+=3;
 if(e.key=="Enter")pick(cur);
 if(e.key.startsWith("Arrow"))e.preventDefault();
 draw();});
draw();
</script>

このコードのポイントは3つです。

1. ルール本体は共通です。 next と pick は両モードで同じ関数です。違うのは、pick を呼ぶ入り口がマスのクリックか、Enterキーかという点だけです。
2. 的の並びは固定です。 開始のたびに乱数の種を r=1 に戻すので、どのラウンドも同じ順番で的が出ます。モード間でも、同じ遷移（前の的から次の的への移動）を比べられます。
3. 反応時間が残ります。 終了時に、的ごとの反応時間（ミリ秒）をカンマ区切りで開発者ツールのコンソールに出します。

モードはアドレスの末尾で切り替えます。index.html?mode=mouse がマウス版、index.html?mode=key がキーボード版です。ファイルを直接開く方法では、ブラウザによってクエリ部分が効かないことがあります。その場合は const mode= の右辺を "mouse" か "key" の文字列に書き換えて、2つのファイルに分けてください。

手順と記録の取り方

1ラウンドは30秒です。次の順で進めます。

1. 各モードで練習を1回ずつ行います。記録には含めません。
2. 本番は、各モード4回を「マウス・キー・キー・マウス・マウス・キー・キー・マウス」の順に行います。同じモードが続くと慣れの影響が一方に偏ります。ABBAの並びにすると、この偏りを減らせます。
3. ラウンドの間に30秒以上休みます。手首や指の疲れを引きずらないためです。
4. 各ラウンドの終了直後に、数字と主観を記録します。

記録する項目と単位は次のとおりです。

• 命中数、単位：個/ラウンド、取り方：画面の表示を転記します
• ミス数、単位：回/ラウンド、取り方：画面の表示を転記します
• 平均反応時間、単位：ms/ラウンド、取り方：画面の表示を転記します
• 的ごとの反応時間、単位：ms/的、取り方：コンソールの数列を貼り付けます
• 迷い、単位：1〜5、取り方：「次の的を探して止まった感覚」の強さ
• 疲れ、単位：1〜5、取り方：手・指・腕のだるさ
• ミスの種類、単位：メモ、取り方：押し間違いか、位置の誤認か、判断が遅れたか

主観の評価は、数字を見る前に書きます。数字を見てから書くと、結果に合わせて感想が整ってしまうためです。ミスの種類は、ミスした直後に思い出せる範囲で一言だけ残します。ラウンドが終わると記憶が薄れ、分類しにくくなります。

可能なら、自分以外の人にも同じ手順で遊んでもらいます。人が増えるほど、特定の癖による偏りは薄まります。ただし遊んでもらう相手に同じ記録票を渡し、事前の予想も書いてもらってください。他人の結果を、自分の予想に引き寄せて解釈しないためです。

結果の読み方

数字がそろったら、次の順に読みます。

命中数は、ばらつきと比べる

同じモードの4回で、最大と最小の差を出します。これが、そのモードの「偶然の揺れ幅」の目安です。モード間の平均の差がこの幅より小さいなら、速さの差とは言い切れません。差が揺れ幅を明らかに超えているなら、入力装置の影響を疑う根拠になります。

ミスは数より中身を見る

ミス数が同じでも、原因が違えば設計上の意味が変わります。

• 押し間違いが多いなら、マスの大きさや間隔が操作に合っていない可能性があります。
• 位置の誤認が多いなら、キーボード版ではカーソルの目立たなさが原因かもしれません。
• 判断の遅れが多いなら、入力の問題ではなく的の見つけにくさが原因かもしれません。

分類したメモを数えて、どの種類が多いかを見ます。

遷移ごとの反応時間で距離の影響を見る

並びを固定してあるので、「中央のマスから右上へ」のような同じ遷移を、モードをまたいで比べられます。遷移ごとに、縦横のマス数の合計（距離）を出して整理します。

• キーボード版で、距離が大きい遷移ほど反応時間が伸びているなら、移動の操作そのものがコストになっていると読めます。
• マウス版で、距離による差があまり見えないなら、直接指定する方式の特徴が出ていると読めます。ただし、手を動かす距離や画面サイズによっても変わるので、断定はしないでください。
• どちらのモードでも距離と反応時間に関係が見えないなら、的を探して見つける時間が支配的で、入力の違いは小さいのかもしれません。

数字と主観のズレを拾う

数字ではキーボード版が速いのに、疲れや迷いの評価が高い、という組み合わせがありえます。逆もあります。このズレがあれば、ゲームの設計では速さより感覚を優先する場面があると読めます。たとえば短時間で繰り返し遊ぶゲームなら、疲れにくさのほうが大事かもしれません。

最後に、事前の予想と見比べます。外れた場合、なぜ外れたのかを1行で書いてください。この1行が、次の実験で何を変えるかの手がかりになります。

起こりやすい誤り

• カーソルの初期位置が不公平になる。 キーボード版のカーソルは中央から始まります。マウス版のポインタは、開始ボタンの位置から始まります。ラウンドの最初の的だけは条件が違うので、最初の1〜2個は集計から外すか、全ラウンドで同じ扱いにします。
• 開始方法が違う。 マウス版は開始ボタンのクリック、キーボード版はスペースキーです。開始の動作にまで差が出ないよう、手を置く位置を毎回そろえてから始めてください。
• デバイスが混ざる。 マウスとトラックパッドでは操作感が大きく違います。一方を選び、全ラウンドで固定します。トラックパッドの感度設定も、実験中は変えません。
• 一度に複数のことを変える。 比較を試す途中で、マスの数や時間を変えたくなります。変えるのは次の実験にしてください。この実験では入力方法だけが動く変数です。
• 慣れの影響を無視する。 本番を4回ずつ行っても、後半ほど上達します。ABBAの順にしたのはその対策ですが、完全には消えません。結果を読むときは、後半のラウンドほど数字が良くなっていないかも確認します。
• 結果をすぐに一般化する。 3×3で30秒のこの設定で出た傾向が、他のルールにそのまま当てはまるとは限りません。

次の行動

まず上のコードを保存して、マウス版とキーボード版を1回ずつ遊び、練習を済ませてください。次に記録票を作り、事前の予想を1行書いてから、ABBAの順で本番を8ラウンド行います。

結果から作りたいゲームの方向が見えたら、1つだけ条件を変えて実験を繰り返します。マスを4×4にする、時間を20秒にする、ミスで減点する、のいずれかです。アソバースへ投稿するときは、モードを固定した2つのHTMLをそれぞれ index.html として用意し、別々の作品として入力・表示確認・公開の3段階で出せます。

また、公式作品の「潮目のオセロ」は矢印キーとEnterで操作できると案内されています。同じルールの作品がどの入力で遊べるのか、他の公式作品も含めて、各作品を開いて確かめてみてください。