返回作品列表
網頁遊戲 · AI 整合 v2.1 可線上玩

佛光尋光

Seeking the Light · 三好之旅 AI 互動視覺小說

用真誠的話語與行動點亮三顆寶石,由 AI 判定你的回應是否合乎「做好事、說好話、存好心」。一款結合傳統視覺小說與 Google Gemini 語意判定的純前端互動敘事遊戲。

立即遊玩

在瀏覽器直接開始,無需安裝。建議使用桌機 Chrome / Edge,並備妥自己的 Gemini 金鑰以獲得最佳判定體驗。

類型
純前端網頁遊戲
技術
Vanilla HTML5 / CSS3 / JavaScript
AI
Google Gemini(自動偵測可用模型)
版本
2.1(模型自動偵測、金鑰生命週期)
我的角色
程式開發、AI 整合
授權
MIT
佛光尋光記 遊戲畫面
遊戲簡介

當視覺小說,遇上 AI 語意判定

「佛光尋光記:三好之旅」結合傳統視覺小說與 AI 語意判定,是一款以佛光大學「三好」精神為核心的互動敘事遊戲。玩家在校園故事中遇到各種情境,用自己的話自由輸入回應,由 AI 評估這份回應是否展現出真誠與善意,藉此實踐「做好事、說好話、存好心」。

它不是預設選項的選擇題,而是讓玩家真實表達——這也是整個遊戲設計上最核心的取捨。

同樣的善意可以有很多種表達方式,重點在是否發自內心、是否具體,而非用字是否華麗。
三顆寶石

身、口、意,三種善的展現

第一章 · 大一

善行之石

做好事 · 身

在校園情境中,以實際行動幫助他人,體會純粹的善意無需回報。

第二章 · 大二

慧語之石

說好話 · 口

在溝通的場合展現禮貌與尊重,感受語言能建立的溫暖連結。

第三章 · 大四

淨念之石

存好心 · 意

在畢業的感恩時刻,發自內心地真誠祝福,體會善念是一種生活態度。

遊戲流程

一段從新生到畢業的旅程

序章

接受使命

在新生訓練中遇見星雲大師的精神化身,獲得一塊空白石板,展開尋找三好之石的旅程。

第一章 · 大一

做好事 — 善行之石

同學找不到 AirPods Pro 很著急,用實際行動回應。

第二章 · 大二

說好話 — 慧語之石

到課外活動組繳交企劃書,在校園事務的往來中,練習禮貌而尊重的溝通。

第三章 · 大四

存好心 — 淨念之石

在畢業典禮的感恩時刻,獻上真誠的祝福。

結局

覺悟圓滿

三顆寶石合一,領悟三好精神的真諦。

※ 每章由 AI 依該章對應的三好面向,評估玩家回應是否真誠、具體。遊戲刻意不提供標準答案——重點不在用字是否華麗,而在是否發自內心。

技術亮點

純前端,卻把 AI 整合做得很完整

01 雙模式 AI 引擎

主要使用 Google Gemini 進行語意分析,理解複雜語境與情感意圖、給予個性化回饋;無金鑰時自動降級為本地正則比對模式,離線也能體驗。

02 模型自動偵測(v2.1)

透過 ListModels 自動挑選當下可用的模型(偏好 flash-lite / flash 等免費友善模型),Google 更新或淘汰模型時無需改程式;偵測結果快取 24 小時,遇 404 自動清快取重新偵測。

03 金鑰只存在你的瀏覽器

API 金鑰一律由玩家自行輸入。「在此裝置記住金鑰」存 localStorage30 天自動清除);「僅本次瀏覽期間」存 sessionStorage(關閉即清,適合共用電腦)——不寫進原始碼、不上傳伺服器。

04 透明的錯誤處理

API 失敗時依 400 / 403 / 404 / 429 顯示明確原因並自動切換本地模式;遇 404 會自動清快取重新偵測,對被安全機制攔截的空回應也有防呆。

