前言

大家好！提到“遊戲化交互”，大家腦子裏是不是立馬浮現出複雜的後端服務、龐大的數據庫設計，還有令人頭禿的狀態機管理？

説實話，這種“重後端”的架構往往讓我們望而卻步——我只是想給活動頁加個劇情小遊戲，或者給入職引導做個互動，真的需要動用這麼大陣仗嗎？

今天，我們換個思路。如果不寫後端，只用前端技術和華為雲的 DevUI MateChat 組件，能不能“搓”出一個高大上的 AVG（文字冒險）引擎？

答案是肯定的！而且我們還要更進一步：不僅要輕量化，還要把現在最火的生成式 AI 給接進去！

我將帶大家打破常規，利用 MateChat 強大的組件能力，在純前端環境下構建一個“輕狀態”敍事引擎。完整代碼我已經放到了 GitCode 倉庫： https://gitcode.com/kaminono/MateChatStoryEngine ，大家也可以直接點這個 https://mate-chat-story-engine.vercel.app/ 實際上手玩玩看！

一、 破局：從“用組件”到“玩生態”

平時大家用 UI 組件庫，可能習慣了“拿·來主義”——需要聊天窗口，就引入一個組件，傳點數據進去完事。

但在華為雲 DevUI 的生態裏，MateChat 可不只是個聊天框，它更像是一個超級容器。這次，我們不滿足於簡單的 API 調用，而是要玩點高級的——生態共建。

我們直接 Fork 了 MateChat 的源碼，在其 Playground 環境中通過“搭積木”的方式構建場景。這麼做有什麼好處？

首先，我們不需要從零搭建項目腳手架；其次，我們是在驗證 MateChat 架構的極限——看看它能不能從一個“客服助手”搖身一變，成為“遊戲引擎”。

當你把代碼跑起來的那一刻，你不僅是一個使用者，更是一個 MateChat 生態的貢獻者，這種成就感是完全不一樣的！

二、 架構：靜態腳本與 AI 的“混合雙打”

做遊戲最怕什麼？怕卡頓，怕加載慢。為了保證體驗，我們設計了一套“混合驅動”的策略。

冷啓動階段，我們直接讀取本地的 JSON 劇本。這能確保用户打開頁面的瞬間，精美的開場圖和劇情文字就能“秒開”，完全沒有網絡延遲的煩惱。

探索階段，好戲上演了——我們把控制權交給 AI。

你可能會問：“前端怎麼控制 AI 的輸出格式？” 別急，這裏有個 Prompt Engineering 的小技巧。我們在前端構造了一個 System Prompt，強制要求大模型返回我們規定的 JSON 格式。

大家看看下面這段核心代碼 useAIGameEngine.ts，重點就在那個 systemPrompt 裏：

