Skip to content

craig7351/zombie-survivors

Repository files navigation

殭屍大逃殺 Zombie Survivors 🧟

3D 倖存者類(Vampire Survivors-like)roguelite。操控一名倖存者(或狗狗、海盜),在無盡殭屍潮中自動開火、撿經驗升級、三選一強化武器。兩種模式:劇情模式依序擊敗 7 隻殭屍王破關、死鬥模式無盡波數比誰撐最高。低面數美術、跨平台(桌機鍵鼠 + 手機觸控),含 全球排行榜/即時在線人數+歷史圖表/留言板(Cloudflare D1 後端,離線自動回退本機)。

線上試玩:https://zombie-survivors-e4y.pages.dev 介紹網站:https://craig7351.github.io/zombie-survivors/

殭屍大逃殺 遊戲畫面

📺 遊玩影片

殭屍大逃殺 遊玩影片

🖼️ 遊戲畫面

📱 手機畫面


🎮 玩法

  • 角色自動朝最近的殭屍攻擊,玩家只負責走位升級選擇
  • 撿地上的經驗寶石 → 升等 → 從 3 個隨機升級中挑 1 個(每次升級回復 30% 生命)。
  • 每 15 秒地圖生成寶箱(開啟給 10 秒隨機增益)與回血道具
  • 劇情模式:每 30 秒登場一隻殭屍王,各有專屬招式;擊敗第 7 隻 → 破關
  • 死鬥模式:無盡波數,怪物隨波越來越強;每 5 波一隻王(Boss Rush),連殺有經驗加成、升級不設上限,撐到死為止比波數。
  • 死亡或破關後依存活時間與擊殺數結算金幣,回主選單可解鎖角色與購買永久強化(roguelite meta,存於 localStorage)。

💀 死鬥模式機制

  • 波數爬升:每 30 秒一波,怪物血量/速度/傷害與密度持續上升(第 20 波後更陡)。
  • 每波突變子(每 3 波隨機):⚡狂暴/🥚脆皮潮/🗿巨人化/🔥爆裂/🧫分裂潮/💀菁英潮/🧟爬行潮。
  • 菁英怪:更大更壯、掉更多經驗。
  • 🩸 血潮:定時 20 秒高密度狂暴時段,畫面轉紅、音樂轉急,撐過給寶箱。
  • ⚖️ 祝福/詛咒:定時跳出二選一(有得有失,如傷害大增但減傷下降)。
  • 連殺 Combo:不被打的連殺提升經驗獲取,受擊歸零。

操作

桌機 手機
移動 WASD/方向鍵 左下虛擬搖桿
跳躍(騰空可閃避接觸傷害) 空白鍵 右下「跳躍」鈕
視角 左鍵拖曳旋轉、滾輪縮放 單指拖曳、雙指縮放
暫停 ESC 右上 ⏸
畫質 / 靜音 右上下拉 / 🔊
攻擊 自動 自動

移動為相機相對(轉動視角後上下左右會跟著畫面走)。

流程與頁面

  • 首頁:末日風格落地頁(漂浮多邊形背景)。需先輸入暱稱才能開始;顯示目前遊玩人數(即時)、本機累積統計(場次/時間/擊殺)與同時在線最高。五顆按鈕:▶ 遊戲開始/🏆 排行榜/🧟 怪物圖鑑/💬 留言板/📈 線上人數。
  • 模式選擇:按「遊戲開始」後選 🧟 劇情 或 💀 死鬥。
  • 難度選擇:再選 5 種難度之一(死鬥模式為起始強度)。
  • 角色選擇:8 個角色即時 3D 預覽(播 idle、自轉)+ 詳細介紹;含永久強化商店。
  • 排行榜:全球排行(Cloudflare D1),分 🧟劇情(破關榜/生存榜)與 💀死鬥(比分數),皆可依難度分頁過濾;抓不到後端時回退本機。
  • 怪物圖鑑:7 種殭屍 + 7 隻王的模型縮圖與招式說明。
  • 留言板:全球留言(D1),暱稱與排行榜共用。
  • 線上人數:每小時最高同時在線的歷史長條圖(24 小時/7 天/30 天)。

🎚️ 難度(按「遊戲開始」後選擇)

難度 怪物血量 接觸傷害 王血量 金幣獎勵
😀 簡單(預設) ×1 ×1 ×1 ×1
🙂 普通 ×1.5 ×1.3 ×1.5 ×1.5
😬 困難 ×2.2 ×1.6 ×2.2 ×2.2
😱 夢魘 ×3.5 ×2 ×3.5 ×3.5
💀 地獄 ×5 ×2.6 ×5 ×5

