100行以内で遊べるゲームを作る：何を削ると遊びが残るか

問いと準備：三つの削り代を決める

問いは一つに絞ります。「100行以内で、ルール・入力・描画のどれを最小にしたときに、遊びが残らなくなるのか」です。ここでの「遊びが残る」とは、次の三つが同時に成り立つ状態と定義します。

• A 反応が見える：操作してから1秒以内に、画面のどこかが変わります。
• B 差が分かる：上手な回と下手な回で、点数・残機・勝敗など目に見える違いが出ます。
• C もう一回が起きる：終わったあと、自分または他の人が自発的に再開します。

準備するものは次のとおりです。

• テキストエディタとブラウザ（外部ライブラリやサーバーは使いません）
• 記録用の表（次の節で示します）
• ストップウォッチ（スマートフォンのもので足ります）
• 可能なら、遊んでもらう相手を一人から二人。いなくても実験は成立します

行数の数え方を先に決める

行数の揺れは、この実験でいちばん起きやすい誤りです。最初に次のルールで固定し、記録表にも書き込んでください。

• 数える対象は、HTMLタグを含むファイル全体の行です
• 空行とコメントのみの行は数えません
• 1行に複数の文を詰め込むのは禁止とし、; で文をつなぐ場合も、1行の文は2つまでとします

基準になる最小のゲーム

比較の出発点として、マウスで受け皿を動かし、落ちてくる点を受ける小さなゲームを用意します。コードは単独で動きます。コメントで三つの要素に区切っていますので、行数を分類するときの目安にしてください。

<canvas id="c" width="320" height="240"></canvas>
<script>
const c = document.getElementById("c"), g = c.getContext("2d");
let x = 160, hit = 0, miss = 0, dot = {x: 100, y: 0};
// 入力
c.addEventListener("pointermove", e => {
  x = e.clientX - c.getBoundingClientRect().left;
});
// ルール
function update() {
  dot.y += 2;
  if (dot.y > 230) {
    if (Math.abs(dot.x - x) < 24) hit++; else miss++;
    dot = {x: Math.random() * 300 + 10, y: 0};
  }
}
// 描画
function draw() {
  g.clearRect(0, 0, 320, 240);
  g.fillRect(x - 24, 230, 48, 6);
  g.fillRect(dot.x - 4, dot.y, 8, 8);
  g.fillText(hit + " / " + miss, 8, 14);
}
function loop() { update(); draw(); requestAnimationFrame(loop); }
loop();
</script>

これを実験の出発点にしてもよいですし、自分で好きな100行以内のゲームを基準版にしても構いません。大切なのは、基準版をひとつ決めて、それを削っていくことです。

手順：一回に削る軸は一つだけ

基準版（ラウンド0）から、ルール・入力・描画の順に、一つずつ最小へ近づけていきます。毎回、1つの軸だけを動かし、他の二軸は前のラウンドの状態に戻してから始めます。

1. ラウンド0：基準版を遊ぶ。 100行以内で動く状態にし、5分間遊びます。ストップウォッチで測り、その間に自発的に再開した回数を数えます。
2. ラウンド1：描画を削る。 画像・色・図形を一段ずつ減らします。たとえば、点を四角から文字（「●」など）に替える、受け皿を消して位置を文字で示す、というように段階を踏みます。毎段階、A・B・Cを確認します。
3. ラウンド2：入力を削る。 操作を一段ずつ単純にします。たとえば、マウスの連続移動を「左右キー」に、さらに「クリック1回で左右が入れ替わる」に絞ります。入力の種類を減らすたび、A・B・Cを確認します。
4. ラウンド3：ルールを削る。 得点の種類、失敗の条件、終了条件を一つずつ外します。たとえば、miss の数え上げを消す、終了条件を消して無限に続ける、というように進めます。
5. ラウンド4：境界を探す。 ラウンド1〜3それぞれで、A・B・Cのどれかが崩れた直前の段階を「境界」として記録します。そのうえで、境界の手前の状態どうしを二軸同時に組み合わせ、遊びが残るかを確かめます。

各ラウンドでは、削る段階を最低3段階は用意してください。1段階だけだと、境界がどこにあるのか見えません。崩れなかった場合も、「ここまで削っても崩れなかった」と記録しておくことで、次の判断材料になります。

記録の取り方：何を、どの単位で、何回

