端午节互动网站 - 教程

端午节互动网站

项目介绍

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

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

项目截图

桌面端展示

1. 首页展示

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

2. 端午习俗介绍

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

3. 互动游戏

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

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

移动端适配展示

主要功能展示

首页	端午习俗	龙舟竞赛

|

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

包粽子游戏展示

制作界面	成就系统

|

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

响应式设计特点

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

功能特性

1. 首页 - 端午节介绍

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

2. 包粽子游戏

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

3. 龙舟竞赛

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

技术栈

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

安装说明

1. 克隆项目

gitclone https://gitee.com/ilovemashang/duan-wu.gitcdmy-vue-app

2. 安装依赖

npm install

3. 本地开发

npmrun dev

4. 项目打包

npmrun build

5. 预览打包结果

npmrun 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]

致谢

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