05 貼上金鑰的輸入清洗

自動清除貼上時夾帶的空白、換行、看不見的控制字元等雜質——使用者不用擔心「明明複製對了卻無法用」的情況,這種瑣事直接由程式吸收。

技術規格:HTML5 + CSS3 + Vanilla JavaScript(無框架、無依賴);響應式設計支援桌機 / 平板 / 手機(5 組 media query);含背景音樂、角色語音與音效;localStorage 存檔系統(單一存檔槽)。支援 Chrome / Firefox / Safari / Edge 90+ 與行動裝置瀏覽器。

給老師的判定說明

刻意不提供標準答案

每章的關卡會請學生自由輸入自己的回應,由 AI(Gemini)依該章對應的「三好」面向評估回應是否展現出真誠與善意,並給予個別化回饋。沒有單一標準答案——同樣的善意可以有很多種表達方式,重點在是否發自內心、是否具體,而非用字是否華麗。(若未設定金鑰,會改用本地的正則比對作備援,準確度較低,僅供離線體驗。)

章節三好面向AI 主要看的是
第一章 做好事 身 · 善行之石 是否展現主動幫助的具體行動與同理心,而非冷漠、推託或嘲諷。
第二章 說好話 口 · 慧語之石 是否展現禮貌、尊重與感謝的溝通,而非命令、敷衍或無禮。
第三章 存好心 心 · 淨念之石 是否展現真誠的善念與祝福、不求回報,而非交易心態或冷淡。

引導學生的建議(不破梗):鼓勵具體、重視真誠、完整表達;每個關卡有「提示」按鈕但不給答案;把重點放在課後帶學生討論「為什麼這樣回應是三好的展現」,這才是價值所在。

本遊戲適合品德教育、新生訓練、團體討論教材與遊戲式學習實驗。歡迎教育工作者使用並提供反饋。

專案規模

數字一覽

~3,200
程式碼行數
32
故事節點
29
圖片資源
27
音訊資源
5
響應式斷點
製作分工

技術 × 內容的協作

許彧銘(我)
程式開發 · AI 整合

遊戲引擎、故事節點系統、雙模式 AI 判定、Gemini API 整合與模型自動偵測、金鑰生命週期管理、存讀檔與響應式實作。

許慧柔
文案 · 語音 · 美術

故事文案撰寫、角色與場景圖像、角色語音等內容創作(非程式部分)。

本專案結合佛光大學三好精神與現代教育理念,採 MIT 授權,適合用於品德教育、新生訓練與遊戲式學習。

版本紀錄

從 2.0 到 2.1,體驗細節的打磨

2.1
  • 移除 config.js金鑰一律改由使用者在網頁上輸入,不再依賴設定檔。
  • 模型自動偵測:透過 ListModels 自動挑選當下可用的模型,Google 更新或淘汰模型時無需修改程式;遇到 404 會自動清快取並重新偵測。
  • 金鑰生命週期:「在此裝置記住金鑰」(localStorage,30 天自動清除)與「僅本次瀏覽期間」(sessionStorage,關閉瀏覽器即清除);選單新增「重新設定 API 金鑰」可隨時更換或清除。
  • 錯誤訊息透明化:依 400 / 403 / 404 / 429 顯示明確原因,並對被安全機制攔截的空回應加上防呆。
  • 輸入清洗與文件修正:自動清除貼上金鑰時夾帶的空白 / 換行;README 全面更正為 Google Gemini(原誤植為 Anthropic Claude)。
2.0
  • AI 互動版首次整合,雙模式(AI / 本地)語意判定。
立即遊玩 · Play Now

在瀏覽器裡,走一趟三好之旅

無需安裝、開啟即玩。準備好自己的 Google Gemini 金鑰(免費方案即可),就能體驗最完整的 AI 判定;沒有金鑰也能用本地模式離線體驗。

開始遊玩
在 GitHub 檢視原始碼 →