<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游戏抽奖系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#7E22CE', // 主色调：紫色
secondary: '#EC4899', // 辅助色：粉色
accent: '#F59E0B', // 强调色：金色
dark: '#1E1B4B', // 深色背景
light: '#F3E8FF', // 浅色文本
},
fontFamily: {
game: ['"Press Start 2P"', 'cursive', 'sans-serif'],
inter: ['Inter', 'sans-serif'],
},
animation: {
'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'spin-slow': 'spin 8s linear infinite',
}
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.text-shadow-glow {
text-shadow: 0 0 10px currentColor;
}
.prize-item {
@apply relative w-full h-full flex items-center justify-center rounded-lg overflow-hidden transition-all duration-300;
}
.prize-item-active {
@apply ring-4 ring-accent scale-105 shadow-lg;
}
.lottery-wheel {
transform-origin: center;
transition: transform 5s cubic-bezier(0.17, 0.67, 0.13, 0.99);
}
.btn-lottery {
@apply bg-gradient-to-br from-secondary to-primary text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-opacity-50;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-dark to-primary min-h-screen font-inter text-light overflow-x-hidden">
<!-- 顶部导航 -->
<header class="bg-dark/80 backdrop-blur-md py-4 px-6 md:px-12 flex justify-between items-center border-b border-primary/30 sticky top-0 z-50">
<div class="flex items-center gap-2">
<i class="fas fa-gift text-accent text-2xl animate-pulse-fast"></i>
<h1 class="text-xl md:text-2xl font-game text-accent text-shadow-glow">幸运抽奖</h1>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 bg-dark/50 px-3 py-1 rounded-full border border-primary/30">
<i class="fas fa-ticket-alt text-secondary"></i>
<span id="ticket-count" class="font-bold">5</span>
<span class="text-sm opacity-70">抽奖券</span>
</div>
<button class="bg-accent/20 hover:bg-accent/30 text-accent px-4 py-1 rounded-lg transition-colors">
<i class="fas fa-plus mr-1"></i> 购买
</button>
</div>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8 md:py-16">
<!-- 抽奖标题区 -->
<div class="text-center mb-8 md:mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2 text-shadow">超级幸运抽奖</h2>
<p class="text-light/70 max-w-2xl mx-auto">每次抽奖消耗1张抽奖券，有机会获得稀有道具、限定皮肤和大量游戏货币！</p>
</div>
<!-- 抽奖区域 -->
<div class="max-w-4xl mx-auto">
<div class="relative">
<!-- 装饰性圆环 -->
<div class="absolute inset-0 rounded-full border-8 border-primary/30 -m-4 z-0"></div>
<div class="absolute inset-0 rounded-full border-4 border-secondary/20 -m-2 z-0"></div>
<!-- 抽奖转盘 -->
<div class="relative w-full aspect-square max-w-md mx-auto z-10">
<div id="lottery-wheel" class="lottery-wheel w-full h-full">
<div class="grid grid-cols-3 grid-rows-3 gap-2 w-full h-full p-2">
<!-- 奖品格子 -->
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="金币x1000">
<div class="text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-sm">金币x1000</p>
</div>
</div>
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="普通皮肤">
<div class="text-center">
<i class="fas fa-tshirt text-blue-400 text-2xl mb-1"></i>
<p class="text-sm">普通皮肤</p>
</div>
</div>
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="金币x5000">
<div class="text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-sm">金币x5000</p>
</div>
</div>
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="稀有道具">
<div class="text-center">
<i class="fas fa-box text-purple-400 text-2xl mb-1"></i>
<p class="text-sm">稀有道具</p>
</div>
</div>
<!-- 中心区域 -->
<div class="relative flex items-center justify-center bg-gradient-to-br from-dark to-primary rounded-lg border-4 border-accent z-20">
<button id="lottery-btn" class="btn-lottery text-center">
<i class="fas fa-gift mb-1 block"></i>
开始抽奖
</button>
<!-- 指针 -->
<div class="absolute -top-6 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-accent clip-triangle-down z-30"></div>
</div>
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="限定皮肤">
<div class="text-center">
<i class="fas fa-award text-yellow-400 text-2xl mb-1"></i>
<p class="text-sm">限定皮肤</p>
</div>
</div>
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="金币x2000">
<div class="text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-sm">金币x2000</p>
</div>
</div>
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="史诗道具">
<div class="text-center">
<i class="fas fa-cube text-green-400 text-2xl mb-1"></i>
<p class="text-sm">史诗道具</p>
</div>
</div>
<div class="prize-item bg-dark/60 border border-primary/20" data-prize="金币x3000">
<div class="text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-sm">金币x3000</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 抽奖按钮 -->
<div class="text-center mt-10 mb-16">
<button id="big-lottery-btn" class="btn-lottery text-lg">
<i class="fas fa-gift mr-2"></i>
十连抽
</button>
<p class="mt-3 text-light/60 text-sm">十连抽必中稀有物品！</p>
</div>
<!-- 奖品展示区 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl p-6 border border-primary/20">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-trophy text-accent mr-2"></i>
奖品池
</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-xs">金币x1000</p>
<p class="text-accent/70 text-xs mt-1">概率：30%</p>
</div>
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-xs">金币x2000</p>
<p class="text-accent/70 text-xs mt-1">概率：20%</p>
</div>
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-xs">金币x3000</p>
<p class="text-accent/70 text-xs mt-1">概率：15%</p>
</div>
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-coins text-accent text-2xl mb-1"></i>
<p class="text-xs">金币x5000</p>
<p class="text-accent/70 text-xs mt-1">概率：10%</p>
</div>
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-tshirt text-blue-400 text-2xl mb-1"></i>
<p class="text-xs">普通皮肤</p>
<p class="text-accent/70 text-xs mt-1">概率：12%</p>
</div>
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-box text-purple-400 text-2xl mb-1"></i>
<p class="text-xs">稀有道具</p>
<p class="text-accent/70 text-xs mt-1">概率：8%</p>
</div>
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-cube text-green-400 text-2xl mb-1"></i>
<p class="text-xs">史诗道具</p>
<p class="text-accent/70 text-xs mt-1">概率：4%</p>
</div>
<div class="bg-dark/60 rounded-lg p-3 text-center">
<i class="fas fa-award text-yellow-400 text-2xl mb-1"></i>
<p class="text-xs">限定皮肤</p>
<p class="text-accent/70 text-xs mt-1">概率：1%</p>
</div>
</div>
</div>
</div>
<!-- 中奖记录 -->
<div class="max-w-4xl mx-auto mt-12">
<div class="bg-dark/40 backdrop-blur-sm rounded-xl p-6 border border-primary/20">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-history text-secondary mr-2"></i>
最近中奖记录
</h3>
<div id="prize-history" class="space-y-2 max-h-40 overflow-y-auto pr-2">
<div class="bg-dark/60 rounded-lg p-2 flex justify-between items-center text-sm">
<div class="flex items-center">
<i class="fas fa-user-circle mr-2 text-primary"></i>
<span>玩家12345</span>
</div>
<span class="text-accent">获得 限定皮肤</span>
</div>
<div class="bg-dark/60 rounded-lg p-2 flex justify-between items-center text-sm">
<div class="flex items-center">
<i class="fas fa-user-circle mr-2 text-primary"></i>
<span>幸运之星</span>
</div>
<span class="text-accent">获得 史诗道具</span>
</div>
<div class="bg-dark/60 rounded-lg p-2 flex justify-between items-center text-sm">
<div class="flex items-center">
<i class="fas fa-user-circle mr-2 text-primary"></i>
<span>游戏达人</span>
</div>
<span class="text-accent">获得 金币x5000</span>
</div>
</div>
</div>
</div>
</main>
<!-- 中奖结果弹窗 -->
<div id="result-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 hidden">
<div class="bg-gradient-to-b from-primary to-dark rounded-2xl border-4 border-accent p-8 max-w-md w-full mx-4 transform transition-all duration-500 scale-90 opacity-0" id="modal-content">
<div class="text-center">
<div class="w-20 h-20 bg-accent/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i id="result-icon" class="fas fa-gift text-4xl text-accent"></i>
</div>
<h3 class="text-2xl font-bold mb-2" id="result-title">恭喜中奖！</h3>
<p class="text-xl text-accent font-game mb-6" id="result-prize">限定皮肤</p>
<button id="close-modal" class="btn-lottery w-full">
确认
</button>
</div>
</div>
</div>
<script>
// 抽奖系统核心逻辑
document.addEventListener('DOMContentLoaded', () => {
// 获取DOM元素
const lotteryWheel = document.getElementById('lottery-wheel');
const lotteryBtn = document.getElementById('lottery-btn');
const bigLotteryBtn = document.getElementById('big-lottery-btn');
const ticketCountEl = document.getElementById('ticket-count');
const resultModal = document.getElementById('result-modal');
const modalContent = document.getElementById('modal-content');
const resultIcon = document.getElementById('result-icon');
const resultPrize = document.getElementById('result-prize');
const closeModal = document.getElementById('close-modal');
const prizeHistory = document.getElementById('prize-history');
// 状态变量
let ticketCount = 5;
let isSpinning = false;
let currentRotation = 0;
// 奖品配置和概率
const prizes = [
{ name: '金币x1000', icon: 'fa-coins', color: 'text-accent', probability: 30 },
{ name: '普通皮肤', icon: 'fa-tshirt', color: 'text-blue-400', probability: 12 },
{ name: '金币x5000', icon: 'fa-coins', color: 'text-accent', probability: 10 },
{ name: '稀有道具', icon: 'fa-box', color: 'text-purple-400', probability: 8 },
{ name: '限定皮肤', icon: 'fa-award', color: 'text-yellow-400', probability: 1 },
{ name: '金币x2000', icon: 'fa-coins', color: 'text-accent', probability: 20 },
{ name: '史诗道具', icon: 'fa-cube', color: 'text-green-400', probability: 4 },
{ name: '金币x3000', icon: 'fa-coins', color: 'text-accent', probability: 15 }
];
// 根据概率随机选择奖品
function selectPrize() {
const random = Math.random() * 100;
let cumulativeProbability = 0;
for (const prize of prizes) {
cumulativeProbability += prize.probability;
if (random < cumulativeProbability) {
return prize;
}
}
return prizes[0]; // 默认返回第一个奖品
}
// 执行抽奖
function spinWheel(isTenTimes = false) {
// 检查是否可以抽奖
if (isSpinning) return;
if (ticketCount < (isTenTimes ? 10 : 1)) {
showNotification('抽奖券不足！');
return;
}
isSpinning = true;
lotteryBtn.disabled = true;
bigLotteryBtn.disabled = true;
lotteryBtn.classList.add('opacity-50', 'cursor-not-allowed');
bigLotteryBtn.classList.add('opacity-50', 'cursor-not-allowed');
// 扣除抽奖券
ticketCount -= isTenTimes ? 10 : 1;
ticketCountEl.textContent = ticketCount;
if (isTenTimes) {
// 十连抽逻辑
let count = 0;
const tenPrizes = [];
// 确保十连抽至少有一个稀有物品
let hasRare = false;
while (tenPrizes.length < 10) {
const prize = selectPrize();
tenPrizes.push(prize);
if (prize.probability <= 8) hasRare = true;
}
if (!hasRare) {
// 如果没有稀有物品，替换最后一个为稀有道具
tenPrizes[9] = prizes.find(p => p.name === '稀有道具');
}
// 依次展示每个奖品
const showNextPrize = () => {
if (count >= tenPrizes.length) {
// 十连抽结束
isSpinning = false;
lotteryBtn.disabled = false;
bigLotteryBtn.disabled = false;
lotteryBtn.classList.remove('opacity-50', 'cursor-not-allowed');
bigLotteryBtn.classList.remove('opacity-50', 'cursor-not-allowed');
return;
}
const prize = tenPrizes[count];
count++;
// 旋转到随机位置
const randomRotation = 360 * 5 + (Math.random() * 360);
currentRotation += randomRotation;
lotteryWheel.style.transform = `rotate(${currentRotation}deg)`;
// 显示结果
setTimeout(() => {
showResult(prize);
// 延迟显示下一个奖品
setTimeout(showNextPrize, 1000);
}, 3000);
};
showNextPrize();
} else {
// 单抽逻辑
const prize = selectPrize();
// 计算旋转角度 (5-8圈 + 随机角度)
const randomRotation = 360 * (5 + Math.random() * 3) + (Math.random() * 360);
currentRotation += randomRotation;
lotteryWheel.style.transform = `rotate(${currentRotation}deg)`;
// 抽奖结束后显示结果
setTimeout(() => {
showResult(prize);
isSpinning = false;
lotteryBtn.disabled = false;
bigLotteryBtn.disabled = false;
lotteryBtn.classList.remove('opacity-50', 'cursor-not-allowed');
bigLotteryBtn.classList.remove('opacity-50', 'cursor-not-allowed');
}, 5000);
}
}
// 显示中奖结果
function showResult(prize) {
// 更新结果弹窗内容
resultPrize.textContent = prize.name;
resultIcon.className = `fas ${prize.icon} text-4xl ${prize.color}`;
// 显示弹窗并添加动画
resultModal.classList.remove('hidden');
setTimeout(() => {
modalContent.classList.remove('scale-90', 'opacity-0');
modalContent.classList.add('scale-100', 'opacity-100');
}, 100);
// 添加到中奖记录
addToHistory(prize);
}
// 添加到中奖记录
function addToHistory(prize) {
const userNames = ['我', '幸运玩家', '游戏高手', '抽奖达人', '好运连连'];
const randomName = userNames[Math.floor(Math.random() * userNames.length)];
const historyItem = document.createElement('div');
historyItem.className = 'bg-dark/60 rounded-lg p-2 flex justify-between items-center text-sm animate-pulse';
historyItem.innerHTML = `
<div class="flex items-center">
<i class="fas fa-user-circle mr-2 text-primary"></i>
<span>${randomName}</span>
</div>
<span class="${prize.color}">获得 ${prize.name}</span>
`;
// 添加到历史记录顶部
prizeHistory.insertBefore(historyItem, prizeHistory.firstChild);
// 移除动画类
setTimeout(() => {
historyItem.classList.remove('animate-pulse');
}, 1000);
// 限制历史记录数量
if (prizeHistory.children.length > 10) {
prizeHistory.removeChild(prizeHistory.lastChild);
}
}
// 显示通知
function showNotification(message) {
// 创建通知元素
const notification = document.createElement('div');
notification.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-dark/80 backdrop-blur-md text-light px-4 py-2 rounded-lg border border-primary/30 z-50 opacity-0 transition-opacity duration-300';
notification.textContent = message;
// 添加到页面
document.body.appendChild(notification);
// 显示通知
setTimeout(() => {
notification.classList.replace('opacity-0', 'opacity-100');
}, 100);
// 3秒后隐藏通知
setTimeout(() => {
notification.classList.replace('opacity-100', 'opacity-0');
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// 事件监听
lotteryBtn.addEventListener('click', () => spinWheel(false));
bigLotteryBtn.addEventListener('click', () => spinWheel(true));
closeModal.addEventListener('click', () => {
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-90', 'opacity-0');
setTimeout(() => {
resultModal.classList.add('hidden');
}, 300);
});
});
</script>
</body>
</html>
扫一扫
1739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
