互動與遊戲 2026 人工智慧 互動與遊戲
// SYS 官方專案 現場展覽
2.5D
by gamolor
// project_overview
這是一款融合「上帝俯視視角」與「橫向側面視角」的 2.5D 平台遊戲。 障礙物不僅有 X/Y 平面,還有 Z 軸高度屬性,玩家必須善用兩種視角的切換,理解空間結構、避開陷阱、抵達終點。
// tech_stack
JavaScript HTML5 Canvas Supabase Vercel
// keywords
# game # 2.5d # perspective-shift # level-editor # interactive
幫這個專案投票!
// project_details
2.5D 遊戲介紹
一、 操作方式
通用操作
WASD:移動角色E:切換上帝俯視/橫向側面視角
上帝俯視模式
WASD:前後左右移動滑鼠滾輪:縮放視野(編輯模式)
橫向側面模式 (Sideview)
A/D:向左/向右移動W:跳躍S:蹲下(可通過低矮通道)
編輯器操作
Ctrl+C:複製選取的障礙物Ctrl+V:貼上障礙物Ctrl+Z:復原滑鼠右鍵拖曳:平移畫布滑鼠滾輪:縮放畫布
二、 視角系統
本遊戲的核心機制是雙視角即時切換:
- 上帝俯視視角
從正上方俯瞰關卡,適合規劃路線、觀察障礙物之間的相對位置與出口方向。特色機制:在此模式下,浮空障礙物若高於角色頭頂,角色可從下方穿越,並以虛線輪廓標示角色位置。
- 橫向側面視角
從側面觀察關卡,可清楚看到障礙物的高度、浮空平台的高低差以及角色與障礙物在垂直方向的相對位置。跳躍、蹲下、攀附等垂直動作僅在此模式可用。
三、 障礙物系統
- 一般障礙物:可站立、攀附、阻擋移動。
- 浮空障礙物:在上帝視角中若高於角色頭頂,角色可直接從下方穿越。
- 岩漿障礙物:接觸即死。角色碰到岩漿會觸發死亡動畫(旋轉縮小、螢幕震動、紅色閃爍、驚嘆號氣泡)。若角色站在高台上,僅當岩漿高度 $\ge$ 平台高度時才會致死。
四、 關卡系統
- 主線關卡
內建多個主線關卡,從Level 0教學關到Level 4+進階關卡。教學關透過對話框引導玩家熟悉 WASD、視角切換與跳躍操作。後期關卡引入浮空平台、岩漿陷阱、高低差地形等挑戰。 - 過關條件
每個關卡設有綠色出生點與黃色終點出口。角色抵達黃色終點即過關,自動進入下一關。 - 社群自訂關卡
透過 Supabase 雲端資料庫,玩家可上傳自訂關卡,也可瀏覽與下載其他玩家創作的關卡。
五、 關卡編輯器
內建「所見即所得」的關卡編輯器,支援以下強大功能:
- 雙模式編輯:可在上帝視角與側面視角之間切換編輯,從不同維度調整障礙物位置與屬性。
- 障礙物操作:
- 放置:選擇放置模式,在畫布上拖曳產生方塊。
- 選取:點選障礙物以選取。
- 拖曳:拖曳選取的障礙物移動位置。
- 縮放:拖曳選取障礙物的四個角落以調整尺寸。
- 設定屬性:調整寬度、深度、高度、顏色、類型。
- 出生點與終點:可直接拖曳綠色出生點與黃色終點出口位置。
- 測試關卡:編輯完成後點擊「測試關卡」,立即在遊戲中遊玩。
- 複製貼上:使用快捷鍵
Ctrl+C/Ctrl+V快速複製障礙物。
六、 製作資訊
- 開發者:快龍
- 技術架構:HTML5 Canvas + JavaScript
- 資料庫:Supabase (PostgreSQL)
- 部署平台:Vercel
- 遊戲網址:https://25dg.vercel.app
// Comments
載入留言…
// similar_projects
■互動與遊戲
■互動與遊戲
■工具與自動化


