过年了,不得写个年会抽奖系统助助兴！
背景
年会快到了,参与到了设计抽奖系统T-T,看到github上某大佬的炫酷页面,自己手痒也想搞搞事情^-^
效果图来一个
预览地址来一个
项目地址
技术栈
本项目通过原生html,js,css,threejs 实现整个页面效果,通过场景转换实现动画效果
数据源
所有模拟的数据全部由本地保存,通过以下配置进行奖品和抽奖人,进场音乐,颁奖音乐,背景图片替换,动态背景替换,气氛组组卡片颜色替换等......!
Mock中
| 参数 | 值类型 | 描述 |
|---|---|---|
| user | Array[Info] | 奖品类型，唯一标识，0 是默认特别奖的占位符，其它奖品不可使用 |
| COMPANY | string | 公司名 |
| prizes | Array[Gift] | 奖品信息 |
| luckyData | {type:Array[Info]} | 中奖名单 type为奖品类型 |
| leftUsers | Array[Info] | 当前奖池可以抽取人员 |
| excludeUser | Array[Info] | 排除奖池人员述 |
| atmosphereGroupCard | String | 气氛组卡片 |
| background | String | 背景图片 |
| EACH_COUNT | Array[Number] | 抽奖次序默认有个隐藏顺序 |
| width | string | 渲染抽奖墙宽度比例 最好按照原比例去做 |
| height | string | 渲染抽奖墙长度比例 最好按照原比例去做 |
| bgVideo | string | 可以放动态渲染图(mp4类型这种) 使用时会自动覆盖背景不用时请注释或者node该属性 |
Gift详情
/**
* 奖品设置
* type: 唯一标识，0是默认特别奖的占位符，其它奖品不可使用
* count: 奖品数量
* title: 奖品描述
* text: 奖品标题
* img: 图片地址
* ROTATE_TIME:转的球速度越大越慢
* circle:旋转圈数最好8*x倍数
* enter: //抽奖进行时音乐
* awards: //颁奖音乐
*/
{
type: 1,
count: 1,
text: "一等奖 ",
title: "价值5999元",
img: "./img/huawei.png",
enter: "1st-lottery",//抽奖进行时音乐
awards: "1st-BJ-BGM",//颁奖音乐
ROTATE_TIME: 20000,
circle: 8 * 6
},
复制代码内置方法
插入抽奖前的方法
/**
* @description: 不能说的秘密
* @param {*} nowItem 当前奖品
* @param {*} basicData 当前奖池人员
* @return {*}
* @Date: 2022-01-13 15:13:31
*/
function setSecret(nowItem,basicData) {
if (nowItem.type != 4) {
const excludeId = excludeUser.map(item => item[0])
basicData.leftUsers = basicData.leftUsers.filter(human => !excludeId.includes(human[0]))
// console.log(basicData.leftUsers);
}
}
复制代码背景音乐说明
方法在index.js replaceMusic()
| 参数 | 描述 |
|---|---|
| enter-BGM | 进场音乐 |
| other-BJ-BGM | 抽奖颁奖音乐 |
| other-lottery | 抽奖进行时音乐 |
| 1ts-BJ-BGM | 抽奖颁奖音乐 |
| 1ts-lottery | 抽奖进行时音乐 |
| shenchou | 备用 |
Store（缓存）
当页面刷新了怎么办,别担心这里做了页面数据缓存 所有数据都优先读取缓存中数据,当页面刷新时自动读取,如果没有缓存自动初始化话数据
页面逻辑
- 抽奖=>对奖池人进行当前奖品抽奖,当再次进行抽奖时会保存上次抽奖结果到缓存中并更新luckUser和leftUser
- 重新抽奖=>将当前抽中的人员扔回leftUser中(这里和原作者不同,原作者是直接删除了提出了刚才重抽之前人员),进行重新抽奖仍有可能抽中点重抽之前的人(当前轮)
- 颁奖模式=>进行当前奖品的颁奖模式bgm
- 重置=>无视一切条件进行页面重置（与原作不同）
- 奖池每次重置都会被打乱池子顺序,优化随机算法
自行修改(需要自己二次开发)
- 卡片显示编号和名字(index.js)
- 选中颜色（index.css）
- 卡片背景 (index.css)
鸣谢
本次作品UI源于moshang-xc的作品，感谢大佬的开源精神。