回想起最初接觸雲開發的那段時間，我出於練手的目的，開發了一款基於 HTML 的簡易槍戰遊戲。當我滿懷期待地將其展示給玩家時，沒想到卻被一句點評當場“點醒”了：這不就是打地鼠的升級版嘛？雖然當時聽了有些哭笑不得，但不得不承認，這位玩家的評價確實一針見血，讓我意識到遊戲設計在玩法創新上的不足。

在那之後，我又親自重新體驗了一遍遊戲，結果不得不承認，那位玩家的評價確實中肯：玩法的確和“打地鼠”如出一轍。於是，藉着這次騰訊雲在雲開發能力上的進一步提升，我決定挑戰自己，在本地開發出一個更加進階的版本——一個 3D 的第一人稱射擊（FPS）網頁槍戰遊戲。

本項目完全用於學習和技術體驗，遊戲中的所有元素僅供開發參考與實踐使用，嚴禁用於任何商業用途。

接下來就正式介紹一下這個項目的具體情況：

本項目是一個基於 React + Vite 構建的第一人稱射擊網頁小遊戲，融合了 騰訊雲 CloudBase 的雲開發能力，完整實現瞭如下功能：

• 用户註冊與登錄
• 分數實時記錄與同步
• 實時排行榜展示
• 簡單的 3D 場景與射擊機制

項目旨在為前端開發者提供一個實踐 React 技術棧與雲開發服務的完整參考案例，同時也具備一定的娛樂性，適合用於前端學習、雲開發探索以及閒暇時間的趣味體驗。

所有代碼均已開源，歡迎使用：https://github.com/StudiousXiaoYu/fps-game

體驗地址：https://xiaoyu-0g6ev0ep0c5bbcbf-1302107156.tcloudbaseapp.com/

技術棧與功能概覽

前端框架：
本項目採用了現代前端技術棧，具體包括：

• React 18：構建組件化頁面結構與邏輯交互
• Vite 4：實現快速開發與構建優化
• Tailwind CSS：高效實現響應式界面與自定義樣式

雲開發能力：
藉助 騰訊雲 CloudBase，實現了以下雲端功能：

• 靜態網站託管：一鍵部署網頁端遊戲資源，快速上線
• 雲數據庫：用於存儲用户分數與排行榜信息，支持實時查詢與更新

主要功能亮點：

• 本地持久化的用户名登錄：用户首次進入遊戲可設置用户名，後續自動識別，無需頻繁登錄
• 第一人稱射擊體驗：遊戲內支持 3D 視角操作，配有豐富的音效與模型資源，提升沉浸感
• 實時排行榜功能：玩家得分實時上傳雲端，排行榜同步更新，全員可見
• 雲數據庫驅動的數據持久化：所有分數均存儲在 CloudBase 數據庫中，確保數據安全、穩定
• 響應式設計支持：界面適配 PC 與移動端，隨時隨地暢玩

更多的項目啓動、玩法信息我就不多説了，都在開源倉庫內，大家自行查看即可。

環境準備

關於這個項目是如何開發的，這裏我簡單為大家梳理一下流程。

首先，你需要準備一個騰訊雲 CloudBase 雲開發環境。目前 CloudBase 仍處於開發體驗階段，但提供的功能對於本項目來説已經足夠使用。開通方式非常簡單，按提示操作即可，無需過多配置。

接下來，你還需要選擇一款支持 MCP 工具集成 的開發 IDE。這裏我使用的是 Cursor（一款集成 AI 能力的現代開發工具），當然你也可以選擇 VS Code 或其他支持 MCP 插件的工具，這裏就不展開講了。

之所以強調要集成 MCP，是因為項目的本地代碼在開發完成後，需要一鍵部署到騰訊雲的線上環境中。而這個部署過程——完全免費，也正是 CloudBase 雲開發的優勢之一。

為此，我們使用的是 CloudBase AI Toolkit 工具，它集成了 CloudBase 平台的大部分核心能力。整個開發過程中，我使用最多的功能包括：

• ✅ 雲數據庫操作（用於存儲用户分數和排行榜信息）
• ✅ 雲端部署（將本地項目一鍵部署上線）
• ✅ 日誌與排錯查詢

倉庫地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit

文檔地址：https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/

開始開發

CloudBase AI Toolkit 是騰訊雲推出的一款 AI 編程輔助工具，支持在 Cursor、VSCode、Copilot、Claude 等 IDE 中，自動生成可部署的 Web、小程序等全棧應用，並一鍵發佈到騰訊雲開發 CloudBase。

CloudBase AI ToolKit

CloudBase AI Toolkit 支持兩種開發方式，開發者可按需選擇：

