项目简介
春节幸运转盘是一个互动娱乐主题的抽奖游戏，让用户通过转动转盘获得春节礼品。项目采用红色金色风格设计，提供多种奖品、自定义奖品、抽奖次数等功能，让用户在游戏中体验春节抽奖的乐趣。
核心特点：
- 多种奖品：红包、福字、对联、灯笼、鞭炮等春节礼品
- 转盘旋转：转盘旋转动画，随机停在中奖位置
- 抽奖次数：每天有限制次数，增强游戏性
- 奖品记录：记录中奖历史，查看中奖记录
- 自定义奖品：可以自定义转盘奖品
iFlow CLI使用功能
本项目开发过程中使用了以下iFlow CLI功能：
- write_file - 创建HTML文件
- 文件路径管理 - 使用绝对路径确保文件创建位置正确
- 文档系统化创建 - 标准化的项目文档
实现过程
1. 页面结构设计
- 采用居中布局，转盘占据屏幕中央
- 头部：幸运转盘标题区域，带转盘emoji（
） - 主内容区：转盘、抽奖按钮、中奖提示
- 侧边栏：奖品列表、抽奖次数、中奖记录
2. 视觉风格
- 色彩方案：红色（#ff6b6b、#ee5a24）+ 深红（#c0392b、#e74c3c）+ 金色（#f1c40f）
- 字体选择：Microsoft YaHei微软雅黑，现代简洁
- 布局特点：转盘居中、金色边框、渐变背景
- 视觉元素：转盘emoji（）、指针、奖品图标
3. 功能实现
3.1 奖品数据结构
const PRIZES = [
{ id: 1, name: '🧧 红包', color: '#ff0000', probability: 0.3 },
{ id: 2, name: '🎋 福字', color: '#ff6600', probability: 0.25 },
{ id: 3, name: '🏮 灯笼', color: '#ffcc00', probability: 0.2 },
{ id: 4, name: '🧨 鞭炮', color: '#ff9900', probability: 0.15 },
{ id: 5, name: '🎐 对联', color: '#ff0066', probability: 0.1 }
];
3.2 游戏状态管理
let gameState = {
isSpinning: false, // 是否正在旋转
currentAngle: 0, // 当前角度
spinCount: 5, // 剩余抽奖次数
winHistory: [], // 中奖记录
prizes: PRIZES // 奖品列表
};
3.3 核心功能（7个）
- 转盘旋转 - 点击抽奖按钮，转盘旋转
- 随机抽奖 - 根据概率随机选择奖品
- 中奖显示 - 显示中奖奖品
- 抽奖次数 - 每天有限制次数，用完后重置
- 中奖记录 - 记录中奖历史，查看中奖记录
- 自定义奖品 - 可以自定义转盘奖品
- 分享功能 - 分享中奖结果到社交平台
3.4 转盘旋转逻辑
// 转盘旋转
function spinWheel() {
if (gameState.isSpinning || gameState.spinCount <= 0) return;
gameState.isSpinning = true;
gameState.spinCount--;
// 随机选择奖品
const prizeIndex = Math.floor(Math.random() * PRIZES.length);
const prize = PRIZES[prizeIndex];
// 计算旋转角度
const targetAngle = 360 * 5 + (360 / PRIZES.length) * prizeIndex;
const currentRotation = gameState.currentAngle;
const totalRotation = currentRotation + targetAngle;
// 旋转动画
wheel.style.transform = `rotate(${totalRotation}deg)`;
gameState.currentAngle = totalRotation % 360;
// 显示中奖结果
setTimeout(() => {
gameState.isSpinning = false;
gameState.winHistory.push({
prize: prize,
timestamp: Date.now()
});
showWinResult(prize);
}, 3000);
}
4. 交互设计
- 点击抽奖按钮启动转盘旋转
- 转盘旋转3秒后停在中奖位置
- 显示中奖奖品和恭喜信息
- 查看中奖记录，历史中奖信息
5. 响应式设计
- 转盘大小自适应屏幕尺寸
- 按钮大小在小屏幕自动缩小
- 奖品列表在小屏幕自适应
截图
项目包含以下截图位置：
- 转盘界面
- 中奖提示
- 抽奖次数显示
- 中奖记录
体验链接
网页体验路径：
44_春节幸运转盘.html
在线部署后可分享链接。
技术亮点
- 转盘动画 - 使用CSS transform实现转盘旋转
- 概率系统 - 根据概率随机选择奖品
- 抽奖次数限制 - 每天有限制次数，增强游戏性
- 中奖记录 - 记录中奖历史，查看中奖记录
- 自定义奖品 - 可以自定义转盘奖品
文化意义
本项目通过幸运转盘，让用户：
- 体验春节抽奖的乐趣
- 了解春节礼品文化
- 增强节日氛围
- 在游戏中感受春节的快乐
未来改进方向
- 添加更多奖品类型
- 实现多人在线转盘
- 添加转盘音效和背景音乐
- 实现实物兑换功能
- 开发转盘比赛模式
- 添加转盘分享功能
