中式像素風涼茶煲製互動頁面
本項目是一個以中式涼茶文化為主題的互動網頁,採用像素美術風格,支持藥材拖拽、煲茶動畫、配方檢測與收穫提示。用戶可自由組合藥材,體驗煲製涼茶的樂趣,並學習各種經典配方。
- 技術棧:React + TypeScript + Vite + TailwindCSS + react-dnd
- 特色:
- 藥材拖拽交互
- 煲區火焰/蒸汽動畫
- 進度條與收穫提示
- 配方自動檢測與說明
- 像素美術界面
- "leung-cha" 為粵語「涼茶」的拼音,代表廣府地區的草本茶文化。
- 安裝依賴:
npm install- 啟動開發伺服器:
npm run dev- 打開瀏覽器訪問
http://localhost:5173。
- 拖拽藥材至藥壺,點火煲製
- 進度條、火焰、蒸汽動畫
- 再次點擊爐熄火倒茶
- 茶碗、茶壺動畫
- 配方自動檢測,命中配方顯示名稱與功效
- 未命中配方自動命名「自制涼茶」
- 點擊茶碗服用涼茶
- 煲過的涼茶自動收錄
- 涼茶文化愛好者
- 像素美術愛好者
- 前端技術學習者
歡迎提出建議、報告問題或提交 PR。
- 音效:因時間緊迫暫未實現,未來希望完善煲茶、倒茶、服用等互動音效。
MIT