✅ 方式一：使用項目模板

前往官方模板庫 CloudBase AI Toolkit 模板，下載所需模版後，直接在本地開始開發，開箱即用、集成良好。

🔧 方式二：集成現有項目

在已有項目中集成 CloudBase AI Toolkit，僅需配置 MCP 即可接入自動部署能力（具體配置步驟見下方説明）。
本項目已採用此方式，IDE 中已完成 MCP 配置，便於直接開發與發佈。

{
    "mcpServers": {
      "cloudbase-mcp": {
        "command": "npx",
        "args": ["-y", "@cloudbase/cloudbase-mcp@latest"]
      }
    }
}

配置完成後，系統即可正常運行，相關界面和功能顯示如下圖所示，供參考。

為避免後續部署過程中出現阻塞問題，我們建議首先完成登錄操作，如下圖所示：

授權

接下來，只需在瀏覽器中點擊“授權”按鈕，即可完成操作。最終效果如下圖所示：

到這裏，我們的運行環境已經基本搭建完成，後續即可開始使用或部署相關功能。

雲開發數據庫

接下來將進入 AI 編程部分，這一階段完全由我們自主進行，用於優化 FPS 槍戰網頁的性能與體驗。如下圖所示：

創建一個FPS 射擊遊戲 - 功能清單

核心功能

用户系統：用户名登錄，本地持久化，登錄校驗
FPS 遊戲：第一人稱視角，鼠標鎖定，3D 場景
武器系統：AK-47 3D 模型，30發彈匣，換彈動畫，後坐力效果
敵人系統：5個自動移動敵人，擊敗後重生，射線檢測命中
音效系統：背景音樂、射擊音效、命中音效、音效開關
視覺效果：爆炸粒子動畫、彈孔效果、準星動畫

🎮數據功能

分數系統：實時計分，擊敗敵人得分
排行榜：雲端排行榜，分頁顯示，分數排序
雲數據庫：user_score 集合存儲用户分數
數據同步：分數實時上傳，歷史分數加載

這裏面的槍的模型、音樂都需要我們手動上傳上去，這個過程很長，這裏就不一一贅述了，我們直接跳過。我們直接看下使用到雲開發能力的效果吧，如圖所示：

遊戲的核心功能已經開發完成，但由於玩家之間缺乏數據交互，單人體驗顯得較為單調。因此，我們進一步利用雲開發提供的數據庫能力，由 AI 助手協助完成相關集成工作。

在此過程中，AI 調用了雲開發官方提供的 SDK 與 API，依據預設規則逐步生成代碼，無需我們手動干預數據庫的接入細節。具體實現過程如下圖所示：

當 AI 助手完成代碼編寫後，系統即可直接運行並呈現效果。此時，排行榜功能已成功接入並可以正常使用，無需額外配置或調整。具體運行結果如下圖所示：

接下來，我們進入雲開發後台，在“數據庫”模塊中可以直觀地查看到已存儲的數據信息，驗證排行榜功能的數據寫入是否成功。如下圖所示：

但需要注意的是，排行榜功能存在一個關鍵問題：默認情況下，數據庫權限設置可能限制用户只能讀取自己的數據。

為了實現排行榜的共享展示效果，我們必須修改數據庫的讀取權限，允許所有用户訪問相關數據。具體的權限配置操作如下圖所示：

部署上線

最後，完成上述配置後，我們可以通過命令或語音指令向 IDE 發出“將此項目部署到雲開發”的指令。

系統將自動識別項目結構，執行編譯流程，並調用 CloudBase AI ToolKit 的能力完成部署與發佈。相關的自動化流程如下圖所示：

項目監控

在項目上線後，我們可以通過雲開發後台實時查看各類運行數據，包括數據庫的讀寫請求量、頁面訪問量等關鍵指標。這些監控數據有助於我們評估系統性能並及時發現潛在問題。

總結

這次開發旅程不僅讓我重新審視了最初的創意，也讓我在實踐中不斷打磨技術細節，從一個簡單的 HTML 遊戲，到如今具備完整用户系統、實時排行榜和 3D 射擊體驗的網頁 FPS 遊戲，見證了雲服務集成方面的成長。通過騰訊雲 CloudBase 和 AI ToolKit 的輔助，我深刻體會到現代雲開發帶來的便利與效率，也更加理解了“技術為創意賦能”的真正含義。希望這個開源項目能為更多開發者帶來靈感，無論是學習、練習，還是探索更具交互性和挑戰性的遊戲創作。

感謝你讀到這裏，歡迎提出建議、共同優化，也歡迎 fork 與二創，一起把這個遊戲做得更好！