Web前端小游戏轮盘。

代码如下：

<!DOCTYPE html>

<head>

<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>

</div>

// 奖品列表

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>

表现结果如下图所示;

点击开始抽奖按钮，轮盘就会转动一次转过，故事书，铅笔，笔记本，文具盒，尺子，橡皮，水彩笔和书包等奖品。在一段时间后，转盘停止指针指向奖品