免费获取

获取 Demo 源代码请在公众号回复“react卡牌游戏” 。

卡牌游戏

https://code.ifrontend.net/case/react-card-game

项目概述

基于 React 和 Vite 构建的现代化 Web 应用，提供了直观、流畅的抽奖体验。项目采用了最新的前端技术栈，包括 React 18、Tailwind CSS 和响应式设计，确保在各种设备上都能提供出色的用户体验。无论是在 PC 端还是移动端，用户都能享受到高质量的抽奖互动体验。

技术特点

• 现代化技术栈：使用 React 18.3.1、Vite 6.3.1 构建，充分利用最新前端技术的性能优势
• 优雅的 UI：采用 Tailwind CSS 3.4 实现精美的用户界面，渐变背景和卡片设计提供沉浸式体验
• 路由管理：使用 React Router 7.6.2 实现页面导航，支持哈希路由确保兼容性
• 代码规范：集成 ESLint 9 确保代码质量，提供一致的编码风格和最佳实践
• 3D 动画效果：实现卡片翻转的 3D 效果，增强用户交互体验
• 自动滚动展示：中奖记录区域实现自动滚动效果，展示历史中奖信息

主要功能

卡片翻转抽奖

• 精美的 3D 卡片翻转动画效果
• 抽奖前的卡片震动效果增强交互感
• 中奖卡片高亮显示，提升用户体验

中奖记录展示

• 实时更新的中奖记录列表
• 自动滚动展示历史中奖信息
• 包含时间戳和奖品图标的详细记录

活动规则说明

• 清晰展示活动时间、参与方式
• 详细的奖品设置和中奖规则说明
• 领奖方式和活动声明

奖品展示与领取

• 中奖后弹窗展示获得的奖品
• 精美的奖品图标和名称展示
• 提供领奖联系方式

技术实现细节

• 组件化开发：采用 React 组件化思想，实现功能模块的解耦和复用
• CSS 动画效果：使用 CSS3 实现卡片翻转、震动等动画效果
• 状态管理：使用 React Hooks (useState, useEffect, useRef)管理组件状态
• 响应式适配：基于 1920px 设计稿，通过 postcss-px-to-viewport 自动转换为 vw 单位
• 模块化 CSS：结合 Tailwind 和组件级 CSS 实现样式隔离和复用

开发与部署

环境要求

• Node.js 14.0+
• Yarn 或 npm 包管理器

安装依赖

yarn install

本地开发

yarn dev

开发服务器将在 http://localhost:3001 启动

代码检查

yarn lint

构建生产版本

yarn build

构建后的文件将生成在 /dist 目录下

预览生产版本

yarn preview

项目结构

/
├── public/            # 静态资源目录
│   └── logo.svg       # 网站图标
├── src/               # 源代码目录
│   ├── components/    # 可复用组件
│   ├── pages/         # 页面组件
│   │   ├── CardGame.jsx  # 抽奖游戏主页面
│   │   └── CardGame.css  # 游戏页面样式
│   ├── App.jsx        # 应用入口组件
│   ├── main.jsx       # 应用渲染入口
│   ├── routers.jsx    # 路由配置
│   └── index.css      # 全局样式
├── index.html         # HTML模板
├── vite.config.js     # Vite配置
├── postcss.config.js  # PostCSS配置
├── tailwind.config.js # Tailwind配置
└── package.json       # 项目依赖和脚本