1回の試行（1段階の削り）ごとに、表を一行埋めます。遊ぶ時間は1試行あたり5分、同じ段階では最低2回遊びます。慣れによる差を見るため、1回目と2回目は別々に書いてください。

• ラウンドと段階、記録する内容：例：R2-段階2
• 総行数、記録する内容：先に決めた数え方での行数
• ルール／入力／描画／共通の行数、記録する内容：コメントの区切りで分類した行数
• 削ったもの、記録する内容：直前の段階から何を外したか（一文で）
• A 反応が見える、記録する内容：○／△／×。△の場合は理由を一言
• B 差が分かる、記録する内容：○／△／×。上手い回と下手な回の違いを書きます
• C 再開の回数、記録する内容：5分間で自発的にもう一回押した回数
• 気づき、記録する内容：迷った点、意図せず遊びが増えた点

分類のコツとして、どの要素か決められない行は、無理にどれかへ入れず「共通」としてください。たとえば、変数の宣言や loop 関数は、三つの要素にまたがります。「共通」が多いほど、要素同士が絡まっているサインでもあります。

他の人に遊んでもらう場合は、説明を最小限にしてください。遊び方を口頭で補うと、入力と描画が担うべき「伝える仕事」が見えなくなります。画面を見て、何をすればいいか分かったかどうかも気づきに書いておきます。

結果の読み方：どうなればどう判断するか

表が埋まったら、軸ごとに「A・B・Cのうち最初に崩れたもの」を見ます。崩れ方で、その軸が果たしている役割が分かります。次の読み方を目安にしてください。

• 描画を削ってAが崩れたなら、描画はあなたのゲームで「反応の通知」を担っています。最低限、操作に応じて変わる何かを一つ残す必要があります。
• 描画を削ってもA・B・Cが保たれたなら、そのゲームでは描画は優先度が低いと読めます。浮いた行数をほかの軸へ回せます。
• 入力を削ってBが崩れたなら、入力の自由度が上手下手の差を作っていた可能性があります。操作を絞るなら、その分、ルール側で差を作る工夫が要ります。
• ルールを削ってBやCが崩れたなら、目標や失敗の条件が「もう一回」の動機になっています。ここは削らず、他の軸を詰める方向で考えます。
• どの軸でも最初に崩れるのがCだったなら、遊び直したくなる仕掛け（リスタートの手軽さ、記録の更新など）が足りていない可能性があります。

ラウンド4の組み合わせで、単独では崩れなかったのに二軸同時に削ると崩れた場合は、二つの要素が互いに補い合っていたということです。「描画が地味でも、ルールの緊張感が支えていた」といった関係が、ここで見えてきます。

注意したいのは、結論を一回の試行で決めないことです。同じ段階で2回遊んだ結果が食い違った場合は、△として記録し、3回目を足してください。

起こりやすい誤り

• 行数をごまかす。 1行に何文も詰め込むと数字は小さくなりますが、読みやすさが落ち、後で改造できなくなります。先に決めた数え方を守ってください。
• 二つの軸を同時に動かす。 入力を変えながら描画も整えたくなりますが、原因が切り分けられなくなります。直したくなったら、メモに書いて次のラウンドまで待ちます。
• 自分だけで判断する。 作者は操作を知っているため、AやBを甘く判定しがちです。可能なら一度は説明なしで他の人に渡してください。
• 運の差を腕の差と読み違える。 乱数を使うゲームでは、点数の差が運から来ている場合があります。Bを判定するときは、2回以上の結果を並べて見ます。
• 「遊びが残る」を気分で決める。 面白いかどうかの印象だけで判定すると、基準が回ごとに動きます。A・B・Cの三項目に立ち返ってください。
• 記録を後でまとめて書く。 5分遊んだら、その場で表を埋めます。時間がたつと、△の理由を思い出せません。

次の行動

まず基準版を100行以内で動かし、ラウンド1の描画から3段階、表に書き込んでみてください。一軸だけでも、削った場所と遊びの残り方の関係は見えてきます。

実験で作った小さなゲームは、1つのHTMLファイルのまま、アソバースに投稿できます。入口は直下の index.html で、投稿は入力、表示の確認、公開の3段階です。下書き保存ができるので、記録表と一緒に「どこまで削ったか」を紹介文に書いておくと、遊ぶ人にも伝わります。公開にはメールアドレスの確認が必要ですので、事前に済ませておくと進めやすくなります。