ワンボタンゲームの作り方：押すだけで成立する遊び

ワンボタンで面白くなる仕組みを理解する

ワンボタンゲームが成立するのは、「押す」という単純な行為が、ゲーム内の何らかの連続的な変化と結びついているからです。代表的な構造は三つあります。

タイミング型は、画面上で何かが動いており、プレイヤーは「今だ」というタイミングで押します。ジャンプ・射撃・停止など、動きに対して介入する感覚が楽しさになります。古典的なフラッピーバード系やリズムゲームの一部がこの構造です。

蓄積型は、ボタンを押し続けている時間がパワーや距離に変換されます。ゴルフゲームのパワーゲージ、弓を引き絞る動作などが典型です。「どこで離すか」が判断の核になります。

切り替え型は、ボタンを押すたびに状態が反転します。右向き・左向きを交互に切り替えながら障害物をよける、重力の向きを反転させるなど、押すことで世界の法則が変わります。

この三つは組み合わせることもできますが、最初の一作は一つの構造に絞るほうが設計しやすいです。複数を混ぜると「今何が起きているか」がプレイヤーに伝わりにくくなります。

設計で決めるべき四つの要素

構造を選んだあとは、次の四点を具体化します。ここが曖昧なままコードを書き始めると、後から大きく直すことになります。

1. 変化し続けるもの

ボタンを押す前から何かが動いていなければ、タイミングや判断が生まれません。キャラクターが自動で前進する、ゲージが一定速度で増減する、障害物が近づいてくる――こうした「ほうっておくと変化し続けるもの」を必ず一つ置きます。

2. ボタンが何を変えるか

変化し続けているものに対して、ボタンがどう介入するかを決めます。「加速させる」「反転させる」「固定する」など、動詞一語で言い切れる介入が明快です。「なんとなく影響する」設計は避けます。

3. 失敗条件

ワンボタンゲームの緊張感は、失敗条件がはっきりしていることで生まれます。「この線を超えたら終わり」「この敵に当たったら終わり」のように、視覚的にわかりやすい条件にします。

4. 上達の余地

ワンボタンでも、慣れるほど上手くなる構造が必要です。障害物の速度が徐々に上がる、パターンが複雑になるなど、初回クリアより2回目のほうが良い結果が出る仕掛けを入れます。これがなければ、ゲームではなくランダムな抽選になってしまいます。

HTMLとJavaScriptで実装する手順

ブラウザゲームとして作る場合の基本的な実装の流れを示します。

ステップ1：入力を受け取る

スペースキーとタップを同時に拾う処理を最初に書きます。キーボードとタッチの両方に対応することで、スマートフォンでもプレイできます。

let pressing = false;

document.addEventListener('keydown', (e) => {
  if (e.code === 'Space') pressing = true;
});
document.addEventListener('keyup', (e) => {
  if (e.code === 'Space') pressing = false;
});
document.addEventListener('touchstart', () => { pressing = true; });
document.addEventListener('touchend', () => { pressing = false; });

このpressingという変数一つが、ゲーム全体の入力状態になります。ゲームロジックはこの変数だけを参照すればよく、入力まわりのコードがここに集約されます。

ステップ2：ゲームループを作る

requestAnimationFrameを使ったループで、毎フレームの更新と描画を行います。

function loop(timestamp) {
  update(timestamp);
  draw();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

updateの中でゲームの状態（座標・速度・スコア・ゲームオーバー判定）を更新し、drawでCanvasに描画します。この二つを分けておくと、後からデバッグしやすくなります。

ステップ3：変化し続けるものを実装する

タイミング型を例にとると、キャラクターが重力に従って落下し、ボタンを押すと上昇する、という動きは次のように書けます。

let y = 200, vy = 0;
const gravity = 0.4;
const jumpForce = -7;

function update() {
  vy += gravity;
  if (pressing) vy = jumpForce; // タイミング型の場合
  y += vy;
}

蓄積型ならpressingがtrueの間だけゲージを増やし、falseになった瞬間にゲージの値をアクションに変換します。切り替え型ならkeydownイベントでgravityの符号を反転させます。

ステップ4：失敗判定とリスタートを入れる

失敗条件に達したらゲームを止め、再度ボタンを押したら最初から始まる、というサイクルを入れます。

let gameOver = false;

function update() {
  if (gameOver) return;
  // 通常の更新処理
  if (y > canvas.height || y < 0) {
    gameOver = true;
  }
}

document.addEventListener('keydown', (e) => {
  if (e.code === 'Space' && gameOver) {
    resetGame();
  }
});

リスタートを「同じボタンで行う」ことで、プレイヤーは手を動かさずにすぐ再挑戦できます。これはワンボタンゲームの体験として自然な流れです。

失敗しやすいポイントと対策

難易度の調整を後回しにしない。 変化の速度や障害物の間隔は、作っている本人には簡単に感じがちです。初めてプレイする人に試してもらう前に、速度の数値を変数として外に出しておき、すぐ調整できる状態にしておきます。

フィードバックが薄い。 ボタンを押したとき、画面や音で「何かが変わった」と伝えられないと、操作している実感が持てません。視覚的な変化（色・エフェクト・揺れ）を少なくとも一つ入れます。Web Audio APIを使えば、コードを数行追加するだけで押したときの音が鳴らせます。

スコアがないと上達が見えない。 何秒生き残ったか、何点取ったかを画面に表示することで、次回への目標ができます。ハイスコアをローカルストレージに保存するだけでも、繰り返しプレイの動機になります。

モバイルでの誤タップ。 タッチデバイスでプレイすると、スクロールが発生してゲームが中断されることがあります。touchstartとtouchmoveでevent.preventDefault()を呼び、ページのスクロールを止めておきます。ただし、これを使うにはaddEventListenerの第3引数で{ passive: false }を指定する必要があります。

完成後の公開と磨き方

ゲームが動くようになったら、単一のHTMLファイルとして書き出せる状態か確認します。外部ファイルへの参照がある場合はZIPにまとめ、画像や音声を同梱します。アソバースではHTMLファイルとZIPファイルの両方を直接投稿できるため、完成したらそのままアップロードして公開できます。

公開後は、プレイされた結果をもとに難易度を見直します。ワンボタンゲームは仕組みが単純なぶん、数値の微調整が体験に直結します。最初の公開はあくまで「プレイヤーに触れてもらうための第一版」として、フィードバックを得てから改善するサイクルを回すのが現実的です。

次の行動

まず構造（タイミング型・蓄積型・切り替え型）を一つ選び、「変化し続けるもの」と「ボタンが変えるもの」を1行ずつ言葉で書き出してから、コードを書き始めてください。設計が言葉で言い切れない段階でコードに進むと、途中で迷子になりやすくなります。完成したゲームはアソバース（https://aso-verse.com）にHTMLまたはZIPで投稿し、実際に遊んでもらいながら磨いていきましょう。