使用Javascript和Css3实现一个转盘小游戏(实战篇)
趣谈前端
共 7863字,需浏览 16分钟
· 2021-03-29
前言
css3 背景渐变,transform,transition less循环的使用 javascript基本随机算法 文档片段 documentFragment的使用
效果图
实现思路
1. 绘制转盘背景
width: 150px;
height: 300px;
border-radius: 0 150px 150px 0;
background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px);
.loop(@n) when (@n >= 0) {
.loop(@n - 1);
.piece-@{n} {
transform: rotate(-30deg * (@n + 1));
}
}
transform-origin: left center;
.piece-wrap {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto auto 173px;
transform-origin: left center;
transition: transform 16s cubic-bezier(0,.47,.31,1.03);
.piece {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 300px;
border-radius: 0 150px 150px 0;
transform-origin: left center;
span {
margin-left: 16px;
margin-top: 20px;
display: inline-block;
color: #fff;
}
&:nth-child(2n) {
background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px);
}
&:nth-child(2n+1) {
background-image: linear-gradient(120deg, #ff5858, #ff5858 75px, transparent 75px);
}
}
.loop(@n) when (@n >= 0) {
.loop(@n - 1);
.piece-@{n} {
transform: rotate(-30deg * (@n + 1));
}
}
.loop(11);
}
2.javascript实现转盘逻辑
// 转盘抽奖数据
var wards = ['1元', '2元', '3元', '5元', '再来',
'算法', '0.5元', '0.1元', '0.2元', '0.6元',
'0.5元', '来'];
// 渲染dom
var fragment = document.createDocumentFragment();
for(var i=0, len = wards.length; i < len; i++) {
var piece = document.createElement('div');
piece.className = 'piece piece-' + i;
piece.innerHTML = '<span>' + wards[i] + '</span>';
fragment.appendChild(piece);
}
$('#piece_wrap')[0].appendChild(fragment);
// 生成从 start到end的随机数
function randomArr(start, end) {
return Math.round(start + Math.random()* (end - start))
}
// 转动逻辑
var radis = 30, // 每个扇形区域的度数
n = randomArr(0, 360/radis), // 计算随机中奖的位置
initRadis = 720, // 初始转动的角度
time = 16 * 1000, // 转动时间
once = true, // 限制一个转动周期只能点击一次
totalRadis = initRadis + radis * n + radis/2; // 转动角度计算公式
$('.start').on('click', function(){
if(once) {
once = false;
$('#piece_wrap').css({
'transform':'rotate(' + totalRadis + 'deg)',
'transition': 'transform 16s cubic-bezier(0,.47,.31,1.03)'
});
setTimeout(function(){
once = true;
alert('恭喜你抽中了' + wards[n] + '!');
$('#piece_wrap').css({
'transform':'rotate(' + 0 + 'deg)',
'transition': 'none'
});
}, time)
}
})
❤️爱心三连击
评论