這次我們來看的不是一個新模型也不是一個開源框架而是一個用 vibe coding 方式完成的紀念項目13 天從零搓了一個致敬經典網游《QQ華夏》的“掛機版”網頁 Demo。先說清楚“掛機版”三個字的邊界本文講的是放置類玩法的本地單機小游戲角色自動打怪、自動升級、自動掉裝備數據存本地和真實網游服務器沒有任何連接。它不是外掛不讀取真實游戲客戶端也不碰任何在線游戲賬號。想做這種類型練手的同學可以放心往下看。項目核心就一個詞vibe coding。也就是用自然語言向 AI 編程助手描述需求讓 AI 持續生成、修改、重構代碼開發者在旁邊做設計、審查、驗證。整個項目不追求工程復雜度重點是快速把“懷念老網游”的需求變成可運行的網頁應用。最終交付是一個純前端為主的掛機游戲頁面配合一套簡單接口服務做存檔和日志瀏覽器打開就能玩。這個項目的核心特點可以歸納為幾條開發周期極短、對話式開發驅動、玩法即代碼、數據和配置全部可見、不需要高配顯卡。它對硬件幾乎沒有要求普通筆記本就能跑部署方式以本地 Node 服務和靜態頁面為主。下面我會把整個 vibe coding 工作流拆開項目怎么拆、AI 怎么用、代碼怎么組織、上線前要檢查哪些合規點、踩坑怎么排查。如果你最近關注 vibe coding 這個概念想找一個“非圖像生成”方向的完整案例這篇文章可以直接收藏。我們會從項目設計一路聊到本地啟動、功能驗證、迭代調試和常見問題內容偏實戰不堆概念。1. 核心能力速覽能力項說明項目類型vibe coding 開發的放置類網頁小游戲 Demo開發方式自然語言對話驅動AI 編程助手輔助生成與迭代運行方式本地靜態頁面 輕量 Node/Flask 服務瀏覽器訪問核心玩法自動戰斗、自動升級、裝備掉落、背包管理、離線收益數據存儲瀏覽器 LocalStorage 或本地 JSON 文件硬件門檻無 GPU 要求普通筆記本即可運行啟動方式命令行啟動本地服務或直接打開靜態頁面是否支持 API支持本地接口用于存檔、日志、任務查詢是否支持批量任務不支持批量任務適合單人單頁交互適合讀者想了解 vibe coding 實戰流程、做游戲原型、練手全棧開發的同學注意表里的參數是通用描述不是某一套固定代碼的規格。具體功能邊界取決于你給 AI 的提示詞和項目裁剪方式后面會講怎么控制范圍。2. 適用場景與使用邊界先聊清楚這個項目適合誰不適合誰。適合的場景有三類。第一類想在短時間跑通一個完整交互應用驗證“把想法變成產品”的流程vibe coding 是很好的練習載體。第二類對老網游有情懷想低成本做一個致敬玩法的小 Demo而不是去玩真實服務器。第三類想把 AI 編程助手用于個人項目但平時只寫 CRUD 或腳本想找一個帶游戲邏輯、帶界面、帶存檔的相對復雜例子練手。不適合的場景也要說清楚。如果你追求生產級架構、需要多人協作、要上線上運營這類項目不能直接當成正式產品如果項目要長期維護AI 生成的代碼會出現大量不一致人手重構的成本并不低如果涉及真實網游的自動化、數據修改、協議模擬那就不是 vibe coding 的問題而是合規和賬號安全問題本文不討論也不建議做。合規方面有兩條硬要求。第一素材版權。致敬老網游不等于搬運原版素材角色、地圖、音樂盡量用原創或可商用資源不要直接把原游戲美術資源打包進個人項目避免侵權。第二如果后續想公開發布演示建議注明非官方、非商業、僅供學習不得讓用戶產生“這是正版游戲模擬器”的誤解。涉及“掛機”玩法時還要在項目說明里講清楚這是單機 Demo請勿用于破壞任何在線游戲公平性或繞過反作弊機制。3. vibe coding 工具鏈與開發準備vibe coding 不是一個工具而是開發模式。這里給出我梳理的完整工具鏈和前置準備。3.1 核心工具組合AI 編程助手主流的選擇包括 Cursor、Windsurf、Copilot 或國內模型的代碼對話能力。這里不推薦某一個重點是你用它來生成代碼、解釋報錯、重構邏輯。瀏覽器現代瀏覽器運行頁面調試推薦 Chrome / Edge。本地服務Node.js 環境或者 Python 環境二選一即可。編輯器如果你用的 AI 助手是基于 VS Code 的需要先裝 VS Code如果是獨立 IDE按官方文檔準備。代碼托管本地 Git 足夠遠程倉庫看個人習慣。3.2 環境檢查清單啟動項目前先把基礎環境檢查一遍# Node.js 版本檢查 node -v npm -v # Python 環境檢查如果選擇 Flask 做接口 python --version # 如果項目需要 Git 管理 git --version如果你的機器已經有成熟的 Node 或 Python 環境可以直接跳過如果都沒有建議先裝 Node.js LTS 版本。整個項目對 CUDA、顯卡驅動、深度學習框架沒有依賴不用裝任何 GPU 方案。3.3 如何給 AI 描述需求這是 vibe coding 的核心技能。第一把需求拆成最小可運行版本例如“先做一個網頁顯示角色等級、血量、攻擊力每秒自動攻擊一只怪”。第二要求 AI 一次只實現一個功能閉環不要一次性讓它生成三五個模塊。第三給 AI 描述數據結構例如“角色對象包含 name, level, exp, hp, attack, defense”它可以順著數據結構生成邏輯。第四遇到問題把報錯信息原文復制給 AI不要自己描述為“頁面壞了”。下面是一個最小提示詞模板請用 HTML CSS JavaScript 寫一個放置掛機游戲的最小頁面 1. 頁面中央顯示角色信息包括名稱、等級、經驗值、血量、攻擊力、防御力。 2. 每秒鐘自動攻擊一只怪物怪物血量為角色的3倍攻擊力固定。 3. 擊敗怪物后獲得經驗值和隨機金幣。 4. 升級后攻擊力和防御力有成長。 5. 界面要干凈使用單文件 index.html不要依賴外部庫。這樣的提示詞足夠具體AI 可以直接生成可運行代碼。后續迭代時再把新增需求追加為新的提示詞例如“在角色信息下方顯示背包擊敗怪物時 30% 概率掉落裝備”。4. 項目設計與模塊拆解vibe coding 容易失控尤其是一個項目寫到后面AI 會不斷疊加功能代碼越來越亂。所以動手前先做模塊設計哪怕是很粗的模塊劃分也能讓 AI 生成時少走彎路。4.1 功能模塊劃分一個放置掛機 Demo 可以拆成下面這些模塊模塊作用負責人角色系統屬性、經驗、升級AI 生成 手動校驗戰斗系統自動攻擊、怪物生成、戰斗結算AI 生成 手動校驗裝備系統掉落、背包、屬性加成AI 生成 手動校驗存檔系統本地保存、讀取、重置AI 生成 手動校驗前端界面頁面布局、數據展示、按鈕交互AI 生成 手動調整樣式日志系統戰斗日志、掉落日志AI 生成 手動校驗4.2 數據結構設計在給 AI 寫提示詞之前先把核心數據定義好。這樣每個模塊生成時AI 會沿用同一套結構避免變量名來回變。我這里提供一套示例// 角色數據模型 const player { name: 懷念者, level: 1, exp: 0, expToNext: 100, hp: 100, maxHp: 100, attack: 10, defense: 3 }; // 怪物數據模型 const monster { name: 試煉獸, hp: 30, maxHp: 30, attack: 5, rewardExp: 10, rewardGold: 5 }; // 背包數據 const backpack { items: [], capacity: 20 };這套數據模型足夠支持早期版本。后續要加離線收益就再擴展一個離線收益字段例如offlineSeconds和offlineRewardMultiplier。4.3 玩法閉環設計放置游戲的核心是“閉環”角色自動打怪 → 獲得經驗金幣 → 升級變強 → 打更強的怪。把這個閉環寫清楚AI 生成時就不會出現邏輯斷裂。我建議在項目根目錄放一個README.md把玩法規格寫清楚AI 編程助手在理解需求時可以直接讀取這個文件比每次對話里解釋更高效。README 內容可以參考# HometownAFK暫定名 一個致敬經典 MMORPG 風格的放置掛機網頁 Demo。 玩法閉環 1. 角色自動攻擊場景中的怪物戰斗間隔為 1 秒。 2. 擊殺怪物后獲得經驗值和金幣。 3. 經驗值滿后角色升級攻擊力、防御力、最大血量提升。 4. 怪物擊殺時有 20% 概率掉落裝備裝備可裝備到角色身上。 5. 裝備影響角色屬性屬性面板實時更新。 技術說明 - 前端HTML CSS JavaScript使用一個單頁應用。 - 存檔使用 localStorage。 - 離線收益暫不做后續迭代。這份 README 是整個 vibe coding 項目的“需求錨點”每次 AI 跑偏就把 README 丟回去讓它糾正。5. 本地部署與啟動方式這個 Demo 啟動方式非常簡單本質是兩類文件靜態頁面和可選的后端服務。5.1 純靜態頁面啟動如果項目只包含index.html、style.css、app.js可以直接雙擊index.html打開。不過這樣做有一個缺點瀏覽器讀寫 localStorage 沒問題但如果后續要加日志導出、接口服務還是會有限制。更穩妥的方式是用本地靜態服務器。# 進入項目目錄 cd hometown-afk # 用 npx 啟動靜態服務器端口可改 npx serve . -l 3000啟動后訪問http://localhost:3000在界面上能看到角色信息面板每秒有戰斗日志輸出說明游戲循環已經跑起來了。5.2 Node 服務啟動如果項目包含存檔接口和日志接口可以用一個簡單的 Express 服務。這里給出一個通用模板實際端口和路由需要按你自己的項目調整// server.js // 這是一個最小可運行的本地服務示例 const express require(express); const app express(); const PORT 3001; app.use(express.json()); // 存檔接口 app.post(/api/save, (req, res) { const saveData req.body; // 項目里可將數據寫入 JSON 文件或內存 console.log(保存存檔, saveData); res.json({ code: 0, message: saved }); }); // 讀取存檔接口 app.get(/api/load, (req, res) { res.json({ code: 0, data: null }); }); // 日志接口 app.post(/api/log, (req, res) { const log req.body; console.log(收到日志, log); res.json({ code: 0 }); }); app.listen(PORT, () { console.log(服務已啟動http://localhost:${PORT}); });啟動命令npm init -y npm install express node server.js這樣頁面前端和接口服務就打通了。前端代碼里用fetch(/api/save)調用即可開發階段建議打開瀏覽器控制臺查看網絡請求狀態。5.3 Flask 服務啟動如果你更熟悉 Python也可以用 Flask 做同樣的接口。這里給一個通用模板from flask import Flask, request, jsonify app Flask(__name__) app.route(/api/save, methods[POST]) def save(): data request.get_json() print(保存存檔, data) return jsonify({code: 0, message: saved}) app.route(/api/load, methods[GET]) def load(): return jsonify({code: 0, data: None}) app.route(/api/log, methods[POST]) def log(): data request.get_json() print(收到日志, data) return jsonify({code: 0}) if __name__ __main__: app.run(host127.0.0.1, port5000, debugTrue)啟動命令pip install flask python app.py注意這里只是通用模板不是某個具體項目的真實接口代碼實際字段名要以你自己的項目數據結構為準。如果你不需要接口直接跑靜態頁面也完全沒問題。6. 功能測試與效果驗證vibe coding 最容易出現的問題是“頁面能開但邏輯不對”。所以每完成一個功能模塊就要做一輪功能驗證。下面列出核心測試用例。6.1 自動戰斗測試測試目的確認戰斗循環是否能每秒觸發一次并正確結算。輸入打開頁面等待 5 到 10 秒。操作打開瀏覽器開發者工具F12切換到 Console 面板。觀察是否有monster defeated或戰斗日志輸出。查看角色經驗值是否隨時間增加。預期結果角色經驗值在 5 秒內至少增加一次Console 沒有報錯。判斷標準戰斗日志穩定輸出經驗值持續增長。失敗排查Console 報錯player is not defined說明變量作用域有問題提示 AI 把 player 改為全局對象或 window 上下文。沒有日志輸出說明setInterval沒有啟動檢查定時器代碼是否在頁面加載后執行。6.2 升級屬性成長測試測試目的確認經驗值滿后能觸發升級并重新計算攻擊力、防御力、最大血量。輸入手動調整角色經驗值或降低升級所需經驗。操作在 Console 執行player.exp 90; player.expToNext 100;。等待戰斗結算讓經驗值超過升級閾值。預期結果角色等級從 1 升到 2攻擊力、防御力按成長公式增加。判斷標準升級日志出現屬性面板數值同步變化。失敗排查升級后屬性沒變說明成長公式沒有放到levelUp函數里檢查升級邏輯。經驗值超過閾值但沒升級說明觸發條件寫成了exp expToNext應改為exp expToNext。6.3 裝備掉落與背包測試測試目的確認擊殺怪物后有概率掉落裝備裝備進入背包并可以裝備。輸入將掉落概率臨時調高到 0.9。操作在源碼中把dropRate 0.2臨時改為dropRate 0.9。等待若干次戰斗觀察背包容器是否出現新裝備。點擊裝備確認角色屬性面板變化。預期結果多次戰斗后至少掉落一件裝備點擊裝備后屬性生效。判斷標準背包有新增 item裝備后攻擊力或防御力發生變化。失敗排查有掉落日志但沒有出現在背包說明掉落寫入邏輯和背包渲染邏輯斷開檢查backpack.items.push()和renderBackpack()調用關系。點擊裝備沒反應可能是事件綁定落在了動態生成的 DOM 上改用事件委托。6.4 存檔讀取測試測試目的確認關閉瀏覽器后重新打開角色數據能恢復。輸入先讓角色升級到 2 級等待幾秒再關閉頁面。操作Console 執行saveGame()。確認 localStorage 有saveData字段。刷新頁面觀察角色等級和背包是否恢復。預期結果刷新后角色等級、經驗、背包物品不變。判斷標準localStorage 中有存檔數據頁面加載時讀取并重建角色狀態。失敗排查刷新后數據丟失說明沒有在window.onload里調用loadGame()。localStorage 寫入時報錯可能是數據量超過限制或瀏覽器禁用了本地存儲。6.5 長掛穩定性測試測試目的確認長時間運行沒有內存泄漏或卡頓。輸入保持頁面運行 1 小時以上或至少 30 分鐘。操作打開 Chrome 任務管理器Shift Esc。觀察頁面內存占用是否有持續增長。觀察 Console 是否出現頻繁報錯。預期結果頁面內存穩定在合理范圍Console 沒有錯誤刷屏。判斷標準運行一段時間后界面仍能每秒正常刷新戰斗日志沒有中斷。失敗排查內存持續增長通常是戰斗日志沒做截斷需要限制日志條數例如只保留最近 50 條。頁面越來越卡可能是 DOM 節點累積檢查渲染函數是否每次做全量更新改成增量更新。7. vibe coding 迭代與調試技巧vibe coding 和傳統開發的差異在哪里就是“需求變更由對話驅動代碼由 AI 生成人類做驗收和維護上下文”。所以迭代調試的核心是讓 AI 始終掌握全局上下文。7.1 保持對話上下文不要每加一個功能就新開一個對話。如果 AI 編程助手支持會話持久化盡量在同一會話里持續描述需求。這樣 AI 記得之前的代碼約定不會重復生成同名函數或改變數據結構。7.2 用報錯信息喂 AI遇到 bug最有效的做法是復制完整報錯堆棧。比如Uncaught TypeError: Cannot read properties of undefined (reading hp) at fightLoop (game.js:45:20)把這段直接發給 AI并附加當前代碼片段AI 通常能定位到是monster.hp依賴了未初始化的monster對象然后給出修復建議。7.3 小步提交隨時回滾vibe coding 項目會經常出現“AI 改了 A 功能結果 B 功能崩了”。為了能快速回退推薦每完成一個完整功能就做一次 Git 提交git add . git commit -m feat: 完成自動戰斗閉環如果 AI 改亂了直接回滾到上一個可用版本git reset --hard HEAD注意git reset --hard HEAD會丟棄當前所有未提交修改執行前確認沒有需要保留的代碼。7.4 限制單次改動范圍給 AI 的提示詞里面盡量用“在現有代碼基礎上增加……”而不是“重構整個項目”。比如“在現有 game.js 基礎上增加一個離線收益函數讀取 saveData.lastSaveTime 和當前時間差按分鐘計算獎勵經驗。”這樣 AI 知道是增量修改不會推倒重來。8. 資源占用與性能觀察這個項目屬于輕量網頁應用資源占用不高但仍有兩個觀察點瀏覽器 CPU 占用和本地服務的進程資源。8.1 瀏覽器資源占用放置游戲每秒執行一次戰斗循環正常情況下 CPU 占用很低。如果打開頁面后風扇狂轉、CPU 占用超過 30%大概率是渲染寫得太粗。常見問題包括每秒全量重繪整個 DOM、大量 console.log、無限循環。觀察方法打開開發者工具 Performance 面板。點擊 Record記錄 10 秒運行情況。查看 long task 和 JS 執行耗時。如果確實存在渲染瓶頸優先讓 AI 做一個優化將戰斗日志限制為最近 30 條角色面板和背包面板的數據更新按模塊拆開而不是每次全部重繪。8.2 本地服務資源占用啟動 Node 或 Flask 服務后可以用任務管理器或命令行查看進程占用。# Linux / macOS ps aux | grep node # Windows tasklist | findstr node如果發現多個 node 進程殘留通常是開發時反復啟停服務導致建議全部結束后重新啟動pkill node # 或者 Windows 下直接結束相關進程8.3 端口沖突處理服務啟動失敗最常見的報錯是port 3001 is already in use。處理方式# 查看端口占用進程 lsof -i :3001 # 殺掉占用進程PID 換成實際輸出 kill -9 PID也可以直接換一個端口啟動避免沖突。開發時建議把端口寫在配置項里比如.env文件或config.js這樣反復調整方便。9. 常見問題與排查方法問題現象可能原因排查方式解決方案頁面打開是白屏JS 報錯導致未渲染打開 Console 查看報錯把完整報錯喂給 AI定位代碼位置并修復角色不自動戰斗setInterval 未啟動或循環中斷檢查 Console 是否有 error檢查 fightLoop 函數是否定義在 window.onload 中初始化并啟動 fightLoop經驗值不增長擊殺判定邏輯錯誤在 Console 手動調用 monster.takeDamage檢查戰斗結算條件確認使用 而不是 掉落裝備但背包不顯示渲染函數未在數據變化后調用Console 檢查背包數組是否已 push在 push 后調用 renderBackpack()刷新后存檔丟失未調用 loadGame檢查 localStorage 是否有數據在頁面啟動時加載存檔服務端口被占用其他進程占用端口使用 lsof / netstat 查看端口結束占用進程或換端口啟動AI 改完功能后其他功能崩了沒有版本回滾查看 Git 提交記錄git reset 回滾到最近可用版本長時間運行頁面卡頓DOM 節點累積或日志過多Performance 面板分析限制日志條數優化渲染頻率接口返回 404路由寫錯或服務未重啟檢查路由定義訪問 /api/xxx修改路由后重啟服務瀏覽器提示存儲空間不足localStorage 存了太多數據檢查存檔數據大小清理舊日志壓縮存檔字段這套排查思路也適用于任何 vibe coding 生成的前端小應用核心就一句話先看控制臺報錯再定位數據類型和渲染順序最后讓 AI 針對局部代碼做修復。10. 最佳實踐與使用建議從 13 天的開發過程里我總結了幾條對 vibe coding 項目最實用的建議。第一項目起步時不要貪功能。第一天的工作目標就是“角色面板出現并自動攻擊”只要這個閉環跑通后續所有功能都是在上面疊加。如果一開始就把裝備、副本、技能、商店全部寫進提示詞AI 生成的代碼大概率會在第 3 個功能開始互相干擾。第二用 README 和結構化數據模型作為團隊的“公共知識庫”。這里的“團隊”就是你和 AI。數據結構、玩法規格、技術棧寫清楚之后AI 每次修改代碼都會遵循這些約定不會產生第二個變量命名體系。第三設計一個“驗收腳本”。每完成一輪功能手動跑一遍測試并在 README 里記錄結果例如自動戰斗通過升級成長通過背包系統通過存檔系統通過這樣每次修改后可以快速回歸直接看之前的記錄再點一遍能省很多時間。第四注意 AI 生成內容的版權和許可證。vibe coding 出來的代碼可能混用了開源庫和 AI 訓練語料中的代碼模式如果項目要公開發布或商用建議檢查這些依賴項的許可證并把 AI 生成代碼納入常規代碼審查。第五公開分享前做好合規檢查。如果項目名為“QQ華夏掛機版”建議在說明中明確注明“非官方、非商業、致敬向”并且不要在項目里使用原游戲的商業美術資源和音效素材。第六不要迷信 vibe coding 能替代編程能力。它能顯著降低從 0 到 1 的啟動成本但到了性能優化、模塊重構、安全處理這些環節你需要具備基本的代碼閱讀能力和系統思維。把 AI 當成一個“寫得很慢但不能理解的實習程序員”你作為工程師負責指引方向。11. 總結與下一步這個項目最值得嘗試的點就是把“我想做一個小游戲”這件事壓縮到 13 天里完成。vibe coding 的價值不在于免寫代碼而在于把想法到原型之間的反饋周期壓縮到分鐘級它能讓你把精力集中在“游戲玩得爽不爽”“界面交互順不順”這些問題上而不是被 JavaScript 語法和事件綁定擋住。如果你也要做類似的掛機游戲 Demo我建議先從第 6 節的 5 個測試用例開始。第一個應跑通的永遠是最小戰斗閉環它決定整個項目的骨架最容易踩的坑則是日志不截斷引發的內存問題以及 AI 重構時破壞舊功能導致的連鎖報錯這兩點在開發初期就會遇到。后續可以繼續擴展的方向包括離線收益計算、裝備詞綴隨機生成、多角色陣容、劇情事件文本生成甚至可以把戰斗數據導出成圖表做分析。每一步都可以用 vibe coding 去迭代重要的是保持項目節奏測試一個功能、提交一個版本、再進入下一個功能。如果你最近也在用 AI 編程助手做自己的小項目建議把這次的項目記錄成一份開發日志里面有需求變更、Bug 復現、AI 生成代碼的修改記錄。這些材料比最終成果本身更能體現 vibe coding 的真實工作方式。