Web前端小游戏轮盘。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮盘抽奖</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
}
.wheel-container {
position: relative;
width: 350px;
height: 350px;
margin: 20px 0;
}
#wheel {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 5px solid #333;
transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.segment {
position: absolute;
width: 50%;
height: 50%;
transform-origin: bottom right;
}
.segment-text {
position: absolute;
width: 90px;
padding: 5px;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
font-size: 14px;
box-sizing: border-box;
text-align: center;
z-index: 1;
}
.pointer {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 30px solid #e74c3c;
z-index: 10;
}
#spin-btn {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-bottom: 20px;
}
#spin-btn:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}
#result {
font-size: 18px;
color: #333;
text-align: center;
padding: 10px 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>幸运抽奖</h1>
<div class="wheel-container">
<div id="wheel"></div>
<div class="pointer"></div>
</div>
<button id="spin-btn">开始抽奖</button>
<div id="result">等待抽奖...</div>
<script>
// 奖品列表
const prizes = [
"故事书",
"铅笔",
"笔记本",
"文具盒",
"尺子",
"橡皮",
"水彩笔",
"书包"
];
// 每个格子的背景颜色
const colors = [
"#ff6b6b", "#4ecdc4", "#45b7d1", "#ffaa1d",
"#96ceb4", "#ff8b94", "#a77dc2", "#ffcb74"
];
// 获取DOM元素
const wheel = document.getElementById('wheel');
const spinBtn = document.getElementById('spin-btn');
const result = document.getElementById('result');
// 状态变量
let isSpinning = false;
let totalRotation = 0;
// 初始化轮盘
function initWheel() {
const segmentCount = prizes.length;
const anglePerSegment = 360 / segmentCount;
// 创建8个格子
for (let i = 0; i < segmentCount; i++) {
// 创建格子元素
const segment = document.createElement('div');
segment.className = 'segment';
segment.style.transform = `rotate(${i * anglePerSegment}deg)`;
segment.style.backgroundColor = colors[i];
// 创建格子内的文本（放在角落位置）
const text = document.createElement('div');
text.className = 'segment-text';
// 计算每个格子的角度
const segmentAngle = i * anglePerSegment;
// 文本旋转角度（让文字水平显示）
const textRotation = segmentAngle + anglePerSegment / 2;
// 修复：为所有格子设置半径值，确保文字显示
let radius = 140; // 基础距离中心的距离
if ([1, 3, 5, 7].includes(i)) {
radius = 130; // 特定格子微调
}
// 计算坐标位置
const x = radius * Math.cos((textRotation - 90) * Math.PI / 180);
const y = radius * Math.sin((textRotation - 90) * Math.PI / 180);
// 设置文本位置和旋转
text.style.transform = `rotate(${textRotation}deg)`;
text.style.left = `calc(50% + ${x}px)`;
text.style.top = `calc(50% + ${y}px)`;
text.textContent = prizes[i];
segment.appendChild(text);
wheel.appendChild(segment);
}
}
// 抽奖函数
function spinWheel() {
if (isSpinning) return;
isSpinning = true;
spinBtn.disabled = true;
spinBtn.textContent = "转动中...";
result.textContent = "轮盘转动中...";
// 计算旋转角度：3-5圈随机
const randomRotation = 360 * (3 + Math.random() * 2) + (Math.random() * 360);
totalRotation += randomRotation;
// 应用旋转
wheel.style.transform = `rotate(${totalRotation}deg)`;
// 等待旋转结束
setTimeout(() => {
determineWinner();
isSpinning = false;
spinBtn.disabled = false;
spinBtn.textContent = "开始抽奖";
}, 5000);
}
// 确定中奖结果
function determineWinner() {
const finalAngle = totalRotation % 360;
const normalizedAngle = (finalAngle + 360) % 360;
const anglePerSegment = 360 / prizes.length;
const winningIndex = Math.floor((360 - normalizedAngle) / anglePerSegment) % prizes.length;
result.textContent = `恭喜您抽中了：${prizes[winningIndex]}`;
}
// 绑定事件
spinBtn.addEventListener('click', spinWheel);
window.addEventListener('load', initWheel);
</script>
</body>
</html>
表现结果如下图所示;
点击开始抽奖按钮，轮盘就会转动一次转过，故事书，铅笔，笔记本，文具盒，尺子，橡皮，水彩笔和书包等奖品。在一段时间后，转盘停止指针指向奖品