難度同時影響敵人移速與隨時間的成長速率。


🔫 武器與升級

升級共 25 種;每次升級從尚未滿級者隨機抽 3 個。

主武器(子彈,5):⚔️攻擊力(8)・⚡攻速(8)・🎯多重彈(4)・🔭射程(5)・💨彈速(5)

額外武器(5,皆 10 階,吸血鬼倖存者風格)

  • 🪓 環繞飛斧 — 旋轉斧頭繞身碰撞傷害(升級 +1 把並擴大環繞範圍)
  • 🌀 傷害光環 — 周身持續灼燒範圍
  • 連鎖閃電 — 定期電擊最近敵人並鋸齒連鎖
  • 💥 新星爆 — 定期向外擴張的範圍衝擊波
  • 🪃 回力鏢 — 長矛飛出再飛回、沿途貫穿

群控(3):❄️減速光環・🐌時緩(全場永久減速)・🧊冰凍彈

防禦/續航(4):🩸吸血(每秒回血有上限)・❤️‍🩹生命再生・🛡️護甲(減傷,上限 70%)・🔆能量護盾(定期擋一次)

進攻修飾(3):💥暴擊・🎯穿透・🧨爆裂彈

被動(5):👟移動速度・🦘跳躍強化・❤️最大生命・🧲拾取範圍・⭐經驗加成

🧟 殭屍王(依序登場,打完第 7 隻即破關)

# 招式
1 巨胖殭屍 蓄力衝撞
2 狂暴肋骨怪 骨刺連射
3 斷臂巨怪 震地波
4 腐毒殭屍 毒池
5 海盜船長 手槍掃射
6 巨鯊 高速衝咬
7 深海觸手(最終王) 深海彈幕(全方位)

雜兵 7 種:基本殭屍、肋骨怪(快速)、胖殭屍(坦克)、斷臂殭屍、骷髏兵(不死)、無頭骷髏(遠程射手)、爬行殭屍(趴地爬行)。怪群的移動動作(快跑/擺臂跑/邊跑邊砍/走路)會隨機混搭。

🐕 角色(各有不同起始攻擊)

角色 起始攻擊 特性 解鎖
🔫 麥特 強化單發子彈 均衡,適合新手 預設
🧲 尚恩 環繞飛斧 拾取廣、升級最快 💰200
👟 莉絲 三連發散射 高速、脆皮 💰300
⚡ 山姆 極速連射 輸出爆發、略脆 💰300
🐶 巴哥犬 傷害光環 肉盾、血厚 💰350
🐕 德國狼犬 連鎖閃電 機動風箏、射程長 💰400
💥 砲手安妮 新星爆 範圍轟炸、清群強 💰400
🦈 鯊牙馬可 高暴擊(30%) 暴擊爆發 💰450

僅麥特預設解鎖,其餘以金幣於商店解鎖。


🛠️ 技術

  • Vue 3<script setup>)+ TypeScript
  • Babylon.js 9 — 3D 場景、模型、骨架動畫、粒子、輝光(GlowLayer)
  • Vite + Tailwind CSS v4
  • Web Audio 程式合成音效與背景音樂(零音檔);背景音樂 4 首隨擊敗王數自動切換(暗潮→獵殺→肅殺→狂亂)
  • 畫質高/中/低切換(右上下拉,即時生效):調整算繪解析度、抗鋸齒、發光、可視距離;不影響玩法數值
  • 後端:Cloudflare Pages Functions + D1(SQLite) 提供全球排行榜(劇情/死鬥分流+反作弊)/累計統計/即時在線+每小時歷史/留言板;同源 /api、全部 fail-soft(離線回退本機)
  • 進度/本機排行存於 localStorage;部署於 Cloudflare Pages

模型最佳化

  • 所有模型以 Draco 壓縮為二進位 .glb(37MB → 9.6MB,玩家首次下載省約 26MB)。
  • Draco 解碼器自帶public/draco/(同源,不依賴外部 CDN),於 src/main.ts 設定。
  • 重壓模型:pnpm dlx @gltf-transform/cli draco in.gltf out.glb(已加為 devDependency)。

效能架構

  • 子彈/經驗寶石/地面以 thin instances 單一 draw call 繪製(SoA 型別陣列)。
  • 怪海採少量全動畫殭屍池(預先 instantiate、循環啟用),兼顧動畫與效能。
  • 空間雜湊網格做鄰近查詢(分離、命中、接觸),避免 O(n²)。
  • 投射物、經驗寶石、血跡貼片、王彈幕皆採物件池重用。
  • 受擊白光用 per-mesh renderOverlay,不影響共用材質的其他單位。

