React 实现九宫格抽奖游戏
九宫格抽奖游戏
预览地址
🎯 项目概述
九宫格抽奖游戏是一个基于 React 开发的互动式抽奖应用，采用经典的九宫格布局设计，为用户提供流畅有趣的抽奖体验。项目具有现代化的 UI 设计、流畅的动画效果和完整的抽奖逻辑。
✨ 核心功能
🎮 抽奖功能
- 九宫格布局：经典的 3x3 网格设计，中心为开始按钮
- 动态抽奖：流畅的转盘动画效果，逐步减速至最终结果
- 奖品展示：丰富的奖品类型，包含 emoji 图标和名称
- 抽奖次数限制：每用户限定抽奖次数，增加游戏公平性
📱 用户界面
- 响应式设计：适配移动端和桌面端
- 渐变背景：美观的绿色渐变背景设计
- 动画效果：平滑的过渡动画和高亮效果
- 弹窗提示：中奖后的精美弹窗展示
📊 记录系统
- 抽奖记录：完整的历史抽奖记录
- 自动滚动：记录列表自动滚动展示
- 时间戳：精确到秒的抽奖时间记录
- 奖品信息：详细的中奖奖品信息
📋 活动管理
- 活动说明：详细的活动规则和参与方式
- Tab 切换：活动说明和抽奖记录的便捷切换
- 联系方式：中奖后的联系方式展示
🛠 技术栈
前端框架
- React 18.3.1 - 现代化的前端框架
- React Router DOM 7.6.2 - 单页应用路由管理
- React Hooks - 状态管理和生命周期处理
构建工具
- Vite 6.3.1 - 快速的构建工具和开发服务器
- ESLint - 代码质量检查和规范
- PostCSS - CSS 后处理器
样式方案
- Tailwind CSS 3.4.17 - 实用优先的 CSS 框架
- PostCSS Plugins - CSS 优化和处理插件
- 响应式设计 - 移动端适配
开发工具
- TypeScript 支持 - 类型检查和开发体验
- Hot Module Replacement - 热更新开发体验
- Code Splitting - 代码分割优化
📁 项目结构
nine-grid-lottery-game/
├── public/ # 静态资源目录
│ ├── logo.png # 项目 Logo
│ └── logo.svg # 矢量 Logo
├── src/ # 源代码目录
│ ├── assets/ # 资源文件
│ │ └── react.svg # React 图标
│ ├── pages/ # 页面组件
│ │ └── NineGridLottery.jsx # 九宫格抽奖主页面
│ ├── App.jsx # 应用主组件
│ ├── main.jsx # 应用入口文件
│ ├── routers.jsx # 路由配置
│ └── index.css # 全局样式
├── dist/ # 构建输出目录
│ ├── assets/ # 构建后的资源文件
│ ├── index.html # 构建后的 HTML
│ ├── logo.png # 构建后的 Logo
│ └── logo.svg # 构建后的矢量 Logo
├── node_modules/ # 依赖包目录
├── package.json # 项目配置和依赖
├── package-lock.json # 依赖锁定文件
├── yarn.lock # Yarn 锁定文件
├── vite.config.js # Vite 构建配置
├── tailwind.config.js # Tailwind CSS 配置
├── postcss.config.js # PostCSS 配置
├── eslint.config.js # ESLint 配置
└── index.html # HTML 模板核心文件说明
📄 主要组件文件
src/pages/NineGridLottery.jsx(329 行)
-
- 九宫格抽奖的核心组件
- 包含完整的抽奖逻辑和 UI 实现
- 状态管理：抽奖次数、当前位置、中奖结果等
- 动画控制：转盘动画、滚动效果等
⚙️ 配置文件
package.json- 项目依赖和脚本配置vite.config.js- 开发服务器端口 3001，路径别名配置tailwind.config.js- 自定义 Tailwind 插件和样式扩展postcss.config.js- CSS 处理和移动端适配配置
🎨 样式和资源
src/index.css- 全局样式定义public/- 静态资源，包含项目 Logosrc/assets/- 组件内使用的资源文件
🚀 安装与运行
环境要求
- Node.js >= 16.0.0
- npm 或 yarn 包管理器
安装步骤
- 克隆项目
git clone [项目地址]
cd nine-grid-lottery-game- 安装依赖
# 使用 npm
npm install# 或使用 yarn
yarn install- 启动开发服务器
# 使用 npm
npm run dev# 或使用 yarn
yarn dev- 访问应用
打开浏览器访问：http://localhost:3001
构建部署
# 构建生产版本
npm run build# 预览构建结果
npm run preview🎁 奖品设置
当前配置的奖品包括：
- 📱 iPhone 15
- 💻 MacBook
- 🎧 AirPods
- 📱 iPad
- ⌚ 手表
- 🔊 音箱
- 📺 Apple TV
- ✏️ Apple Pencil
🎮 游戏规则
- 活动时间：2024 年 3 月 1 日 - 2024 年 3 月 31 日
- 参与方式：每日登录获得 1 次抽奖机会，分享活动获得额外机会
- 抽奖机制：点击中心按钮开始抽奖，系统随机选择奖品
- 中奖展示：中奖后弹窗显示奖品信息和联系方式
- 记录查看：可查看历史抽奖记录，支持自动滚动
📱 功能特色
🎨 视觉设计
- 现代化的渐变色彩搭配
- 流畅的动画过渡效果
- 响应式布局适配各种设备
- 直观的用户交互反馈
⚡ 性能优化
- Vite 构建工具提供快速开发体验
- 代码分割和懒加载优化
- CSS 压缩和优化
- 移动端性能优化
🔧 可扩展性
- 模块化的组件设计
- 易于修改的奖品配置
- 灵活的样式定制
- 简洁的代码结构