代码在此，请品尝
在线地址：JS Bin - Collaborative JavaScript Debugging
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.circle {
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
margin: 50px auto;
}
.circle::after {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: red;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.circle::before {
content: "";
display: block;
height: 100%;
width: 1px;
background-color: red;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.item {
position: absolute;
}
.arrow {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
background-color: antiquewhite;
border-radius: 100%;
}
.arrow::after {
content: "";
display: block;
width: 10px;
height: 40px;
position: absolute;
left: 50%;
top: -40px;
transform: translateX(-50%);
background-color: antiquewhite;
}
.result {
margin: 0 auto;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div id="result" class="result"></div>
<div class="circle">
<div class="item" style="left:30px;top:30px">
<div>游园一场</div>
<div>游园活动0%</div>
</div>
<div class="item" style="right:30px;top:30px">
<div>果切</div>
<div>果切活动89%</div>
</div>
<div class="item" style="right:30px;bottom:30px">
<div>小礼品</div>
<div>小礼品10%</div>
</div>
<div class="item" style="left:30px;bottom:30px">
<div>谢谢</div>
<div>感谢参与1%</div>
</div>
<div class="arrow" id="arrow"></div>
</div>
<div style="display: flex; justify-content: center;"><button id="start">开始游戏</button></div>
<script>
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getTargetRoute() {
// 设定中奖几率 果切活动89% 小礼品10% 感谢参与1% 游园活动0% （将游园活动的0几率排除）
const fruitChance = 89;
const giftChance = 10;
const thankChance = 1;
// 计算总的中奖几率
const totalChance = fruitChance + giftChance + thankChance;
// 生成一个0到totalChance-1之间的随机数
const randomNum = Math.floor(Math.random() * totalChance);
//基础圈数
const baseRoute = 360 * this.getRandomNumber(4, 10)
// 根据随机数确定中奖结果
let result;
let roate
if (randomNum < fruitChance) {
result = '果切';
roate = baseRoute + this.getRandomNumber(10, 80) //不是0到90 为了防止落在边边，造成分歧
} else if (randomNum < fruitChance + giftChance) {
result = '小礼品';
roate = baseRoute + this.getRandomNumber(100, 170)
} else {
result = '感谢参与';
roate = baseRoute + this.getRandomNumber(280, 350)
}
return {
result,
roate
}
}
let timer = null;
let playing = false;
function startGame(targetInfo) {
const {
result,
roate
} = targetInfo;
//初始速度
let speed = 1;
//初始旋转位置
let currentRoate = 0;
document.querySelector("#result").innerHTML = `即将中奖的是:${result}`
const dom = document.querySelector("#arrow");
clearInterval(timer)
playing = true;
timer = setInterval(() => {
currentRoate += speed;
dom.style.transform = 'rotate(' + currentRoate + 'deg)';
const percent = currentRoate / roate;
if (percent < 0.7) {
speed += 0.1;
console.log("速度增加", speed)
}
else if (percent >= 0.7 && speed > 0.5) {
//speed > 0.5是用来兜底的，否则还没到目标节点
speed -= 0.2;
console.log("速度减少", speed)
}
if (currentRoate >= roate) {
clearInterval(timer);
playing = false;
alert(`中大奖了：${result}`)
}
}, 20)
}
document.querySelector("#start").onclick = function () {
if (playing) {
return;
}
//提前获取开奖结果，和旋转角度
const targetInfo = getTargetRoute();
//开始游戏
startGame(targetInfo);
}
</script>
</body>
</html>
