1.代码部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幸运抽奖 - 游戏风格抽奖系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6C2BD9', // 主色调：深紫色
secondary: '#FF3366', // 强调色：亮红色
accent: '#FFD700', // 金色：用于高亮和奖励
dark: '#121212', // 深色背景
'dark-light': '#1E1E1E', // 稍亮的深色
},
fontFamily: {
game: ['"Press Start 2P"', 'Inter', 'sans-serif'],
inter: ['Inter', 'sans-serif'],
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 3s ease-in-out infinite',
'shine': 'shine 2s infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
shine: {
'0%, 100%': { boxShadow: '0 0 15px rgba(255, 215, 0, 0.7)' },
'50%': { boxShadow: '0 0 25px rgba(255, 215, 0, 1)' },
}
}
}
}
}
</script>
<!-- 自定义样式 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.text-shadow-glow {
text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}
.rotate-wheel {
transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.prize-item {
@apply absolute w-1/2 h-1/2 transform origin-bottom-right flex items-center justify-center p-2;
}
.prize-text {
@apply text-xs md:text-sm font-bold text-center transform rotate-45 w-full;
}
.wheel-border {
@apply absolute inset-0 rounded-full border-4 border-accent shadow-[0_0_20px_rgba(255,215,0,0.5)];
}
.btn-hover {
@apply transition-all duration-300 hover:scale-105 hover:shadow-lg active:scale-95;
}
.glass-effect {
@apply bg-white/10 backdrop-blur-md border border-white/20;
}
}
</style>
<!-- 引入字体 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-dark to-dark-light min-h-screen font-inter text-gray-100 overflow-x-hidden">
<!-- 背景装饰 -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full filter blur-[100px] animate-pulse-slow"></div>
<div class="absolute bottom-1/3 right-1/3 w-80 h-80 bg-secondary/20 rounded-full filter blur-[100px] animate-pulse-slow" style="animation-delay: 1s;"></div>
</div>
<div class="container mx-auto px-4 py-8 relative z-10">
<!-- 页面标题 -->
<header class="text-center mb-8 md:mb-12">
<h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent to-secondary mb-2 text-shadow-glow">
幸运抽奖
</h1>
<p class="text-gray-400 max-w-md mx-auto">转动轮盘，赢取丰厚奖励！每次抽奖消耗10个积分，祝您好运！</p>
</header>
<main class="max-w-5xl mx-auto">
<!-- 玩家信息和积分 -->
<div class="glass-effect rounded-xl p-4 md:p-6 mb-8 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<div class="w-12 h-12 rounded-full bg-primary/30 flex items-center justify-center mr-4 border-2 border-accent">
<i class="fa fa-user text-accent text-xl"></i>
</div>
<div>
<h2 class="font-bold text-lg">玩家名称</h2>
<p class="text-gray-400 text-sm">等级 25 · 精英会员</p>
</div>
</div>
<div class="glass-effect rounded-full px-6 py-3 flex items-center space-x-2 border border-accent/30">
<i class="fa fa-diamond text-accent"></i>
<span class="font-bold text-xl" id="user-points">150</span>
<span class="text-gray-400">积分</span>
</div>
</div>
<!-- 抽奖区域 -->
<div class="flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center">
<!-- 抽奖轮盘 -->
<div class="relative w-full max-w-md aspect-square">
<!-- 轮盘容器 -->
<div class="relative w-full h-full rounded-full glass-effect overflow-hidden">
<!-- 轮盘 -->
<div id="wheel" class="w-full h-full rotate-wheel">
<!-- 奖品区域将通过JS动态生成 -->
</div>
<!-- 轮盘边框 -->
<div class="wheel-border"></div>
<!-- 中心按钮 -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 md:w-20 md:h-20 rounded-full bg-secondary z-10 flex items-center justify-center btn-hover animate-shine cursor-pointer" id="spin-btn">
<div class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-accent flex items-center justify-center">
<span class="font-bold text-dark">开始</span>
</div>
</div>
</div>
<!-- 指针 -->
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-16 md:w-10 md:h-20 z-20">
<div class="w-full h-full bg-accent clip-triangle-down shadow-lg"></div>
</div>
</div>
<!-- 右侧信息区 -->
<div class="w-full max-w-md glass-effect rounded-xl p-5">
<!-- 中奖记录 -->
<div class="mb-6">
<h3 class="text-lg font-bold mb-3 flex items-center">
<i class="fa fa-trophy text-accent mr-2"></i>
中奖记录
</h3>
<div id="history" class="max-h-40 overflow-y-auto space-y-2 text-sm">
<div class="p-2 bg-dark/50 rounded border border-gray-700/50">
<span class="text-gray-400">刚刚</span> · 获得了 <span class="text-accent font-bold">100积分</span>
</div>
<div class="p-2 bg-dark/50 rounded border border-gray-700/50">
<span class="text-gray-400">5分钟前</span> · 获得了 <span class="text-green-400 font-bold">稀有装备</span>
</div>
</div>
</div>
<!-- 奖品列表 -->
<div>
<h3 class="text-lg font-bold mb-3 flex items-center">
<i class="fa fa-gift text-secondary mr-2"></i>
奖品列表
</h3>
<div class="grid grid-cols-2 gap-2">
<div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center">
<i class="fa fa-diamond text-accent mr-2"></i>
<span>50积分</span>
</div>
<div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center">
<i class="fa fa-diamond text-accent mr-2"></i>
<span>100积分</span>
</div>
<div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center">
<i class="fa fa-shield text-blue-400 mr-2"></i>
<span>普通装备</span>
</div>
<div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center">
<i class="fa fa-shield text-purple-400 mr-2"></i>
<span>稀有装备</span>
</div>
<div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center">
<i class="fa fa-shield text-yellow-400 mr-2"></i>
<span>史诗装备</span>
</div>
<div class="p-2 bg-dark/50 rounded border border-gray-700/50 flex items-center">
<i class="fa fa-refresh text-gray-400 mr-2"></i>
<span>再来一次</span>
</div>
</div>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="mt-10 text-center">
<button class="bg-primary hover:bg-primary/80 text-white font-bold py-3 px-8 rounded-full btn-hover mr-4">
<i class="fa fa-plus-circle mr-2"></i>获取更多积分
</button>
<button class="bg-dark-light hover:bg-dark text-white font-bold py-3 px-8 rounded-full btn-hover">
<i class="fa fa-info-circle mr-2"></i>活动规则
</button>
</div>
</main>
<!-- 中奖弹窗 -->
<div id="prize-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden">
<div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
<div class="text-center">
<div class="w-20 h-20 mx-auto bg-accent/20 rounded-full flex items-center justify-center mb-4 border-2 border-accent animate-float">
<i id="prize-icon" class="fa fa-diamond text-3xl text-accent"></i>
</div>
<h2 class="text-2xl font-bold mb-2 text-shadow-glow" id="prize-title">恭喜中奖！</h2>
<p class="text-gray-300 mb-6" id="prize-desc">你获得了50积分奖励！</p>
<button id="close-modal" class="bg-secondary hover:bg-secondary/80 text-white font-bold py-2 px-6 rounded-full btn-hover">
确定
</button>
</div>
</div>
</div>
</div>
<script>
// 奖品配置
const prizes = [
{ name: "50积分", icon: "fa-diamond", color: "#FFD700", textColor: "#121212" },
{ name: "普通装备", icon: "fa-shield", color: "#4CAF50", textColor: "#FFFFFF" },
{ name: "100积分", icon: "fa-diamond", color: "#FFD700", textColor: "#121212" },
{ name: "稀有装备", icon: "fa-shield", color: "#9C27B0", textColor: "#FFFFFF" },
{ name: "再来一次", icon: "fa-refresh", color: "#2196F3", textColor: "#FFFFFF" },
{ name: "史诗装备", icon: "fa-shield", color: "#FF9800", textColor: "#FFFFFF" }
];
// 计算每个奖品的角度
const sliceAngle = 360 / prizes.length;
const wheel = document.getElementById('wheel');
const spinBtn = document.getElementById('spin-btn');
const userPoints = document.getElementById('user-points');
const prizeModal = document.getElementById('prize-modal');
const modalContent = document.getElementById('modal-content');
const closeModal = document.getElementById('close-modal');
const prizeTitle = document.getElementById('prize-title');
const prizeDesc = document.getElementById('prize-desc');
const prizeIcon = document.getElementById('prize-icon');
const historyContainer = document.getElementById('history');
// 初始化积分
let points = 150;
let isSpinning = false;
// 创建轮盘奖品区域
function createWheel() {
prizes.forEach((prize, index) => {
const slice = document.createElement('div');
slice.className = 'prize-item';
slice.style.transform = `rotate(${index * sliceAngle}deg)`;
slice.style.backgroundColor = prize.color;
const textContainer = document.createElement('div');
textContainer.className = 'prize-text';
textContainer.style.color = prize.textColor;
textContainer.innerHTML = `<i class="fa ${prize.icon} mb-1"></i><br>${prize.name}`;
slice.appendChild(textContainer);
wheel.appendChild(slice);
});
}
// 旋转轮盘
function spinWheel() {
if (isSpinning || points < 10) return;
// 扣除积分
points -= 10;
userPoints.textContent = points;
isSpinning = true;
spinBtn.style.pointerEvents = 'none';
// 随机旋转角度 (3-5圈 + 随机位置)
const randomSpin = 1080 + Math.floor(Math.random() * 1080) + (Math.random() * 360);
const finalRotation = wheelRotation + randomSpin;
// 应用旋转
wheel.style.transform = `rotate(${finalRotation}deg)`;
// 计算中奖奖品
setTimeout(() => {
const normalizedRotation = finalRotation % 360;
const winningIndex = Math.floor(((360 - normalizedRotation) % 360) / sliceAngle);
const winningPrize = prizes[winningIndex];
// 显示中奖结果
showPrize(winningPrize);
// 更新旋转角度
wheelRotation = finalRotation;
isSpinning = false;
spinBtn.style.pointerEvents = 'auto';
}, 5000); // 与CSS过渡时间一致
}
// 显示中奖结果
function showPrize(prize) {
// 更新弹窗内容
prizeTitle.textContent = `恭喜获得${prize.name}！`;
prizeDesc.textContent = getPrizeDescription(prize);
prizeIcon.className = `fa ${prize.icon} text-3xl`;
prizeIcon.style.color = prize.color;
// 显示弹窗
prizeModal.classList.remove('hidden');
setTimeout(() => {
modalContent.classList.remove('scale-95', 'opacity-0');
modalContent.classList.add('scale-100', 'opacity-100');
}, 10);
// 更新积分（如果中奖的是积分）
if (prize.name.includes('积分')) {
const addPoints = parseInt(prize.name);
points += addPoints;
userPoints.textContent = points;
}
// 如果是"再来一次"，不扣除额外积分
if (prize.name === '再来一次') {
points += 10;
userPoints.textContent = points;
}
// 添加到历史记录
addToHistory(prize);
}
// 获取奖品描述
function getPrizeDescription(prize) {
const descriptions = {
"50积分": "你获得了50积分，可以用于再次抽奖或兑换道具",
"100积分": "太棒了！你获得了100积分奖励",
"普通装备": "获得一件普通装备，提升你的战斗能力",
"稀有装备": "恭喜！你获得了一件稀有的装备",
"史诗装备": "太幸运了！你获得了一件史诗级装备",
"再来一次": "获得一次免费抽奖机会，可以再次转动轮盘"
};
return descriptions[prize.name] || "";
}
// 添加到历史记录
function addToHistory(prize) {
const historyItem = document.createElement('div');
historyItem.className = 'p-2 bg-dark/50 rounded border border-gray-700/50 transform transition-all duration-300 scale-95 opacity-0';
let prizeText = '';
if (prize.name.includes('积分')) {
prizeText = `<span class="text-accent font-bold">${prize.name}</span>`;
} else if (prize.name.includes('普通')) {
prizeText = `<span class="text-green-400 font-bold">${prize.name}</span>`;
} else if (prize.name.includes('稀有')) {
prizeText = `<span class="text-purple-400 font-bold">${prize.name}</span>`;
} else if (prize.name.includes('史诗')) {
prizeText = `<span class="text-yellow-400 font-bold">${prize.name}</span>`;
} else {
prizeText = `<span class="text-blue-400 font-bold">${prize.name}</span>`;
}
historyItem.innerHTML = `<span class="text-gray-400">刚刚</span> · 获得了 ${prizeText}`;
// 添加到历史记录顶部
historyContainer.insertBefore(historyItem, historyContainer.firstChild);
// 触发动画
setTimeout(() => {
historyItem.classList.remove('scale-95', 'opacity-0');
historyItem.classList.add('scale-100', 'opacity-100');
}, 10);
// 限制历史记录数量
if (historyContainer.children.length > 5) {
historyContainer.removeChild(historyContainer.lastChild);
}
}
// 关闭弹窗
function closePrizeModal() {
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
prizeModal.classList.add('hidden');
}, 300);
}
// 初始化轮盘旋转角度
let wheelRotation = 0;
// 初始化
createWheel();
// 事件监听
spinBtn.addEventListener('click', spinWheel);
closeModal.addEventListener('click', closePrizeModal);
// 点击弹窗外部关闭
prizeModal.addEventListener('click', (e) => {
if (e.target === prizeModal) {
closePrizeModal();
}
});
// 添加自定义样式
const style = document.createElement('style');
style.textContent = `
.clip-triangle-down {
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
2.结果展示
