3D Maze Game

概要

3D Maze Gameは、Three.jsを使った授業成果物として制作した3D迷路探索ゲームです。プレイヤーは迷路内を移動し、敵を避けたり攻撃したりしながら、制限時間内にゴールを目指します。

公開ページは https://3dmazegame.takumi-tokunaga.com/ で、ブラウザからそのまま体験できます。

主な機能

• W/S による前進・後退、A/D による左右旋回
• Space、左クリック、モバイル用ボタンによる攻撃・壁破壊
• HP、残り時間、アイテム数を表示するHUD
• 探索済み範囲、敵、アイテムを表示するミニマップ
• 視線が通ったときに追跡する簡単な敵AI
• 壁破壊、HP回復、時間延長のアイテム

技術構成

フロントエンドはThree.js、TypeScript、Viteで構成しています。迷路の壁や床は3Dメッシュとして描画し、同じ形状の壁は InstancedMesh を使って描画負荷を抑えています。

ゲーム本体はブラウザだけで完結し、サーバー側APIは使っていません。Cloudflare Pagesで静的ファイルとして配信し、GitHub Actionsから dist/ をdirect uploadする構成にしています。

設計で重視したこと

授業で学んだ3D表現を、単なる表示サンプルではなく、実際に操作できる成果物としてまとめることを重視しました。

3D画面だけでは現在位置や状態が分かりにくいため、ミニマップとHUDを用意しています。敵AI、アイテム、制限時間を入れることで、短時間でもゲームとして成立する体験を目指しました。

公開・運用

公開ページはCloudflare Pagesで配信しています。main ブランチへのpushを起点に、GitHub Actionsで型チェック、ビルド、Pagesへのデプロイを実行します。

関連する制作メモはZennにもまとめています。