<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>十连抽 · 游戏风抽奖</title>
<style>
/* ====== 基础样式 ====== */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",sans-serif}
body{background:#111;color:#fff;overflow:hidden}
canvas{position:fixed;top:0;left:0;z-index:0}
.ui{z-index:1;position:relative;display:flex;flex-direction:column;align-items:center;height:100vh;justify-content:center}
.title{font-size:48px;margin-bottom:20px;text-shadow:0 0 10px #fff}
.btn{display:inline-block;padding:14px 40px;font-size:20px;border:none;border-radius:6px;cursor:pointer;background:linear-gradient(135deg,#ff00cc 0%,#3333ff 100%);color:#fff;transition:.3s;user-select:none}
.btn:hover{transform:scale(1.05);box-shadow:0 0 15px #fff}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.result-area{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;max-width:900px}
.card{width:100px;height:160px;border-radius:8px;background:#222;position:relative;perspective:1000px;cursor:pointer}
.card-inner{width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}
.card.flipped .card-inner{transform:rotateY(180deg)}
.face,.back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px}
.face{background-size:cover;background-position:center;transform:rotateY(180deg)}
.back{background:url('https://i.imgur.com/7dGVK3V.png') center/cover}
/* 稀有度光效 */
.card[data-rarity="4"] .face{box-shadow:0 0 15px 3px #a855f7}
.card[data-rarity="5"] .face{box-shadow:0 0 20px 5px #facc15}
/* 动画 */
@keyframes flyIn{
0%{transform:translateY(-120vh) scale(.4);opacity:0}
100%{transform:translateY(0) scale(1);opacity:1}
}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<div class="ui">
<h1 class="title">十连抽</h1>
<button class="btn" id="drawBtn">开始十连</button>
<div class="result-area" id="result"></div>
</div>
<script>
/* =======================
1. 背景粒子
======================= */
const canvas = document.getElementById('bg');
const ctx = canvas.getContext('2d');
let W, H;
function resize(){ W = canvas.width = innerWidth; H = canvas.height = innerHeight; }
window.addEventListener('resize', resize); resize();
const particles = Array.from({length:60}, ()=>({
x:Math.random()*W,
y:Math.random()*H,
r:Math.random()*2+1,
d:Math.random()*60,
color:"rgba(255,255,255,0.4)"
}));
function drawParticles(){
ctx.clearRect(0,0,W,H);
particles.forEach(p=>{
ctx.beginPath();
ctx.fillStyle=p.color;
ctx.arc(p.x,p.y,p.r,0,Math.PI*2,true);
ctx.fill();
});
updateParticles();
}
function updateParticles(){
particles.forEach(p=>{
p.y += Math.cos(p.d)+1 + p.r/2;
p.x += Math.sin(p.d) * 0.5;
if(p.x>W+5||p.x<-5||p.y>H+5){
p.x = Math.random()*W;
p.y = -10;
}
});
}
setInterval(drawParticles, 30);
/* =======================
2. 奖品池
======================= */
const pool = [
{name:'刻晴', rarity:5, img:'https://i.imgur.com/oQfSRf9.jpg'},
{name:'迪卢克', rarity:5, img:'https://i.imgur.com/9VnV6vX.jpg'},
{name:'莫娜', rarity:5, img:'https://i.imgur.com/0NA7f5p.jpg'},
{name:'琴', rarity:5, img:'https://i.imgur.com/3XRmrzZ.jpg'},
{name:'七七', rarity:5, img:'https://i.imgur.com/FTV6bYd.jpg'},
{name:'行秋', rarity:4, img:'https://i.imgur.com/4aUfVe5.jpg'},
{name:'香菱', rarity:4, img:'https://i.imgur.com/8Zgv00U.jpg'},
{name:'重云', rarity:4, img:'https://i.imgur.com/QsL7LVA.jpg'},
{name:'北斗', rarity:4, img:'https://i.imgur.com/8aF0sf9.jpg'},
{name:'凝光', rarity:4, img:'https://i.imgur.com/4kVw1aB.jpg'},
{name:'安柏', rarity:3, img:'https://i.imgur.com/8n9TTrR.jpg'},
{name:'凯亚', rarity:3, img:'https://i.imgur.com/3X9tOaL.jpg'},
{name:'丽莎', rarity:3, img:'https://i.imgur.com/1N6MQjE.jpg'},
{name:'芭芭拉', rarity:3, img:'https://i.imgur.com/VpYFs4N.jpg'}
];
/* =======================
3. 抽奖逻辑
======================= */
const pity4 = 10; // 10 抽必出 4 星
const pity5 = 90; // 90 抽必出 5 星
let counter4 = 0;
let counter5 = 0;
function drawOnce(){
counter4++; counter5++;
let rarity;
if(counter5 >= pity5){ rarity = 5; counter5 = 0; }
else if(counter4 >= pity4){ rarity = 4; counter4 = 0; }
else{
const rand = Math.random();
if(rand < 0.006) rarity = 5;
else if(rand < 0.057) rarity = 4;
else rarity = 3;
}
const list = pool.filter(p=>p.rarity===rarity);
return list[Math.floor(Math.random()*list.length)];
}
function drawTen(){
return Array.from({length:10}, drawOnce);
}
/* =======================
4. DOM 交互
======================= */
const btn = document.getElementById('drawBtn');
const result = document.getElementById('result');
btn.addEventListener('click', start);
function start(){
btn.disabled = true;
result.innerHTML = '';
const rewards = drawTen();
rewards.forEach((item, idx)=>{
const card = document.createElement('div');
card.className = 'card';
card.dataset.rarity = item.rarity;
card.innerHTML = `
<div class="card-inner">
<div class="back"></div>
<div class="face" style="background-image:url(${item.img})"></div>
</div>`;
card.style.animation = `flyIn .6s forwards ${idx*0.07}s`;
result.appendChild(card);
});
// 逐张翻面
const cards = result.querySelectorAll('.card');
cards.forEach((c,i)=>{
setTimeout(()=>c.classList.add('flipped'), 1200 + i*100);
});
// 全部结束后允许再抽
setTimeout(()=>btn.disabled=false, 2500);
}
</script>
</body>
</html>运行截图
