home about projects profile
互動與遊戲 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 遊戲介紹


一、 操作方式

通用操作

  • W A S D:移動角色
  • E:切換上帝俯視/橫向側面視角

上帝俯視模式

  • W A S D:前後左右移動
  • 滑鼠滾輪:縮放視野(編輯模式)

橫向側面模式 (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