// playground/src/avg-game/composables/useAIGameEngine.tsconst fetchAIStory = async (userAction: string) => {
  // 咱們給 AI 下個“死命令”：必須吐出 JSON，別給我整 Markdownconst systemPrompt = `
    你是一個文字冒險遊戲的 DM (地下城主)。
    當前玩家揹包: [${inventory.value.join(', ')}]。
    玩家操作: "${userAction}"。
    
    請嚴格返回以下 JSON 格式，不要包含 markdown 標記：
    {
      "content": "劇情描述(50字左右)",
      "options": [
        { "label": "選項1", "action": "簡短意圖" },
        { "label": "選項2", "action": "簡短意圖" }
      ],
      "loot": "如果獲得物品則填物品名，否則 null"
    }
  `;

  // 直接在前端調用大模型 API (注意：Demo 環境下咱們把 Key 存在本地 Storage 裏)const res = await fetch(`${baseUrl}/chat/completions`, {
    body: JSON.stringify({ messages: [{ role: 'system', content: systemPrompt }] })
  });
  
  // 拿到數據，轉成對象，直接驅動 UI 渲染！const storyData = JSON.parse(res.data.choices[0].message.content);
  currentNode.value = storyData;
};

通過這種方式，前端組件壓根不需要知道數據是 AI 寫的還是腳本寫的，它只管渲染就行。這就是邏輯與渲染的完美解耦。

三、 界面：告別 div 堆砌，擁抱原子組件

以前寫頁面，大家可能習慣了一層套一層的 div。但在 MateChat 的世界裏，咱們得按“套路”出牌。

為了讓界面看起來更專業，我全面採用了 MateChat 提供的原子組件——McLayout、McHeader、McBubble 等等。

我把佈局設計成了“左側儀表盤 + 右側舞台”的雙欄結構。左側用 DevUI 的基礎組件做狀態展示（比如揹包、AI配置）；右側則是遊戲的主舞台。

來，看看我們在 GameLayout.vue 裏是怎麼“組裝”這些積木的：

<template><McLayout class="avg-game-container"><McHeader title="MateChat 故事引擎" :logo-img="logoUrl"><template #operationArea><div class="stage-status">{{ loading ? 'AI 正在構思...' : 'AI 就緒' }}</div></template></McHeader><McLayoutContent class="game-flow-content"><template v-for="msg in messages" :key="msg.id"><div v-if="msg.type === 'game_node'" class="game-card-wrapper"><StoryCard 
            :node="msg.data" 
            :inventory="inventory"
            @select="onCardSelect"
          /></div><McBubble 
          v-else 
          :content="msg.content" 
          :align="msg.role === 'user' ? 'right' : 'left'"
        ></McBubble></template></McLayoutContent><McLayoutSender>...</McLayoutSender></McLayout></template>

這種“組件套組件”的寫法，不僅代碼看着清爽，而且自動適配了移動端。不論你在手機還是電腦上打開 Demo，體驗都非常絲滑。

四、 交互：輸入框變身“指令終端”

聊聊底部的輸入框。在普通聊天裏，它只能用來打字。但在我們的遊戲引擎裏，這可是“指令終端”。

MateChat 的 McInput 組件提供了一個超好用的 extra 插槽。我利用這個插槽，在輸入框底下加了一排快捷按鈕。

你想“重置遊戲”？想“查看揹包”？不用敲命令，點一下按鈕就行。當然，如果你想和 AI 自由對話，直接在輸入框裏打字也沒問題。

<McInput 
  :value="inputValue" 
  placeholder="輸入指令或與 AI 對話..." 
  @submit="onInputSubmit"
><template #extra><div class="sender-actions"><div class="quick-btns"><d-button icon="icon-refresh" @click="resetGame">重置</d-button><d-button icon="icon-search" @click="checkBag">揹包</d-button></div><div class="char-count">{{ inputValue.length }}/1000</div></div></template></McInput>

這樣一來，這個輸入區域就成了一個集對話、控制、反饋於一體的超級樞紐，交互效率直接拉滿。

五、 總結：低代碼，大潛力

折騰這一圈，我們得到了什麼？

首先是快。因為沒有後端，靜態劇情的響應速度是毫秒級的，用户體驗極佳。

其次是省。得益於 MateChat 完善的組件生態，我幾乎沒寫什麼複雜的 CSS，代碼量比從零開始少了 60% 以上。

最後是強。通過簡單的配置，我們就把生成式 AI 的能力接進來了，讓遊戲有了無限的可能性。

這套方案不僅是自己玩玩，它在商業上也非常有潛力。無論是做企業的入職培訓引導，還是電商大促的互動遊戲，甚至是教育領域的模擬陪練，這套架構都能直接拿來用。

希望這個項目能給大家一點啓發：原來 MateChat 還能這麼玩！如果你也對這種前端主導的智能交互感興趣，歡迎來 GitCode 給項目點個 Star，我們一起把這個引擎做得更強！

附官網鏈接：

DevUI

MateChat - 輕鬆構建你的AI應用