🚀 開發與部署

pnpm install
pnpm dev      # 開發伺服器(--host,手機可連區網)
pnpm build    # vue-tsc 型別檢查 + vite 建置
pnpm preview  # 預覽 build 結果

# 部署(Cloudflare Pages,含 functions/ 後端)
pnpm build
npx wrangler pages deploy dist --project-name=zombie-survivors --branch=main

# D1 資料表(首次/變更時)
npx wrangler d1 execute <db-name> --file=./schema.sql --remote

SPA 轉址由 public/_redirects 處理(/* /index.html 200);D1 綁定見 wrangler.jsonc

📁 專案結構

src/
├─ game/
│  ├─ game.ts          # 主迴圈:玩家、相機、生成導演、碰撞、升級、王、道具、音樂分段
│  ├─ zombie-horde.ts / enemy-system.ts  # 全動畫殭屍怪群(動畫池)、敵人邏輯
│  ├─ weapon-system.ts # 自動子彈(飛刀 thin instance)
│  ├─ extra-weapons.ts # 環繞飛斧/光環/閃電/新星/回力鏢
│  ├─ boss.ts          # 7 隻王與招式狀態機
│  ├─ boss-hazards.ts  # 王招式對玩家的傷害實體(彈幕/震波/毒池)
│  ├─ upgrades.ts      # RunState 與 25 種升級表
│  ├─ characters.ts / meta.ts / difficulty.ts  # 8 角色、roguelite meta、5 難度
│  ├─ deathmatch.ts                      # 死鬥無盡參數、突變子、計分
│  ├─ leaderboard.ts / api.ts            # 本機排行/統計、後端 API(排行榜/在線/留言)
│  ├─ terrain.ts / ground-decals.ts      # 地面(柏油材質)、馬路與地面貼片
│  ├─ effects.ts / sound.ts / decals.ts  # 粒子、音效+背景音樂、血跡
│  ├─ spatial-grid.ts / obstacles.ts     # 空間網格、障礙碰撞
│  ├─ quality.ts                         # 畫質(高/中/低)設定
│  ├─ character-previews.ts / model-thumbs.ts  # 選單即時預覽 / 圖鑑縮圖
│  └─ model-loader.ts / gem-system.ts / input.ts / config.ts
├─ components/         # landing / mode / difficulty / leaderboard / bestiary / message-board / online-history / menu / hud / game-view / 各 modal
└─ App.vue
functions/api/         # Pages Functions:run / leaderboard / stats / heartbeat / online / online-history / messages
public/
├─ models/zombie/      # Draco 壓縮 .glb 模型(角色、殭屍、武器、道具)
├─ draco/              # 自帶 Draco 解碼器
└─ _redirects          # SPA fallback
schema.sql             # D1 資料表(runs / stats / presence / online_hourly / messages)
docs/                  # 介紹網站(GitHub Pages,/docs)

頁面流程:landingmode(模式)→ difficultymenu(角色選擇)→ game;另有 leaderboardbestiarymessagesonlineHistory 分頁。

📝 更新紀錄(Changelog)

版本與更新紀錄的單一來源在 src/changelog.ts;首頁第一次進入(或版本號變動後)會自動跳一次更新彈窗,點標題的版本徽章可隨時重看。發新版只要在 CHANGELOG 陣列最前面新增一筆,首頁徽章與彈窗會自動更新。

v2.0 — 死鬥模式登場

  • 💀 全新「死鬥模式」:無盡波數,怪物越來越強,比誰撐到最高波。
  • 🌊 每 30 秒一波、每 5 波一隻王(Boss Rush)。
  • 🎲 每波隨機突變子(狂暴/脆皮潮/巨人化/爆裂/分裂潮/菁英潮/爬行潮)、🩸 血潮狂暴時段、⚖️ 祝福/詛咒二選一、🔥 連殺加成、升級不設上限。
  • 🏆 死鬥獨立排行榜(比波數分數),與劇情榜分流。
  • ✨ 新增爬行殭屍、怪群移動動作多樣化、首頁線上人數歷史圖表、模型 Draco 壓縮(載入更快)。

更早的演進(換皮歷程、全球後端、排行榜難度等)詳見 git 紀錄與 GAME.md


🎨 素材

3D 模型取自第三方低面數模型包(角色、殭屍、武器、場景道具),實際使用的檔案以 Draco 壓縮後放在 public/models/zombie/。原始素材包置於 download/,已 gitignore、不納入版控。換皮做法詳見 GAME.md

About

3D版殭屍大逃殺~

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages