html⼤转盘游戏,HTML5Canvas⼤转盘抽奖活动页⾯代码js代码
var wheelSurf
// 初始化装盘数据 正常情况下应该由后台返回
var initData = {
"success": true,
"list": [{
"id": 100,
"name": "5000元京东卡",
"image": "images/1.png",
"rank":1,
"percent":3
},
{
"id": 101,
"name": "1000元京东卡",
"image": "images/2.png",
"rank":2,
"percent":5
},
{
"id": 102,
"name": "100个⽐特币",
"image": "images/3.png",
"rank":3,
"percent":2
},
{
"id": 103,
"name": "50元话费",
"image": "images/4.png",
"rank":4,
"percent":49
},
{
"id": 104,
"name": "100元话费",
"image": "images/5.png",
"rank":5,
"percent":30
},
{
"id": 105,
"name": "500个⽐特币",
"image": "images/6.png",
"rank":6,
"percent":1
},
{
"id": 106,
"name": "500元京东卡",
"image": "images/7.png",
"rank":7,
"percent":10
}
]
}
// 计算分配获奖概率(前提所有奖品概率相加100%) function getGift(){
var percent = Math.random()*100
var totalPercent = 0
for(var i = 0 ,l = initData.list.length;i totalPercent += initData.list[i].percent
if(percent<=totalPercent){
return initData.list[i]
}
}
}
var angel = 360 / initData.list.length
/
/ 格式化成插件需要的奖品列表格式
for (var i = 0, l = initData.list.length; i < l; i++) {
list[initData.list[i].rank] = {
id:initData.list[i].id,
name: initData.list[i].name,
image: initData.list[i].image
}
}
// 查看奖品列表格式
// 定义转盘奖品
wheelSurf = $('#myCanvas').WheelSurf({
list: list, // 奖品 列表，(必填)
outerCircle: {
color: '#df1e15' // 外圈颜⾊(可选)
},
innerCircle: {
color: '#f4ad26' // ⾥圈颜⾊(可选)
},
dots: ['#fbf0a9', '#fbb936'], // 装饰点颜⾊(可选)
disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中⼼奖盘的颜⾊，默认7彩(可选) title: {
color: '#5c1e08',
网页html下载font: '19px Arial'
} // 奖品标题样式(可选)
})
// 初始化转盘
wheelSurf.init()
// 抽奖
var throttle = true;
$("#start").on('click', function () {
var winData = getGift() // 正常情况下获奖信息应该由后台返回
$("#message").html('')
return false;
}
throttle = false;
var count = 0
// 计算奖品⾓度
for (const key in list) {
if (list.hasOwnProperty(key)) {
if (winData.id == list[key].id) {
break;
}
count++
}
}
/
/ 转盘抽奖，
wheelSurf.lottery((count * angel + angel / 2), function () { $("#message").html(winData.name)
throttle = true;
})
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。