插件官网: 100px.net/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="playGame()">开始抽奖</button>
<div id="my-lucky"></div>
<script src="https://unpkg.com/lucky-canvas@1.7.25"></script>
<script>
const myLucky = new LuckyCanvas.SlotMachine('#my-lucky', {
width: '300px',
height: '300px',
blocks: [
{ padding: '10px', background: '#869cfa' },
{ padding: '10px', background: '#e9e8fe' },
],
slots: [
{ order: [0, 1, 2, 3, 4, 5], direction: 1 },
{ order: [1, 2, 3, 4, 5, 0], direction: -1 },
{ order: [2, 3, 4, 5, 0, 1], direction: 1 },
],
// 这里记录的是总共的奖品数量,每列奖品类型都是一样的
prizes: [
{
imgs: [
{
width: '100%',
height: '100%',
src: './分享效果图.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './信息.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './中奖记录.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './中奖记录.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './信息.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './分享效果图.png'
}
]
}
],
defaultConfig: {
rowSpacing: '10px',
colSpacing: '10px'
},
end(prize) {
console.log(prize)
}
})
// 开始游戏
const playGame = () => {
myLucky.play()
setTimeout(() => {
// 假设 4 种结果
const res = [
[1, 3, 1],
[0, 0, 3],
[2, 2, 2],
[3, 5, 5]
]
// 随机取一组数据
const index = res[Math.random() * 4 >> 0]
console.log(index)
// 调用 stop 方法停止游戏
myLucky.stop(index)
}, 500);
}
</script>
</body>
</html>
如果上面代码报错的话,可以转换成下面这种方式试一下,就是监听浏览器的load事件,保存页面刷新后再去获取画布元素
window.onload = function () {
myLucky = new LuckyCanvas.SlotMachine('#my-lucky', {
width: '300px',
height: '300px',
blocks: [
{ padding: '10px', background: '#869cfa' },
{ padding: '10px', background: '#e9e8fe' },
],
slots: [
{ order: [0, 1, 2, 3, 4, 5], direction: 1 },
{ order: [1, 2, 3, 4, 5, 0], direction: -1 },
{ order: [2, 3, 4, 5, 0, 1], direction: 1 },
],
// 这里记录的是总共的奖品数量,每列奖品类型都是一样的
prizes: [
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/0.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/1.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/2.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/3.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/4.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/5.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/6.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/7.png'
}
]
},
{
imgs: [
{
width: '100%',
height: '100%',
src: './prize/8.png'
}
]
}
],
defaultConfig: {
rowSpacing: '10px',
colSpacing: '10px'
},
end(prize) {
console.log(prize)
}
})
}
// 开始游戏
const playGame = () => {
myLucky.play()
setTimeout(() => {
// 假设 4 种结果
const res = [
[1, 3, 1],
[0, 0, 3],
[2, 2, 2],
[3, 5, 5]
]
// 随机取一组数据
const index = res[Math.random() * 4 >> 0]
console.log(index)
// 调用 stop 方法停止游戏
myLucky.stop(index)
}, 500);
}
