端午节互动网站

项目介绍

这是一个基于 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