596 lines
21 KiB
HTML
596 lines
21 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>😈 地狱点名册 - 谁是天选之子？ 😈</title>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Noto+Sans+SC:wght@700&display=swap');
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--primary: #ff4757;
|
||
|
|
--highlight: #eccc68;
|
||
|
|
--bg: #1e272e;
|
||
|
|
--card-bg: #2f3542;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: #000;
|
||
|
|
background-image: radial-gradient(circle at center, #2c3e50 0%, #000 100%);
|
||
|
|
color: #fff;
|
||
|
|
font-family: 'Noto Sans SC', sans-serif;
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
overflow: hidden;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-family: 'Creepster', cursive, 'Noto Sans SC';
|
||
|
|
color: #ff4757;
|
||
|
|
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
|
||
|
|
font-size: 3rem;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
letter-spacing: 3px;
|
||
|
|
text-align: center;
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0% { transform: scale(1); text-shadow: 0 0 10px #ff0000; }
|
||
|
|
50% { transform: scale(1.05); text-shadow: 0 0 20px #ff0000, 0 0 40px #ff4757; }
|
||
|
|
100% { transform: scale(1); text-shadow: 0 0 10px #ff0000; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
gap: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
background: rgba(255, 255, 255, 0.05);
|
||
|
|
border-radius: 20px;
|
||
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
|
||
|
|
perspective: 1000px;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-card {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
position: relative;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 4px solid transparent;
|
||
|
|
transition: all 0.1s; /* Faster transition for rapid switching */
|
||
|
|
cursor: pointer;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: var(--card-bg);
|
||
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-card img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 50%;
|
||
|
|
filter: grayscale(0.6) contrast(1.2);
|
||
|
|
transition: filter 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 选中/高亮状态 */
|
||
|
|
.avatar-card.active {
|
||
|
|
transform: scale(1.2);
|
||
|
|
border-color: var(--highlight);
|
||
|
|
box-shadow: 0 0 20px var(--highlight), 0 0 40px var(--primary);
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.avatar-card.active img {
|
||
|
|
filter: grayscale(0) contrast(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 最终选中状态 */
|
||
|
|
.avatar-card.winner {
|
||
|
|
border-color: #ff4757;
|
||
|
|
box-shadow: 0 0 50px #ff4757, 0 0 100px #ff4757;
|
||
|
|
animation: shake 0.5s infinite;
|
||
|
|
z-index: 20;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 排除状态 */
|
||
|
|
.avatar-card.loser {
|
||
|
|
opacity: 0.2;
|
||
|
|
transform: scale(0.8);
|
||
|
|
filter: grayscale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes shake {
|
||
|
|
0% { transform: translate(1px, 1px) rotate(0deg) scale(1.4); }
|
||
|
|
10% { transform: translate(-1px, -2px) rotate(-1deg) scale(1.4); }
|
||
|
|
20% { transform: translate(-3px, 0px) rotate(1deg) scale(1.4); }
|
||
|
|
30% { transform: translate(3px, 2px) rotate(0deg) scale(1.4); }
|
||
|
|
40% { transform: translate(1px, -1px) rotate(1deg) scale(1.4); }
|
||
|
|
50% { transform: translate(-1px, 2px) rotate(-1deg) scale(1.4); }
|
||
|
|
60% { transform: translate(-3px, 1px) rotate(0deg) scale(1.4); }
|
||
|
|
70% { transform: translate(3px, 1px) rotate(-1deg) scale(1.4); }
|
||
|
|
80% { transform: translate(-1px, -1px) rotate(1deg) scale(1.4); }
|
||
|
|
90% { transform: translate(1px, 2px) rotate(0deg) scale(1.4); }
|
||
|
|
100% { transform: translate(1px, -2px) rotate(-1deg) scale(1.4); }
|
||
|
|
}
|
||
|
|
|
||
|
|
#actionBtn {
|
||
|
|
margin-top: 40px;
|
||
|
|
padding: 15px 60px;
|
||
|
|
font-size: 2rem;
|
||
|
|
background: linear-gradient(45deg, #ff4757, #ff6b6b);
|
||
|
|
border: none;
|
||
|
|
border-radius: 50px;
|
||
|
|
color: white;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 0 0 20px rgba(255, 71, 87, 0.6);
|
||
|
|
transition: all 0.2s;
|
||
|
|
font-family: 'Creepster', 'Noto Sans SC';
|
||
|
|
text-transform: uppercase;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
#actionBtn:hover {
|
||
|
|
transform: scale(1.1);
|
||
|
|
box-shadow: 0 0 40px rgba(255, 71, 87, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
#actionBtn:active {
|
||
|
|
transform: scale(0.95);
|
||
|
|
}
|
||
|
|
|
||
|
|
#actionBtn:disabled {
|
||
|
|
background: #555;
|
||
|
|
cursor: not-allowed;
|
||
|
|
box-shadow: none;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 弹幕/吐槽文字 */
|
||
|
|
.danmu {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: rgba(255,255,255,0.8);
|
||
|
|
white-space: nowrap;
|
||
|
|
animation: fly 6s linear forwards;
|
||
|
|
pointer-events: none;
|
||
|
|
font-weight: bold;
|
||
|
|
text-shadow: 2px 2px 4px #000;
|
||
|
|
z-index: 5;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fly {
|
||
|
|
from { transform: translateX(100vw); }
|
||
|
|
to { transform: translateX(-100%); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 结果展示层 */
|
||
|
|
#resultOverlay {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background: rgba(0,0,0,0.9);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: 100;
|
||
|
|
opacity: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#resultOverlay.show {
|
||
|
|
opacity: 1;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#resultImage {
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 10px solid #ff4757;
|
||
|
|
box-shadow: 0 0 100px #ff4757;
|
||
|
|
object-fit: cover;
|
||
|
|
animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
|
|
}
|
||
|
|
|
||
|
|
#resultText {
|
||
|
|
margin-top: 30px;
|
||
|
|
font-size: 4rem;
|
||
|
|
color: #fffa65;
|
||
|
|
font-family: 'Creepster', cursive;
|
||
|
|
text-shadow: 0 0 20px #ff9f43;
|
||
|
|
text-align: center;
|
||
|
|
animation: fadeInUp 1s ease-out 0.5s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
#closeResult {
|
||
|
|
margin-top: 40px;
|
||
|
|
padding: 10px 30px;
|
||
|
|
background: transparent;
|
||
|
|
border: 2px solid #fff;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
border-radius: 30px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s;
|
||
|
|
animation: fadeInUp 1s ease-out 1s both;
|
||
|
|
}
|
||
|
|
#closeResult:hover {
|
||
|
|
background: #fff;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes popIn {
|
||
|
|
0% { transform: scale(0) rotate(-180deg); }
|
||
|
|
100% { transform: scale(1) rotate(0deg); }
|
||
|
|
}
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
from { opacity: 0; transform: translateY(20px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 闪光特效 */
|
||
|
|
#flashOverlay {
|
||
|
|
position: fixed;
|
||
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
||
|
|
background: white;
|
||
|
|
opacity: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 200;
|
||
|
|
}
|
||
|
|
@keyframes flashAnim {
|
||
|
|
0% { opacity: 1; }
|
||
|
|
100% { opacity: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 粒子画布 */
|
||
|
|
#particleCanvas {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 150;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="flashOverlay"></div>
|
||
|
|
<canvas id="particleCanvas"></canvas>
|
||
|
|
|
||
|
|
<h1>🔥 谁是今天的“天选之子”？ 🔥</h1>
|
||
|
|
|
||
|
|
<div class="grid-container" id="grid">
|
||
|
|
<!-- Avatars will be injected here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button id="actionBtn" onclick="startRoulette()">开始审判</button>
|
||
|
|
|
||
|
|
<div id="resultOverlay">
|
||
|
|
<img id="resultImage" src="" alt="Winner">
|
||
|
|
<div id="resultText">恭喜你！</div>
|
||
|
|
<button id="closeResult" onclick="resetGame()">再来一次</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 配置
|
||
|
|
const totalImages = 12;
|
||
|
|
const imagePath = './Result/';
|
||
|
|
const grid = document.getElementById('grid');
|
||
|
|
const funnyComments = [
|
||
|
|
"不会是你吧？", "感觉大事不妙...", "快跑啊！", "瑟瑟发抖", "这是什么运气？",
|
||
|
|
"千万别是我...", "救命🆘", "哈哈哈哈", "紧张时刻", "一定要挺住！",
|
||
|
|
"今晚吃鸡", "全村的希望", "这是天意", "无法逃避的命运", "别看我，看屏幕！"
|
||
|
|
];
|
||
|
|
|
||
|
|
const resultTitles = [
|
||
|
|
"💀 倒霉蛋诞生 💀",
|
||
|
|
"🤡 小丑竟是你 🤡",
|
||
|
|
"🎉 恭喜中奖 🎉",
|
||
|
|
"👑 天选之子 👑",
|
||
|
|
"😱 跑不掉了 😱",
|
||
|
|
"🎯 完美命中 🎯",
|
||
|
|
"😈 接受审判吧 😈"
|
||
|
|
];
|
||
|
|
|
||
|
|
// --- 音效管理器 (Web Audio API) ---
|
||
|
|
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||
|
|
|
||
|
|
const SoundMgr = {
|
||
|
|
playTick: function() {
|
||
|
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
||
|
|
const osc = audioCtx.createOscillator();
|
||
|
|
const gain = audioCtx.createGain();
|
||
|
|
|
||
|
|
osc.type = 'square';
|
||
|
|
osc.frequency.setValueAtTime(800, audioCtx.currentTime);
|
||
|
|
osc.frequency.exponentialRampToValueAtTime(400, audioCtx.currentTime + 0.05);
|
||
|
|
|
||
|
|
gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
|
||
|
|
gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.05);
|
||
|
|
|
||
|
|
osc.connect(gain);
|
||
|
|
gain.connect(audioCtx.destination);
|
||
|
|
|
||
|
|
osc.start();
|
||
|
|
osc.stop(audioCtx.currentTime + 0.05);
|
||
|
|
},
|
||
|
|
|
||
|
|
playWin: function() {
|
||
|
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
||
|
|
|
||
|
|
const now = audioCtx.currentTime;
|
||
|
|
// 创建一个简单的胜利和弦 (C Major: C4, E4, G4, C5)
|
||
|
|
[261.63, 329.63, 392.00, 523.25].forEach((freq, i) => {
|
||
|
|
const osc = audioCtx.createOscillator();
|
||
|
|
const gain = audioCtx.createGain();
|
||
|
|
|
||
|
|
osc.type = 'triangle';
|
||
|
|
osc.frequency.value = freq;
|
||
|
|
|
||
|
|
// 延迟一点点播放，形成琶音效果
|
||
|
|
const startTime = now + i * 0.05;
|
||
|
|
|
||
|
|
gain.gain.setValueAtTime(0, startTime);
|
||
|
|
gain.gain.linearRampToValueAtTime(0.3, startTime + 0.1);
|
||
|
|
gain.gain.exponentialRampToValueAtTime(0.01, startTime + 1.5);
|
||
|
|
|
||
|
|
osc.connect(gain);
|
||
|
|
gain.connect(audioCtx.destination);
|
||
|
|
|
||
|
|
osc.start(startTime);
|
||
|
|
osc.stop(startTime + 2.0);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加一个低音轰鸣
|
||
|
|
const bassOsc = audioCtx.createOscillator();
|
||
|
|
const bassGain = audioCtx.createGain();
|
||
|
|
bassOsc.type = 'sawtooth';
|
||
|
|
bassOsc.frequency.setValueAtTime(100, now);
|
||
|
|
bassOsc.frequency.exponentialRampToValueAtTime(50, now + 1);
|
||
|
|
bassGain.gain.setValueAtTime(0.5, now);
|
||
|
|
bassGain.gain.exponentialRampToValueAtTime(0.01, now + 1.5);
|
||
|
|
bassOsc.connect(bassGain);
|
||
|
|
bassGain.connect(audioCtx.destination);
|
||
|
|
bassOsc.start(now);
|
||
|
|
bassOsc.stop(now + 1.5);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- 粒子系统 (特效) ---
|
||
|
|
const particleCanvas = document.getElementById('particleCanvas');
|
||
|
|
const pCtx = particleCanvas.getContext('2d');
|
||
|
|
let particles = [];
|
||
|
|
|
||
|
|
function resizeCanvas() {
|
||
|
|
particleCanvas.width = window.innerWidth;
|
||
|
|
particleCanvas.height = window.innerHeight;
|
||
|
|
}
|
||
|
|
window.addEventListener('resize', resizeCanvas);
|
||
|
|
resizeCanvas();
|
||
|
|
|
||
|
|
class Particle {
|
||
|
|
constructor(x, y) {
|
||
|
|
this.x = x;
|
||
|
|
this.y = y;
|
||
|
|
const angle = Math.random() * Math.PI * 2;
|
||
|
|
const speed = Math.random() * 10 + 5;
|
||
|
|
this.vx = Math.cos(angle) * speed;
|
||
|
|
this.vy = Math.sin(angle) * speed;
|
||
|
|
this.life = 1.0;
|
||
|
|
this.color = `hsl(${Math.random() * 60 + 330}, 100%, 50%)`; // Red/Orange/Yellow spectrum
|
||
|
|
this.size = Math.random() * 10 + 5;
|
||
|
|
}
|
||
|
|
update() {
|
||
|
|
this.x += this.vx;
|
||
|
|
this.y += this.vy;
|
||
|
|
this.vy += 0.2; // Gravity
|
||
|
|
this.life -= 0.02;
|
||
|
|
this.size *= 0.95;
|
||
|
|
}
|
||
|
|
draw() {
|
||
|
|
pCtx.globalAlpha = this.life;
|
||
|
|
pCtx.fillStyle = this.color;
|
||
|
|
pCtx.beginPath();
|
||
|
|
pCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||
|
|
pCtx.fill();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function spawnExplosion(x, y) {
|
||
|
|
for(let i=0; i<50; i++) {
|
||
|
|
particles.push(new Particle(x, y));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function animateParticles() {
|
||
|
|
pCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
|
||
|
|
for (let i = particles.length - 1; i >= 0; i--) {
|
||
|
|
const p = particles[i];
|
||
|
|
p.update();
|
||
|
|
p.draw();
|
||
|
|
if (p.life <= 0) particles.splice(i, 1);
|
||
|
|
}
|
||
|
|
requestAnimationFrame(animateParticles);
|
||
|
|
}
|
||
|
|
animateParticles();
|
||
|
|
|
||
|
|
// --- 核心逻辑 ---
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
function init() {
|
||
|
|
grid.innerHTML = '';
|
||
|
|
for (let i = 1; i <= totalImages; i++) {
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.className = 'avatar-card';
|
||
|
|
div.id = `card-${i}`;
|
||
|
|
|
||
|
|
const img = document.createElement('img');
|
||
|
|
img.src = `${imagePath}${i}.png`;
|
||
|
|
img.onerror = function() { this.src = 'https://via.placeholder.com/150?text=No+Image'; }; // Fallback
|
||
|
|
|
||
|
|
div.appendChild(img);
|
||
|
|
grid.appendChild(div);
|
||
|
|
}
|
||
|
|
startDanmu();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 随机弹幕
|
||
|
|
function startDanmu() {
|
||
|
|
setInterval(() => {
|
||
|
|
if(Math.random() > 0.7) return; // 并不是每次都发
|
||
|
|
const text = funnyComments[Math.floor(Math.random() * funnyComments.length)];
|
||
|
|
const el = document.createElement('div');
|
||
|
|
el.className = 'danmu';
|
||
|
|
el.innerText = text;
|
||
|
|
el.style.top = Math.random() * 80 + 'vh';
|
||
|
|
el.style.fontSize = (Math.random() * 1.5 + 1) + 'rem';
|
||
|
|
document.body.appendChild(el);
|
||
|
|
|
||
|
|
// 动画结束后移除
|
||
|
|
setTimeout(() => { el.remove(); }, 6000);
|
||
|
|
}, 800);
|
||
|
|
}
|
||
|
|
|
||
|
|
let isSpinning = false;
|
||
|
|
let currentIndex = -1;
|
||
|
|
|
||
|
|
function startRoulette() {
|
||
|
|
if (isSpinning) return;
|
||
|
|
|
||
|
|
// 首次点击时解锁 AudioContext (浏览器限制)
|
||
|
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
||
|
|
|
||
|
|
isSpinning = true;
|
||
|
|
document.getElementById('actionBtn').disabled = true;
|
||
|
|
document.getElementById('actionBtn').innerText = "审判中...";
|
||
|
|
|
||
|
|
// 重置状态
|
||
|
|
document.querySelectorAll('.avatar-card').forEach(c => {
|
||
|
|
c.classList.remove('active', 'winner', 'loser');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 动画逻辑
|
||
|
|
let speed = 50; // 初始速度 (ms)
|
||
|
|
let steps = 0;
|
||
|
|
const minSteps = 30; // 至少跑多少步
|
||
|
|
const maxSteps = minSteps + Math.floor(Math.random() * 20); // 随机总步数
|
||
|
|
|
||
|
|
const cards = document.querySelectorAll('.avatar-card');
|
||
|
|
|
||
|
|
function step() {
|
||
|
|
// 清除上一个高亮
|
||
|
|
if (currentIndex !== -1) {
|
||
|
|
cards[currentIndex].classList.remove('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 随机选择下一个
|
||
|
|
let nextIndex;
|
||
|
|
do {
|
||
|
|
nextIndex = Math.floor(Math.random() * totalImages);
|
||
|
|
} while (nextIndex === currentIndex);
|
||
|
|
|
||
|
|
currentIndex = nextIndex;
|
||
|
|
cards[currentIndex].classList.add('active');
|
||
|
|
SoundMgr.playTick(); // 播放音效
|
||
|
|
|
||
|
|
steps++;
|
||
|
|
|
||
|
|
if (steps < maxSteps) {
|
||
|
|
// 计算下一步的速度
|
||
|
|
if (steps < minSteps * 0.7) {
|
||
|
|
speed = Math.max(50, speed - 5); // 加速
|
||
|
|
} else {
|
||
|
|
speed += (steps - minSteps * 0.7) * 4; // 减速更明显
|
||
|
|
}
|
||
|
|
setTimeout(step, speed);
|
||
|
|
} else {
|
||
|
|
// 停止
|
||
|
|
endGame(currentIndex);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
step();
|
||
|
|
}
|
||
|
|
|
||
|
|
function endGame(winnerIndex) {
|
||
|
|
SoundMgr.playWin(); // 播放胜利音效
|
||
|
|
|
||
|
|
const cards = document.querySelectorAll('.avatar-card');
|
||
|
|
const winnerCard = cards[winnerIndex];
|
||
|
|
|
||
|
|
// 屏幕闪光特效
|
||
|
|
const flash = document.getElementById('flashOverlay');
|
||
|
|
flash.style.animation = 'none';
|
||
|
|
flash.offsetHeight; /* trigger reflow */
|
||
|
|
flash.style.animation = 'flashAnim 0.5s ease-out';
|
||
|
|
|
||
|
|
// 粒子爆炸特效 (在卡片位置)
|
||
|
|
const rect = winnerCard.getBoundingClientRect();
|
||
|
|
const centerX = rect.left + rect.width / 2;
|
||
|
|
const centerY = rect.top + rect.height / 2;
|
||
|
|
spawnExplosion(centerX, centerY);
|
||
|
|
|
||
|
|
// 视觉效果：其他人变暗，赢家高亮震动
|
||
|
|
cards.forEach((c, idx) => {
|
||
|
|
if (idx !== winnerIndex) {
|
||
|
|
c.classList.add('loser');
|
||
|
|
} else {
|
||
|
|
c.classList.add('winner');
|
||
|
|
c.classList.remove('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 延迟一点显示大图结果
|
||
|
|
setTimeout(() => {
|
||
|
|
const overlay = document.getElementById('resultOverlay');
|
||
|
|
const resultImg = document.getElementById('resultImage');
|
||
|
|
const resultText = document.getElementById('resultText');
|
||
|
|
|
||
|
|
resultImg.src = `${imagePath}${winnerIndex + 1}.png`;
|
||
|
|
resultText.innerText = resultTitles[Math.floor(Math.random() * resultTitles.length)];
|
||
|
|
|
||
|
|
overlay.classList.add('show');
|
||
|
|
isSpinning = false;
|
||
|
|
document.getElementById('actionBtn').disabled = false;
|
||
|
|
document.getElementById('actionBtn').innerText = "再来一局";
|
||
|
|
|
||
|
|
// 全屏粒子特效
|
||
|
|
spawnExplosion(window.innerWidth/2, window.innerHeight/2);
|
||
|
|
setTimeout(() => spawnExplosion(window.innerWidth/3, window.innerHeight/3), 200);
|
||
|
|
setTimeout(() => spawnExplosion(window.innerWidth*2/3, window.innerHeight*2/3), 400);
|
||
|
|
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
|
||
|
|
function resetGame() {
|
||
|
|
document.getElementById('resultOverlay').classList.remove('show');
|
||
|
|
document.querySelectorAll('.avatar-card').forEach(c => {
|
||
|
|
c.classList.remove('active', 'winner', 'loser');
|
||
|
|
});
|
||
|
|
document.getElementById('actionBtn').innerText = "开始审判";
|
||
|
|
}
|
||
|
|
|
||
|
|
init();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|