端午节互动网站

端午节互动网站

项目介绍

这是一个基于 Vue 3 + Vite 开发的端午节主题互动网站，旨在通过有趣的交互方式展示中国传统端午节文化。网站包含三个主要功能模块：端午节介绍、互动包粽子游戏和龙舟竞赛游戏。

预览网站：https://duanwujiekuaile.infinityfreeapp.com/

项目截图

桌面端展示

1. 首页展示

精美的动画效果和传统文化展示

2. 端午习俗介绍

丰富的端午节知识轮播展示

3. 互动游戏

| 包粽子游戏| 互动式包粽子体验 |

| 龙舟竞赛 |实时龙舟竞速游戏 |

移动端适配展示

主要功能展示

首页	端午习俗	龙舟竞赛

|

| 响应式首页设计 | 传统文化展示 | 移动端赛龙舟 |

包粽子游戏展示

制作界面	成就系统

|

| 触屏包粽子互动 | 粽子制作成就 |

响应式设计特点

• 自适应布局，完美支持各种屏幕尺寸
• 触屏优化的交互体验
• 优化的移动端性能
• 适配不同设备的游戏控制方式
• 移动端专属界面设计

功能特性

1. 首页 - 端午节介绍

• 精美的动画展示
• 传统习俗介绍
• 端午节知识轮播
• 动态水波纹和云朵动画效果
• 响应式设计，适配各种设备

2. 包粽子游戏

• 互动式包粽子体验
• 成就系统
• 等级进度展示
• 详细的包粽子教程
• 动画效果反馈

3. 龙舟竞赛

• 实时竞速游戏
• 键盘控制操作
• AI对手竞争
• 计分系统
• 难度选择
• 水面动画效果

技术栈

• Vue 3
• Vite
• CSS3 动画
• JavaScript ES6+

安装说明

1. 克隆项目

git clone https://gitee.com/ilovemashang/duan-wu.git
cd my-vue-app

2. 安装依赖

npm install

3. 本地开发

npm run dev

4. 项目打包

npm run build

5. 预览打包结果

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: [[e-mail]]
• Gitee: [https://gitee.com/ilovemashang/duan-wu.git]
• Github:[https://github.com/wmuj/duan-wu.git]

致谢

感谢所有为项目提供帮助和建议的贡献者。