涼茶鋪 (Herbal Tea Shop)

中式像素風涼茶煲製互動頁面

項目簡介

本項目是一個以中式涼茶文化為主題的互動網頁，採用像素美術風格，支持藥材拖拽、煲茶動畫、配方檢測與收穫提示。用戶可自由組合藥材，體驗煲製涼茶的樂趣，並學習各種經典配方。

• 技術棧：React + TypeScript + Vite + TailwindCSS + react-dnd
• 特色：
  • 藥材拖拽交互
  • 煲區火焰/蒸汽動畫
  • 進度條與收穫提示
  • 配方自動檢測與說明
  • 像素美術界面

命名說明

• "leung-cha" 為粵語「涼茶」的拼音，代表廣府地區的草本茶文化。

使用方法

1. 安裝依賴：

npm install

2. 啟動開發伺服器：

npm run dev

3. 打開瀏覽器訪問 http://localhost:5173。

Interactions

• 拖拽藥材至藥壺，點火煲製
• 進度條、火焰、蒸汽動畫
• 再次點擊爐熄火倒茶
• 茶碗、茶壺動畫
• 配方自動檢測，命中配方顯示名稱與功效
• 未命中配方自動命名「自制涼茶」
• 點擊茶碗服用涼茶
• 煲過的涼茶自動收錄

目標人群

• 涼茶文化愛好者
• 像素美術愛好者
• 前端技術學習者

聯絡與貢獻

歡迎提出建議、報告問題或提交 PR。

TODO

• 音效：因時間緊迫暫未實現，未來希望完善煲茶、倒茶、服用等互動音效。

License

MIT