端午節互動網站
項目介紹
這是一個基于 Vue 3 + Vite 開發的端午節主題互動網站，旨在通過有趣的交互方式展示中國傳統端午節文化。網站包含三個主要功能模塊：端午節介紹、互動包粽子游戲和龍舟競賽游戲。
預覽網站：https://duanwujiekuaile.infinityfreeapp.com/
項目截圖
桌面端展示
1. 首頁展示
精美的動畫效果和傳統文化展示
2. 端午習俗介紹
豐富的端午節知識輪播展示
3. 互動游戲
| 包粽子游戲| 互動式包粽子體驗 |
| 龍舟競賽 |實時龍舟競速游戲 |
移動端適配展示
主要功能展示
| 首頁 | 端午習俗 | 龍舟競賽 |
|---|
|
| 響應式首頁設計 | 傳統文化展示 | 移動端賽龍舟 |
包粽子游戲展示
| 制作界面 | 成就系統 |
|---|
| 
| 觸屏包粽子互動 | 粽子制作成就 |
響應式設計特點
- 自適應布局，完美支持各種屏幕尺寸
- 觸屏優化的交互體驗
- 優化的移動端性能
- 適配不同設備的游戲控制方式
- 移動端專屬界面設計
功能特性
1. 首頁 - 端午節介紹
- 精美的動畫展示
- 傳統習俗介紹
- 端午節知識輪播
- 動態水波紋和云朵動畫效果
- 響應式設計，適配各種設備
2. 包粽子游戲
- 互動式包粽子體驗
- 成就系統
- 等級進度展示
- 詳細的包粽子教程
- 動畫效果反饋
3. 龍舟競賽
- 實時競速游戲
- 鍵盤控制操作
- AI對手競爭
- 計分系統
- 難度選擇
- 水面動畫效果
技術棧
- Vue 3
- Vite
- CSS3 動畫
- JavaScript ES6+
安裝說明
- 克隆項目
git clone https://gitee.com/ilovemashang/duan-wu.git
cd my-vue-app
- 安裝依賴
npm install
- 本地開發
npm run dev
- 項目打包
npm run build
- 預覽打包結果
npm run preview
項目結構
my-vue-app/
├── public/
├── src/
│ ├── assets/
│ │ ├── components/
│ │ │ ├── DragonBoatFestival.vue # 端午節主頁組件
│ │ │ ├── DragonBoatRace.vue # 龍舟競賽游戲組件
│ │ │ └── Zongzi.vue # 包粽子游戲組件
│ │ ├── App.vue # 主應用組件
│ │ ├── main.js # 應用入口
│ │ └── style.css # 全局樣式
│ ├── index.html
│ ├── package.json
│ └── vite.config.js
└── README.md
游戲操作說明
龍舟競賽
- 方向鍵：控制龍舟移動
- 空格鍵：加速
- 目標：在規定時間內到達終點，獲得最高分數
包粽子游戲
- 點擊互動：制作粽子
- 解鎖成就：達到不同級別
- 查看教程：學習包粽子步驟
部署說明
項目打包后，將 dist 目錄下的文件部署到任意靜態服務器即可。
瀏覽器支持
- Chrome (推薦)
- Firefox
- Safari
- Edge
開發團隊
- 設計與開發：[您的名字/團隊名]
許可證
MIT License
更新日志
v1.0.0
- 初始版本發布
- 實現基礎功能：端午節介紹、包粽子游戲、龍舟競賽
- 添加基礎動畫效果和交互
貢獻指南
歡迎提交 Issue 和 Pull Request 來幫助改進項目。
聯系方式
- Email: [1486459292@qq.com]
- Gitee: [https://gitee.com/ilovemashang/duan-wu.git]
- Github:[https://github.com/wmuj/duan-wu.git]
致謝
感謝所有為項目提供幫助和建議的貢獻者。
)
