'commit'
This commit is contained in:
HuangHai
595
static/Test/地狱大转盘V2.html
Normal file
595
static/Test/地狱大转盘V2.html
Normal file
@@ -0,0 +1,595 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user