https://laihao.vaserver.com/tarot.html?fbclid=IwY2xjawRBF8xleHRuA2FlbQIxMABicmlkETFNRzlhS0tkeWNyYWhrYmltc3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHhShVQM_xXrP3_t7gStWxg0CfnzRrElLZp0reya4rA0Ar07DXIIRYo3Bd0kq_aem_ES0rD3EoUI2AZyPJ40lUEQ

實作

只有前端
但是裡面可是充滿很多
可以算出神秘塔羅占卜內容
後面的專業知識

解釋程式碼
這是一份完整的單頁塔羅占卜 Web 應用程式，使用 HTML、CSS 和原生 JavaScript 實作，包含三步驟流程（輸入問題 → 抽牌 → 解讀），並內建 22 張大阿爾克那牌義資料庫與本地解讀引擎。

整體架構

程式碼分為三大區塊：

1. HTML 結構：定義三個主要面板（step1Panel、step2Panel、step3Panel），分別對應占卜的三個步驟。
2. CSS 樣式：使用深色神秘主題（深藍紫背景、金色點綴），搭配 Cinzel Decorative 與 Noto Serif TC 字體，並包含星星動畫、牌卡翻轉效果、響應式設計等。
3. JavaScript 邏輯：包含塔羅牌資料庫、牌陣設定、問題類型分類器、抽牌與翻牌互動、以及本地解讀引擎。

核心功能解析

塔羅牌資料庫（TAROT_DECK）

內建 22 張大阿爾克那（The Fool 到 The World），每張牌包含：

• id、英文名（en）、中文名（zh）、符號（symbol）
• 關鍵字陣列（keywords）
• 正位核心牌義（upright_core）與逆位核心牌義（reversed_core）

牌陣設定（SPREAD_CONFIG）

支援三種牌陣：

• 單張牌陣（single）：1 張牌，核心訊息
• 三張牌陣（three）：過去・現在・未來
• 凱爾特十字（celtic）：5 張深度解析（現況、挑戰、潛意識、近期能量、最終結果）

問題類型分類器（QUESTION_TYPES）

根據使用者輸入的問題關鍵字，自動分類為四種類型：

• love（感情）
• career（事業）
• growth（成長）
• general（一般）

每種類型有專屬的建議語庫（advicePool）與結語庫（closingPool），用於生成個人化解讀。

三步驟流程

1. Step 1：輸入問題與選擇牌陣

   • 使用者輸入問題（textarea）
   • 選擇牌陣（點擊 .spread-opt 觸發 selectSpread()）
   • 點擊「召喚牌卡」按鈕觸發 goToStep2()，驗證問題不為空後進入下一步

2. Step 2：抽取牌卡

   • 隨機洗牌並抽取對應數量的牌（Math.random() - 0.5）
   • 每張牌有 30% 機率為逆位（reversed: Math.random() < 0.3）
   • 使用者點擊牌背觸發 revealCard(i)，翻牌後顯示牌面資訊（正/逆位、名稱、符號）
   • 所有牌翻開後，顯示「解讀星象」按鈕

3. Step 3：命運解析

   • 點擊按鈕後顯示 2.5 秒載入動畫（loading-oracle）
   • 呼叫 generateTarotReading() 生成本地解讀
   • 渲染結果至 readingContent，包含每張牌的詳細解讀、整體解讀、行動建議與詩意結語

本地解讀引擎（generateTarotReading()）

此函數為核心邏輯，流程如下：

1. 根據問題關鍵字判斷問題類型（qType）
2. 為每張牌生成解讀：
   • 根據正/逆位選擇核心牌義
   • 根據牌陣位置加入情境語氣（如「這段過往的能量塑造了當下的你」）
   • 組合個人化解讀文字（80–120 字）與能量描述（20–30 字）
3. 生成整體解讀（150–200 字）：
   • 根據正逆位比例調整語氣
   • 加入問題類型專屬建議
   • 根據牌陣類型加入流暢解讀（如三張牌的「過去→現在→未來」流動）
4. 生成行動建議與詩意結語

其他功能

• 星星背景動畫：initStars() 生成 80 顆隨機位置與大小的星星，並套用 twinkle 動畫
• 重置功能（restart()）：清空狀態並回到 Step 1
• 響應式設計：針對手機與小螢幕調整牌卡大小、按鈕間距等

技術特色

• 純前端實作：無需後端伺服器，所有邏輯在瀏覽器執行
• 無外部 API：塔羅牌義與解讀邏輯完全內建
• 互動體驗：翻牌動畫、載入過場、星星背景，營造神秘氛圍
• 可擴展性：可輕鬆新增小阿爾克那牌組或更多牌陣類型