端午节互动网站

端午节互动网站

项目介绍

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

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

项目截图

桌面端展示

1. 首页展示

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

2. 端午习俗介绍

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

3. 互动游戏

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

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

移动端适配展示

主要功能展示
首页 端午习俗 龙舟竞赛

|

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

包粽子游戏展示
制作界面 成就系统

|

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

响应式设计特点

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

功能特性

1. 首页 - 端午节介绍

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

2. 包粽子游戏

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

3. 龙舟竞赛

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

技术栈

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

安装说明

  1. 克隆项目
bash 复制代码
git clone https://gitee.com/ilovemashang/duan-wu.git
cd my-vue-app
  1. 安装依赖
bash 复制代码
npm install
  1. 本地开发
bash 复制代码
npm run dev
  1. 项目打包
bash 复制代码
npm run build
  1. 预览打包结果
bash 复制代码
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 来帮助改进项目。

联系方式

致谢

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

相关推荐
飞翔的佩奇3 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的房屋交易平台管理系统(附源码+数据库+毕业论文+部署教程+配套软件)
数据库·spring boot·mysql·vue·毕业设计·mybatis·房屋交易平台
YL雷子4 小时前
纯前端使用ExcelJS插件导出Excel
前端·vue·excel
什么什么什么?4 小时前
el-table高度自适应vue页面指令
前端·javascript·elementui
码上暴富7 小时前
axios请求的取消
前端·javascript·vue.js
JefferyXZF8 小时前
Next.js 初识:从 React 到全栈开发的第一步(一)
前端·全栈·next.js
一只韩非子9 小时前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师9 小时前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager9 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴9 小时前
Int / Floor
前端·webgl
excel9 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端