写一个大转盘抽奖的交互

创建一个简单的大转盘抽奖交互需要HTML、CSS和JavaScript。以下是一个基本的实现示例：

1. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大转盘抽奖</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="wheel-container">
        <canvas id="wheel" width="300" height="300"></canvas>
        <button onclick="startSpin()">开始抽奖</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
}

button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #3498db;
    border: none;
    cursor: pointer;
    z-index: 100;
}

3. JavaScript (script.js)

这里我们使用简单的数学来模拟旋转效果，不涉及复杂的物理计算。

const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const prizes = ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6'];
let currentRotation = 0;
const rotationSpeed = 2 * Math.PI / 1000; // 每毫秒旋转的弧度
let isSpinning = false;

function drawWheel() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(currentRotation);
    ctx.fillStyle = '#f90';
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(0, 0, 100, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
    for (let i = 0; i < prizes.length; i++) {
        const angle = (i / prizes.length) * 2 * Math.PI;
        ctx.save();
        ctx.rotate(angle - currentRotation);
        ctx.fillStyle = 'white';
        ctx.fillText(prizes[i], -ctx.measureText(prizes[i]).width / 2, -120);
        ctx.restore();
    }
    ctx.restore();
}

function startSpin() {
    if (isSpinning) return;
    isSpinning = true;
    const spinDuration = 3000; // 旋转持续时间，毫秒
    const finalRotation = Math.random() * 6 * 2 * Math.PI; // 最终旋转的弧度，随机6圈以内
    let startTime = Date.now();
    const animate = () => {
        let elapsed = Date.now() - startTime;
        if (elapsed >= spinDuration) {
            elapsed = spinDuration;
            isSpinning = false;
        }
        const progress = elapsed / spinDuration;
        const easeOut = 3 * progress ** 2 - 2 * progress ** 3; // 缓出效果
        currentRotation = easeOut * finalRotation;
        drawWheel();
        if (isSpinning) {
            requestAnimationFrame(animate);
        } else {
            // 停止旋转后，确定中奖奖品（根据旋转的最终角度）
            const prizeIndex = Math.floor((currentRotation % (2 * Math.PI)) / (2 * Math.PI / prizes.length));
            alert(`恭喜您中奖了！奖品是：${prizes[prizeIndex]}`);
        }
    };
    animate();
}

// 初始绘制转盘
drawWheel();