プロダクト一覧へ戻る

A MAZE!

2026年 分野:ゲーム・プログラミング

プロダクト A MAZE!

動作環境  Web

解  説  このプログラムは、迷路ゲームを通しプログラミングの基礎を学べる教材です。

画面にはタイトル、迷路、制限時間、操作ボタンが配置され、ボタンを押すと新しい迷路を自動生成します。迷路は一定の規則に従って作られており、「順序立てて処理すること」や「条件によって動作を変えること」を解析しながら理解できます。

また、タッチやマウスで軌跡を描く機能、時間切れ時の表示、答えを示す機能などを通じて、座標、反復処理、条件分岐、イベント処理といったプログラミングの重要な考え方を学ぶことができます。

プログラム構造

① UI構造(HTML + CSS)

  • タイトル「A MAZING」
  • 迷路表示用 キャンバス
  • ボタン(新しい迷路/答え/軌跡消去)
  • タイマー表示
  • ポップアップ(Time Over)
  • ② 状態管理(変数群)

    cells, solutionPath, trail generating, gameOver, cleared remainSeconds, timerId

    ③ 迷路生成ロジック

    generateMazeAnimated()

  • セル配列を作成
  • DFS(深さ優先探索)で通路生成
  • 3秒かけてアニメーション化
  • ④ 描画処理(Canvas)

    draw()

  • 外枠
  • 壁
  • 入り口/出口
  • 解答ルート(緑)
  • 軌跡(オレンジ)
  • 生成中表示
  • ⑤ イベント処理(操作)

    pointerStart / pointerMove / pointerEnd

  • 指やマウスの動きを取得
  • 軌跡を記録
  • ゴール判定