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/ - 静态资源，包含项目 Logo
• src/assets/ - 组件内使用的资源文件

🚀 安装与运行

环境要求

• Node.js >= 16.0.0
• npm 或 yarn 包管理器

安装步骤

1. 克隆项目

git clone [项目地址]
cd nine-grid-lottery-game

1. 安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

1. 启动开发服务器

# 使用 npm
npm run dev

# 或使用 yarn
yarn dev

1. 访问应用
   打开浏览器访问：http://localhost:3001

构建部署

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

🎁 奖品设置

当前配置的奖品包括：

• 📱 iPhone 15
• 💻 MacBook
• 🎧 AirPods
• 📱 iPad
• ⌚ 手表
• 🔊 音箱
• 📺 Apple TV
• ✏️ Apple Pencil

🎮 游戏规则

1. 活动时间：2024 年 3 月 1 日 - 2024 年 3 月 31 日
2. 参与方式：每日登录获得 1 次抽奖机会，分享活动获得额外机会
3. 抽奖机制：点击中心按钮开始抽奖，系统随机选择奖品
4. 中奖展示：中奖后弹窗显示奖品信息和联系方式
5. 记录查看：可查看历史抽奖记录，支持自动滚动

📱 功能特色

🎨 视觉设计

• 现代化的渐变色彩搭配
• 流畅的动画过渡效果
• 响应式布局适配各种设备
• 直观的用户交互反馈

⚡ 性能优化

• Vite 构建工具提供快速开发体验
• 代码分割和懒加载优化
• CSS 压缩和优化
• 移动端性能优化

🔧 可扩展性

• 模块化的组件设计
• 易于修改的奖品配置
• 灵活的样式定制
• 简洁的代码结构