はじめに

ブラウザ上でサクッと遊べるパズルアクションゲーム「イノシシの迷路ゲーム」を開発しました！

画面をタップして「りんご🍎」を置き、直進しかできないイノシシ🐗をゴール（🏁）まで導くゲームです。PCはもちろん、スマートフォンでもネイティブアプリのように快適に操作できるよう最適化しています。

👉 実際に遊んでみる（公開URL）

主な機能とゲーム性

ただの迷路ではなく、少しのアクション要素を盛り込んでいます。

1. 直進しかできないイノシシを誘導

イノシシの直線上にりんごを配置すると、壁にぶつかるまで一直線に猛突進します。りんごが見えない位置（壁の向こうなど）や斜めの位置には配置できず、赤いエラーエフェクトで視覚的にわかりやすくフィードバックを返します。

2. 「長押しでスロー＆ストップ」の直感アクション

ここがゲームの肝です。イノシシが突進している最中に画面を長押し（ホールド）すると、時間の流れが遅くなる「スローモード」が発動します。そして指を離すと、イノシシがその場で急ブレーキをかけてストップ（混乱状態）します。
このギミックを使うことで、本来なら行き過ぎてしまう場所で無理やり曲がるといった、アクションパズル的な攻略が可能になります。

3. 無限に遊べるマップ自動生成

序盤の5ステージは固定マップですが、それ以降は独自のアルゴリズムによる迷路の自動生成に切り替わります。ステージが進むごとにマップが少しずつ広くなっていきます。

技術スタック・実装の工夫点

フレームワークは使わず、HTML / Tailwind CSS / Vanilla JavaScript (Canvas API) の1ファイルのみで構築しています。

① Axiom Dynamics Core (ADC) による決定論的状態管理

ゲームの内部ロジックは、「巨視微視統合型・完全決定論的状態遷移システム（ADC）」という独自のフレームワークをベースに組んでいます。
イノシシの状態（REST, DRIVE, CONFUSED）や、りんごの配置状況、スローモードのオンオフなどを単一の state オブジェクトで厳密に管理し、意図しない挙動やバグを防いでいます。

② スマホブラウザに特化したイベントハンドリングとUI

Webブラウザ上でゲームを動かす際、スマホ特有の「スワイプで戻る」「ダブルタップでズーム」「スクロールしてしまう」といった挙動が非常に邪魔になります。
これを防ぐため、CSSで overscroll-behavior: none; touch-action: none; を指定した上で、JS側でも pointerdown や pointercancel イベントを細かく制御しています。

// スマホのデフォルト挙動を無効化しつつ、ゲームの入力を処理
canvas.addEventListener('pointerdown', (e) => {
    e.preventDefault();
    // ... スローモードの判定や、りんごの配置処理 ...
}, { passive: false });

window.addEventListener('pointerup', () => {
    if (ADC.state.slowModeActive) {
        // 指を離した瞬間にスロー解除＆イノシシをストップさせる
        ADC.state.slowModeActive = false;
        ADC.state.applePlaced = null;
        if (ADC.boar.phase === 'DRIVE') stopBoarAndConfuse();
    }
});

マウスでもタッチでも同じコードで動作し、直感的な操作感を実現しています。

③ 深さ優先探索（DFS）を応用した迷路生成アルゴリズム

自動生成ステージでは、単純な壁伸ばし法ではなく、スタックを用いたDFS（深さ優先探索）をベースにランダム性を加えたアルゴリズムを実装しています。

// 進行方向をランダムにシャッフルして掘り進める
const shuffledDirs = directions.sort(() => Math.random() - 0.5);
let moved = false;

for (const [dr, dc] of shuffledDirs) {
    const nextR = r + dr;
    const nextC = c + dc;
    // 2マス先が未開拓なら、間の壁を壊して進む
    if (/* 境界チェック */ && map[nextR][nextC] === 1) {
        map[r + dr / 2][c + dc / 2] = 0; 
        map[nextR][nextC] = 0;
        stack.push([nextR, nextC]);
        moved = true;
        break;
    }
}

さらに、生成された完璧な迷路に対して「ランダムに壁を少し壊す（抜け道を作る）」処理を後から実行することで、パズルとしての自由度を高めています。

④ パーティクルとカメラシェイク（Canvas描画）

イノシシが走る際の砂埃や、壁に激突したときの火花、カメラ（画面全体）が揺れる演出などをCanvasの context.translate と独自のパーティクル配列を用いて軽量に実装しています。

おわりに

「タップで誘導する」というシンプルな操作を突き詰め、スマホブラウザでも専用アプリのように気持ちよく動かせることを目標に開発しました。
後半の自動生成ステージはかなり歯ごたえがあるので、ぜひ「長押しスロー＆ストップ」を駆使して全ステージクリアを目指してみてください！

👉 イノシシの迷路ゲームを遊ぶ