<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
padding: 20px;
overflow-x: hidden;
color: white;
}
.container {
text-align: center;
max-width: 1200px;
width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.currency-panel {
display: flex;
gap: 20px;
background: rgba(255, 255, 255, 0.1);
padding: 15px 25px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.currency-item {
display: flex;
align-items: center;
gap: 8px;
}
.currency-icon {
font-size: 1.5rem;
}
.currency-amount {
font-size: 1.2rem;
font-weight: bold;
}
.main-content {
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: center;
}
.left-panel, .right-panel {
flex: 1;
min-width: 300px;
max-width: 500px;
}
h1 {
color: white;
margin-bottom: 15px;
font-size: 2.8rem;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
letter-spacing: 2px;
background: linear-gradient(90deg, #ff9a00, #ff6a00, #ff0050);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
font-size: 1.2rem;
}
.rarity-info {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.rarity-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
}
.rarity-common { background: rgba(255, 255, 255, 0.1); }
.rarity-uncommon { background: rgba(76, 175, 80, 0.2); }
.rarity-rare { background: rgba(33, 150, 243, 0.2); }
.rarity-epic { background: rgba(156, 39, 176, 0.2); }
.rarity-legendary { background: rgba(255, 152, 0, 0.2); }
.rarity-mythic { background: rgba(244, 67, 54, 0.2); }
.rarity-color {
width: 15px;
height: 15px;
border-radius: 50%;
}
.color-common { background: #cccccc; }
.color-uncommon { background: #4caf50; }
.color-rare { background: #2196f3; }
.color-epic { background: #9c27b0; }
.color-legendary { background: #ff9800; }
.color-mythic { background: #f44336; }
.blind-box {
width: 300px;
height: 300px;
margin: 0 auto 20px;
background: linear-gradient(145deg, #ff9a00, #ff6a00);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3),
inset 0 -8px 15px rgba(0, 0, 0, 0.2),
inset 0 8px 15px rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
border: 8px solid #ff5500;
}
.blind-box:hover {
transform: scale(1.03);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
inset 0 -8px 15px rgba(0, 0, 0, 0.2),
inset 0 8px 15px rgba(255, 255, 255, 0.4);
}
.blind-box:active {
transform: scale(0.98);
}
.box-content {
font-size: 5rem;
color: white;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transition: all 0.5s;
}
.purchase-panel {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 20px;
}
.purchase-btn {
background: linear-gradient(145deg, #4caf50, #2e7d32);
border: none;
color: white;
padding: 12px 25px;
border-radius: 15px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.purchase-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.purchase-btn:active {
transform: translateY(0);
}
.result {
min-height: 220px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.5s;
}
.meme {
font-size: 4.5rem;
line-height: 1.2;
margin: 10px 0;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
.meme-text {
font-size: 1.6rem;
margin-top: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.5s;
font-weight: bold;
line-height: 1.4;
}
.rarity-badge {
display: inline-block;
padding: 5px 15px;
border-radius: 15px;
font-size: 1rem;
margin-top: 10px;
font-weight: bold;
}
.counter {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
}
.counter span {
background: rgba(255, 255, 255, 0.1);
padding: 10px 25px;
border-radius: 20px;
font-size: 1.1rem;
}
.inventory {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
max-height: 600px;
overflow-y: auto;
}
.inventory h2 {
margin-bottom: 20px;
font-size: 1.8rem;
color: #ff9a00;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 25px;
}
.stat-item {
background: rgba(255, 255, 255, 0.08);
padding: 15px;
border-radius: 15px;
text-align: center;
transition: all 0.3s;
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.12);
}
.stat-count {
font-size: 2rem;
font-weight: bold;
margin: 5px 0;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
.inventory-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 15px;
}
.inventory-item {
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 15px 10px;
font-size: 2.5rem;
text-align: center;
transition: all 0.3s;
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.inventory-item:hover {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.12);
}
.inventory-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
opacity: 0.7;
}
.item-common::after { background: #cccccc; }
.item-uncommon::after { background: #4caf50; }
.item-rare::after { background: #2196f3; }
.item-epic::after { background: #9c27b0; }
.item-legendary::after { background: #ff9800; }
.item-mythic::after { background: #f44336; }
.meme-name {
font-size: 0.7rem;
opacity: 0.8;
text-align: center;
line-height: 1.2;
max-height: 2.4em;
overflow: hidden;
}
.meme-price {
font-size: 0.6rem;
color: #ffd700;
margin-top: 3px;
}
.sell-btn {
background: linear-gradient(145deg, #f44336, #c62828);
border: none;
color: white;
padding: 5px 10px;
border-radius: 10px;
font-size: 0.7rem;
cursor: pointer;
margin-top: 5px;
transition: all 0.3s;
}
.sell-btn:hover {
transform: scale(1.05);
}
.empty-inventory {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
opacity: 0.6;
font-size: 1.2rem;
}
.instructions {
color: rgba(255, 255, 255, 0.6);
margin-top: 10px;
font-size: 1rem;
}
.sparkle {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
pointer-events: none;
opacity: 0;
}
/* 稀有度特效 */
.common-glow { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
.uncommon-glow { box-shadow: 0 0 15px rgba(76, 175, 80, 0.7); }
.rare-glow { box-shadow: 0 0 20px rgba(33, 150, 243, 0.8); }
.epic-glow { box-shadow: 0 0 25px rgba(156, 39, 176, 0.9); }
.legendary-glow { box-shadow: 0 0 30px rgba(255, 152, 0, 1); }
.mythic-glow {
box-shadow: 0 0 40px rgba(244, 67, 54, 1);
animation: mythic-pulse 2s infinite alternate;
}
@keyframes mythic-pulse {
from { box-shadow: 0 0 20px rgba(244, 67, 54, 0.8); }
to { box-shadow: 0 0 40px rgba(244, 67, 54, 1), 0 0 60px rgba(244, 67, 54, 0.6); }
}
/* 动画效果 */
.pulse {
animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-10px); }
40%, 80% { transform: translateX(10px); }
}
.bounce {
animation: bounce 0.5s;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.open-animation {
animation: open 0.8s forwards;
}
@keyframes open {
0% { transform: scale(1); }
50% { transform: scale(1.1) rotate(5deg); }
100% { transform: scale(1); }
}
@media (max-width: 900px) {
.main-content {
flex-direction: column;
align-items: center;
}
.left-panel, .right-panel {
width: 100%;
max-width: 500px;
}
.header {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 600px) {
h1 { font-size: 2rem; }
.blind-box { width: 250px; height: 250px; }
.meme { font-size: 3.5rem; }
.meme-text { font-size: 1.4rem; }
.rarity-info { gap: 10px; }
.rarity-item { padding: 6px 12px; font-size: 0.8rem; }
.stats { grid-template-columns: repeat(2, 1fr); }
.inventory-item { font-size: 2rem; }
.purchase-panel { flex-direction: column; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div>
<h1>网络热梗盲盒</h1>
<p class="subtitle">购买盲盒，收集热梗，交易变现！</p>
</div>
<div class="currency-panel">
<div class="currency-item">
<div class="currency-icon">💰</div>
<div class="currency-amount" id="coinAmount">1000</div>
</div>
<div class="currency-item">
<div class="currency-icon">💎</div>
<div class="currency-amount" id="diamondAmount">50</div>
</div>
</div>
</div>
<div class="rarity-info">
<div class="rarity-item rarity-common">
<div class="rarity-color color-common"></div>
<span>普通</span>
</div>
<div class="rarity-item rarity-uncommon">
<div class="rarity-color color-uncommon"></div>
<span>优秀</span>
</div>
<div class="rarity-item rarity-rare">
<div class="rarity-color color-rare"></div>
<span>稀有</span>
</div>
<div class="rarity-item rarity-epic">
<div class="rarity-color color-epic"></div>
<span>史诗</span>
</div>
<div class="rarity-item rarity-legendary">
<div class="rarity-color color-legendary"></div>
<span>传说</span>
</div>
<div class="rarity-item rarity-mythic">
<div class="rarity-color color-mythic"></div>
<span>神话</span>
</div>
</div>
<div class="main-content">
<div class="left-panel">
<div class="counter">
<span>已抽取: <span id="drawCount">0</span> 次</span>
<span>拥有盲盒: <span id="boxCount">3</span> 个</span>
</div>
<div class="purchase-panel">
<button class="purchase-btn" id="buyBoxBtn">购买盲盒 (💰100)</button>
<button class="purchase-btn" id="buyMultiBtn">购买10个 (💰900)</button>
</div>
<div class="blind-box" id="blindBox">
<div class="box-content" id="boxContent">📦</div>
</div>
<div class="result" id="result">
<div class="meme" id="memeDisplay">点击盲盒开始抽奖</div>
<div class="meme-text" id="memeName">等待抽取...</div>
<div class="rarity-badge" id="rarityBadge"></div>
</div>
<div class="instructions">
提示: 每日登录可获得免费盲盒，稀有热梗可以高价出售！
</div>
</div>
<div class="right-panel">
<div class="inventory">
<h2>我的热梗仓库</h2>
<div class="stats">
<div class="stat-item">
<div class="stat-count" id="totalCount">0</div>
<div class="stat-label">总收藏数</div>
</div>
<div class="stat-item">
<div class="stat-count" id="commonCount">0</div>
<div class="stat-label">普通</div>
</div>
<div class="stat-item">
<div class="stat-count" id="uncommonCount">0</div>
<div class="stat-label">优秀</div>
</div>
<div class="stat-item">
<div class="stat-count" id="rareCount">0</div>
<div class="stat-label">稀有</div>
</div>
<div class="stat-item">
<div class="stat-count" id="epicCount">0</div>
<div class="stat-label">史诗</div>
</div>
<div class="stat-item">
<div class="stat-count" id="legendaryCount">0</div>
<div class="stat-label">传说</div>
</div>
<div class="stat-item">
<div class="stat-count" id="mythicCount">0</div>
<div class="stat-label">神话</div>
</div>
<div class="stat-item">
<div class="stat-count" id="totalValue">0</div>
<div class="stat-label">总价值</div>
</div>
</div>
<div class="inventory-items" id="inventoryItems">
<div class="empty-inventory">仓库空空如也，快去抽取热梗吧！</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 网络热梗数据 - 按稀有度分类
const memes = {
common: [
{ char: "😂", name: "笑哭了", probability: 40, value: 10 },
{ char: "🤣", name: "笑到打滚", probability: 35, value: 15 },
{ char: "😭", name: "爆哭", probability: 40, value: 12 },
{ char: "🥺", name: "求求了", probability: 35, value: 8 },
{ char: "🙏", name: "拜托拜托", probability: 30, value: 10 },
{ char: "💀", name: "笑死了", probability: 30, value: 15 }
],
uncommon: [
{ char: "🐶", name: "修勾", probability: 15, value: 50 },
{ char: "🍵", name: "茶言茶语", probability: 12, value: 45 },
{ char: "🐔", name: "菜鸡", probability: 10, value: 40 },
{ char: "🚗", name: "老司机", probability: 13, value: 55 },
{ char: "💣", name: "爆雷", probability: 12, value: 50 },
{ char: "🎤", name: "麦给你", probability: 10, value: 60 }
],
rare: [
{ char: "🤡", name: "小丑竟是我自己", probability: 8, value: 150 },
{ char: "👑", name: "YYDS", probability: 7, value: 200 },
{ char: "🌈", name: "彩虹屁", probability: 6, value: 180 },
{ char: "💎", name: "宝藏", probability: 9, value: 220 },
{ char: "🔥", name: "火钳刘明", probability: 7, value: 170 },
{ char: "⚡", name: "雷到", probability: 6, value: 160 }
],
epic: [
{ char: "🧱", name: "搬砖", probability: 4, value: 500 },
{ char: "🍋", name: "柠檬精", probability: 3, value: 450 },
{ char: "🍑", name: "蜜桃臀", probability: 5, value: 600 },
{ char: "🍼", name: "巨婴", probability: 4, value: 480 },
{ char: "🎭", name: "戏精", probability: 3, value: 520 }
],
legendary: [
{ char: "🐉", name: "龙傲天", probability: 2, value: 1500 },
{ char: "🦁", name: "狮王", probability: 1.5, value: 1200 },
{ char: "🦅", name: "大鹏展翅", probability: 1.5, value: 1300 },
{ char: "🐲", name: "真龙天子", probability: 2, value: 1600 }
],
mythic: [
{ char: "👽", name: "外星人", probability: 0.5, value: 5000 },
{ char: "🦄", name: "独角兽", probability: 0.5, value: 4500 },
{ char: "🤖", name: "机器人", probability: 0.5, value: 4800 },
{ char: "👾", name: "像素怪", probability: 0.5, value: 5200 }
]
};
// 稀有度配置
const rarities = {
common: { name: "普通", color: "#cccccc", class: "common-glow" },
uncommon: { name: "优秀", color: "#4caf50", class: "uncommon-glow" },
rare: { name: "稀有", color: "#2196f3", class: "rare-glow" },
epic: { name: "史诗", color: "#9c27b0", class: "epic-glow" },
legendary: { name: "传说", color: "#ff9800", class: "legendary-glow" },
mythic: { name: "神话", color: "#f44336", class: "mythic-glow" }
};
// DOM元素
const blindBox = document.getElementById('blindBox');
const boxContent = document.getElementById('boxContent');
const memeDisplay = document.getElementById('memeDisplay');
const memeName = document.getElementById('memeName');
const rarityBadge = document.getElementById('rarityBadge');
const result = document.getElementById('result');
const drawCountElement = document.getElementById('drawCount');
const boxCountElement = document.getElementById('boxCount');
const coinAmountElement = document.getElementById('coinAmount');
const diamondAmountElement = document.getElementById('diamondAmount');
const buyBoxBtn = document.getElementById('buyBoxBtn');
const buyMultiBtn = document.getElementById('buyMultiBtn');
const inventoryItems = document.getElementById('inventoryItems');
// 统计元素
const totalCountElement = document.getElementById('totalCount');
const commonCountElement = document.getElementById('commonCount');
const uncommonCountElement = document.getElementById('uncommonCount');
const rareCountElement = document.getElementById('rareCount');
const epicCountElement = document.getElementById('epicCount');
const legendaryCountElement = document.getElementById('legendaryCount');
const mythicCountElement = document.getElementById('mythicCount');
const totalValueElement = document.getElementById('totalValue');
// 状态变量
let drawCount = 0;
let boxCount = 3;
let coins = 1000;
let diamonds = 50;
let isDrawing = false;
let inventory = [];
// 初始化
function init() {
updateCounters();
updateCurrency();
blindBox.addEventListener('click', drawMeme);
buyBoxBtn.addEventListener('click', buyBox);
buyMultiBtn.addEventListener('click', buyMultiBox);
loadInventory();
updateStats();
}
// 从本地存储加载仓库
function loadInventory() {
const savedInventory = localStorage.getItem('memeInventory');
if (savedInventory) {
inventory = JSON.parse(savedInventory);
renderInventory();
}
}
// 保存仓库到本地存储
function saveInventory() {
localStorage.setItem('memeInventory', JSON.stringify(inventory));
}
// 更新货币显示
function updateCurrency() {
coinAmountElement.textContent = coins;
diamondAmountElement.textContent = diamonds;
}
// 更新计数器显示
function updateCounters() {
drawCountElement.textContent = drawCount;
boxCountElement.textContent = boxCount;
}
// 更新统计信息
function updateStats() {
const counts = {
common: 0,
uncommon: 0,
rare: 0,
epic: 0,
legendary: 0,
mythic: 0
};
let totalValue = 0;
inventory.forEach(item => {
counts[item.rarity]++;
totalValue += item.value;
});
totalCountElement.textContent = inventory.length;
commonCountElement.textContent = counts.common;
uncommonCountElement.textContent = counts.uncommon;
rareCountElement.textContent = counts.rare;
epicCountElement.textContent = counts.epic;
legendaryCountElement.textContent = counts.legendary;
mythicCountElement.textContent = counts.mythic;
totalValueElement.textContent = totalValue;
}
// 购买盲盒
function buyBox() {
if (coins >= 100) {
coins -= 100;
boxCount++;
updateCurrency();
updateCounters();
showMessage("购买成功！获得1个盲盒");
} else {
showMessage("金币不足！");
}
}
// 批量购买盲盒
function buyMultiBox() {
if (coins >= 900) {
coins -= 900;
boxCount += 10;
updateCurrency();
updateCounters();
showMessage("购买成功！获得10个盲盒");
} else {
showMessage("金币不足！");
}
}
// 显示消息
function showMessage(message) {
const messageEl = document.createElement('div');
messageEl.textContent = message;
messageEl.style.position = 'fixed';
messageEl.style.top = '20px';
messageEl.style.left = '50%';
messageEl.style.transform = 'translateX(-50%)';
messageEl.style.background = 'rgba(0,0,0,0.8)';
messageEl.style.color = 'white';
messageEl.style.padding = '10px 20px';
messageEl.style.borderRadius = '10px';
messageEl.style.zIndex = '1000';
document.body.appendChild(messageEl);
setTimeout(() => {
document.body.removeChild(messageEl);
}, 2000);
}
// 出售热梗
function sellMeme(index) {
const item = inventory[index];
coins += item.value;
inventory.splice(index, 1);
updateCurrency();
saveInventory();
renderInventory();
updateStats();
showMessage(`出售成功！获得 ${item.value} 金币`);
}
// 渲染仓库
function renderInventory() {
if (inventory.length === 0) {
inventoryItems.innerHTML = '<div class="empty-inventory">仓库空空如也，快去抽取热梗吧！</div>';
return;
}
inventoryItems.innerHTML = '';
inventory.forEach((item, index) => {
const itemElement = document.createElement('div');
itemElement.classList.add('inventory-item');
itemElement.classList.add(`item-${item.rarity}`);
const emojiElement = document.createElement('div');
emojiElement.textContent = item.emoji;
const nameElement = document.createElement('div');
nameElement.classList.add('meme-name');
nameElement.textContent = item.name;
const priceElement = document.createElement('div');
priceElement.classList.add('meme-price');
priceElement.textContent = `💰${item.value}`;
const sellBtn = document.createElement('button');
sellBtn.classList.add('sell-btn');
sellBtn.textContent = '出售';
sellBtn.addEventListener('click', (e) => {
e.stopPropagation();
sellMeme(index);
});
itemElement.appendChild(emojiElement);
itemElement.appendChild(nameElement);
itemElement.appendChild(priceElement);
itemElement.appendChild(sellBtn);
itemElement.title = `${item.name} (${rarities[item.rarity].name}) - 价值: ${item.value}金币`;
// 点击查看详情
itemElement.addEventListener('click', () => {
showItemDetail(item, index);
});
inventoryItems.appendChild(itemElement);
});
}
// 显示物品详情
function showItemDetail(item, index) {
memeDisplay.textContent = item.emoji;
memeName.textContent = item.name;
rarityBadge.textContent = rarities[item.rarity].name;
rarityBadge.style.background = rarities[item.rarity].color;
// 应用稀有度特效
result.className = 'result';
result.classList.add(rarities[item.rarity].class);
}
// 创建粒子效果
function createParticles(color) {
for (let i = 0; i < 30; i++) {
const sparkle = document.createElement('div');
sparkle.classList.add('sparkle');
// 随机位置
const x = Math.random() * 300;
const y = Math.random() * 300;
sparkle.style.left = `${x}px`;
sparkle.style.top = `${y}px`;
// 随机大小
const size = Math.random() * 8 + 4;
sparkle.style.width = `${size}px`;
sparkle.style.height = `${size}px`;
// 使用传入的颜色或随机颜色
sparkle.style.background = color || getRandomColor();
blindBox.appendChild(sparkle);
// 动画
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 100 + 50;
const duration = Math.random() * 1000 + 500;
sparkle.animate([
{
opacity: 0,
transform: `translate(0, 0) scale(0)`
},
{
opacity: 1,
transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(1)`
},
{
opacity: 0,
transform: `translate(${Math.cos(angle) * distance * 1.5}px, ${Math.sin(angle) * distance * 1.5}px) scale(0)`
}
], {
duration: duration,
easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)'
}).onfinish = () => {
sparkle.remove();
};
}
}
// 获取随机颜色
function getRandomColor() {
const colors = ['#FFD700', '#FF6B6B', '#4ECDC4', '#FF9A00', '#6A11CB'];
return colors[Math.floor(Math.random() * colors.length)];
}
// 根据概率随机选择稀有度
function getRandomRarity() {
const rand = Math.random() * 100;
if (rand < 50) return 'common'; // 50% 普通
if (rand < 75) return 'uncommon'; // 25% 优秀
if (rand < 88) return 'rare'; // 13% 稀有
if (rand < 96) return 'epic'; // 8% 史诗
if (rand < 99) return 'legendary'; // 3% 传说
return 'mythic'; // 1% 神话
}
// 根据稀有度选择表情
function getMemeByRarity(rarity) {
const pool = memes[rarity];
const totalProbability = pool.reduce((sum, item) => sum + item.probability, 0);
let rand = Math.random() * totalProbability;
for (const meme of pool) {
if (rand < meme.probability) {
return meme;
}
rand -= meme.probability;
}
// 如果概率计算有问题，返回第一个
return pool[0];
}
// 抽取热梗
function drawMeme() {
if (isDrawing || boxCount <= 0) return;
isDrawing = true;
drawCount++;
boxCount--;
updateCounters();
// 盲盒动画
blindBox.classList.add('open-animation');
boxContent.textContent = "✨";
// 延迟显示结果
setTimeout(() => {
// 随机选择稀有度
const rarity = getRandomRarity();
const selectedMeme = getMemeByRarity(rarity);
const rarityInfo = rarities[rarity];
// 显示结果
memeDisplay.textContent = selectedMeme.char;
memeName.textContent = selectedMeme.name;
rarityBadge.textContent = rarityInfo.name;
rarityBadge.style.background = rarityInfo.color;
// 应用稀有度特效
result.className = 'result';
result.classList.add(rarityInfo.class);
// 应用动画
memeDisplay.className = 'meme';
void memeDisplay.offsetWidth; // 触发重排以重新启动动画
// 根据稀有度应用不同动画
if (rarity === 'mythic' || rarity === 'legendary') {
memeDisplay.classList.add('bounce');
createParticles(rarityInfo.color);
} else if (rarity === 'epic') {
memeDisplay.classList.add('pulse');
createParticles(rarityInfo.color);
} else {
memeDisplay.classList.add('shake');
}
// 添加到仓库
addToInventory(selectedMeme.char, selectedMeme.name, rarity, selectedMeme.value);
// 重置盲盒
setTimeout(() => {
blindBox.classList.remove('open-animation');
boxContent.textContent = "📦";
isDrawing = false;
}, 1000);
}, 800);
}
// 添加到仓库
function addToInventory(emoji, name, rarity, value) {
const newItem = {
emoji: emoji,
name: name,
rarity: rarity,
value: value,
timestamp: new Date().toISOString()
};
inventory.unshift(newItem);
saveInventory();
renderInventory();
updateStats();
}
// 初始化应用
init();
</script>
</body>
</html>6 条评论
-
董章正 五年级 LV 8 @ 2025-10-10 21:48:36 -
@ 2025-10-8 10:28:45
不要点三角
请欣赏白屏
-
@ 2025-10-7 21:30:18@ cnpauls ``@ fahai @ 王俊翔 @ 菜虚鲲 @ andypang @ xzh13603724072 @ mnsb114514 @ 武佳颖 @ 13707661150 @ 天津四 @ 13693926024 @ From Earth @ zzy210999 @ 15514806633 @ MARS_做人别太张碧晨 @ 宁科淼 @ lcx0528 @ 宇宙无敌世界霸王龙战士 @ tuuub19543 @ w23050506772 @ lhy @ 13837269921 @ DPZ @ wkx123 @ 董章正 @ djz @ skey @ 军训(百战不灭 @ 二点五条悟 @ 喜欢 @ wangyuyao @ 铮铮 @ Coder @ 韩羿天 @ lcx0528(小号) @ VswMdkqt @ 希特隆不是希特勒 @ c++114514 @ 董章正(小) @ 已老实求放过 @ dddd @ OITest @ wdc++2323 @ jakeem @ merlin @ 2087857836 @ 吕天翔 @ TuTacii @ 1234567 @ 黑鹰 哈盾中将 @ zbx @ 植物不战僵尸 @ 制造体。魁 @ 1234567890 @ 尚嘉翔 @ 1234567889 @ striver @ kairui2011120 @ 良人颠人 @ 徐** @ 我叫李笑笑8 @ 我是程 @ skyxing2011 @ sissie `
-
@ 2025-10-7 19:04:22q
-
@ 2025-10-7 19:11:33
1+1=2
-
-
@ 2025-10-7 15:31:54
<!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> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial Rounded MT Bold', 'Segoe UI', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 20px; overflow-x: hidden; color: white; } .container { text-align: center; max-width: 1200px; width: 100%; display: flex; flex-direction: column; gap: 30px; } .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .currency-panel { display: flex; gap: 20px; background: rgba(255, 255, 255, 0.1); padding: 15px 25px; border-radius: 20px; backdrop-filter: blur(10px); } .currency-item { display: flex; align-items: center; gap: 8px; } .currency-icon { font-size: 1.5rem; } .currency-amount { font-size: 1.2rem; font-weight: bold; } .main-content { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; } .left-panel, .right-panel { flex: 1; min-width: 300px; max-width: 500px; } h1 { color: white; margin-bottom: 15px; font-size: 2.8rem; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); letter-spacing: 2px; background: linear-gradient(90deg, #ff9a00, #ff6a00, #ff0050); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; font-size: 1.2rem; } .rarity-info { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .rarity-item { display: flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; } .rarity-common { background: rgba(255, 255, 255, 0.1); } .rarity-uncommon { background: rgba(76, 175, 80, 0.2); } .rarity-rare { background: rgba(33, 150, 243, 0.2); } .rarity-epic { background: rgba(156, 39, 176, 0.2); } .rarity-legendary { background: rgba(255, 152, 0, 0.2); } .rarity-mythic { background: rgba(244, 67, 54, 0.2); } .rarity-color { width: 15px; height: 15px; border-radius: 50%; } .color-common { background: #cccccc; } .color-uncommon { background: #4caf50; } .color-rare { background: #2196f3; } .color-epic { background: #9c27b0; } .color-legendary { background: #ff9800; } .color-mythic { background: #f44336; } .blind-box { width: 300px; height: 300px; margin: 0 auto 20px; background: linear-gradient(145deg, #ff9a00, #ff6a00); border-radius: 20px; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), inset 0 -8px 15px rgba(0, 0, 0, 0.2), inset 0 8px 15px rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; border: 8px solid #ff5500; } .blind-box:hover { transform: scale(1.03); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 -8px 15px rgba(0, 0, 0, 0.2), inset 0 8px 15px rgba(255, 255, 255, 0.4); } .blind-box:active { transform: scale(0.98); } .box-content { font-size: 5rem; color: white; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: all 0.5s; } .purchase-panel { display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; } .purchase-btn { background: linear-gradient(145deg, #4caf50, #2e7d32); border: none; color: white; padding: 12px 25px; border-radius: 15px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .purchase-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .purchase-btn:active { transform: translateY(0); } .result { min-height: 220px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; margin-bottom: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.5s; } .meme { font-size: 4.5rem; line-height: 1.2; margin: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: center; transition: all 0.5s; } .meme-text { font-size: 1.6rem; margin-top: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: all 0.5s; font-weight: bold; line-height: 1.4; } .rarity-badge { display: inline-block; padding: 5px 15px; border-radius: 15px; font-size: 1rem; margin-top: 10px; font-weight: bold; } .counter { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; } .counter span { background: rgba(255, 255, 255, 0.1); padding: 10px 25px; border-radius: 20px; font-size: 1.1rem; } .inventory { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); max-height: 600px; overflow-y: auto; } .inventory h2 { margin-bottom: 20px; font-size: 1.8rem; color: #ff9a00; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px; } .stat-item { background: rgba(255, 255, 255, 0.08); padding: 15px; border-radius: 15px; text-align: center; transition: all 0.3s; } .stat-item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.12); } .stat-count { font-size: 2rem; font-weight: bold; margin: 5px 0; } .stat-label { font-size: 0.9rem; opacity: 0.8; } .inventory-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; } .inventory-item { background: rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 15px 10px; font-size: 2.5rem; text-align: center; transition: all 0.3s; position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; } .inventory-item:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.12); } .inventory-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; opacity: 0.7; } .item-common::after { background: #cccccc; } .item-uncommon::after { background: #4caf50; } .item-rare::after { background: #2196f3; } .item-epic::after { background: #9c27b0; } .item-legendary::after { background: #ff9800; } .item-mythic::after { background: #f44336; } .meme-name { font-size: 0.7rem; opacity: 0.8; text-align: center; line-height: 1.2; max-height: 2.4em; overflow: hidden; } .meme-price { font-size: 0.6rem; color: #ffd700; margin-top: 3px; } .sell-btn { background: linear-gradient(145deg, #f44336, #c62828); border: none; color: white; padding: 5px 10px; border-radius: 10px; font-size: 0.7rem; cursor: pointer; margin-top: 5px; transition: all 0.3s; } .sell-btn:hover { transform: scale(1.05); } .empty-inventory { grid-column: 1 / -1; text-align: center; padding: 40px; opacity: 0.6; font-size: 1.2rem; } .instructions { color: rgba(255, 255, 255, 0.6); margin-top: 10px; font-size: 1rem; } .sparkle { position: absolute; width: 10px; height: 10px; background: white; border-radius: 50%; pointer-events: none; opacity: 0; } /* 稀有度特效 */ .common-glow { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .uncommon-glow { box-shadow: 0 0 15px rgba(76, 175, 80, 0.7); } .rare-glow { box-shadow: 0 0 20px rgba(33, 150, 243, 0.8); } .epic-glow { box-shadow: 0 0 25px rgba(156, 39, 176, 0.9); } .legendary-glow { box-shadow: 0 0 30px rgba(255, 152, 0, 1); } .mythic-glow { box-shadow: 0 0 40px rgba(244, 67, 54, 1); animation: mythic-pulse 2s infinite alternate; } @keyframes mythic-pulse { from { box-shadow: 0 0 20px rgba(244, 67, 54, 0.8); } to { box-shadow: 0 0 40px rgba(244, 67, 54, 1), 0 0 60px rgba(244, 67, 54, 0.6); } } /* 动画效果 */ .pulse { animation: pulse 0.5s infinite alternate; } @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } } .shake { animation: shake 0.5s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } .bounce { animation: bounce 0.5s; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .open-animation { animation: open 0.8s forwards; } @keyframes open { 0% { transform: scale(1); } 50% { transform: scale(1.1) rotate(5deg); } 100% { transform: scale(1); } } @media (max-width: 900px) { .main-content { flex-direction: column; align-items: center; } .left-panel, .right-panel { width: 100%; max-width: 500px; } .header { flex-direction: column; text-align: center; } } @media (max-width: 600px) { h1 { font-size: 2rem; } .blind-box { width: 250px; height: 250px; } .meme { font-size: 3.5rem; } .meme-text { font-size: 1.4rem; } .rarity-info { gap: 10px; } .rarity-item { padding: 6px 12px; font-size: 0.8rem; } .stats { grid-template-columns: repeat(2, 1fr); } .inventory-item { font-size: 2rem; } .purchase-panel { flex-direction: column; } } </style> </head> <body> <div class="container"> <div class="header"> <div> <h1>网络热梗盲盒</h1> <p class="subtitle">购买盲盒，收集热梗，交易变现！</p> </div> <div class="currency-panel"> <div class="currency-item"> <div class="currency-icon">💰</div> <div class="currency-amount" id="coinAmount">1000</div> </div> <div class="currency-item"> <div class="currency-icon">💎</div> <div class="currency-amount" id="diamondAmount">50</div> </div> </div> </div> <div class="rarity-info"> <div class="rarity-item rarity-common"> <div class="rarity-color color-common"></div> <span>普通</span> </div> <div class="rarity-item rarity-uncommon"> <div class="rarity-color color-uncommon"></div> <span>优秀</span> </div> <div class="rarity-item rarity-rare"> <div class="rarity-color color-rare"></div> <span>稀有</span> </div> <div class="rarity-item rarity-epic"> <div class="rarity-color color-epic"></div> <span>史诗</span> </div> <div class="rarity-item rarity-legendary"> <div class="rarity-color color-legendary"></div> <span>传说</span> </div> <div class="rarity-item rarity-mythic"> <div class="rarity-color color-mythic"></div> <span>神话</span> </div> </div> <div class="main-content"> <div class="left-panel"> <div class="counter"> <span>已抽取: <span id="drawCount">0</span> 次</span> <span>拥有盲盒: <span id="boxCount">3</span> 个</span> </div> <div class="purchase-panel"> <button class="purchase-btn" id="buyBoxBtn">购买盲盒 (💰100)</button> <button class="purchase-btn" id="buyMultiBtn">购买10个 (💰900)</button> </div> <div class="blind-box" id="blindBox"> <div class="box-content" id="boxContent">📦</div> </div> <div class="result" id="result"> <div class="meme" id="memeDisplay">点击盲盒开始抽奖</div> <div class="meme-text" id="memeName">等待抽取...</div> <div class="rarity-badge" id="rarityBadge"></div> </div> <div class="instructions"> 提示: 每日登录可获得免费盲盒，稀有热梗可以高价出售！ </div> </div> <div class="right-panel"> <div class="inventory"> <h2>我的热梗仓库</h2> <div class="stats"> <div class="stat-item"> <div class="stat-count" id="totalCount">0</div> <div class="stat-label">总收藏数</div> </div> <div class="stat-item"> <div class="stat-count" id="commonCount">0</div> <div class="stat-label">普通</div> </div> <div class="stat-item"> <div class="stat-count" id="uncommonCount">0</div> <div class="stat-label">优秀</div> </div> <div class="stat-item"> <div class="stat-count" id="rareCount">0</div> <div class="stat-label">稀有</div> </div> <div class="stat-item"> <div class="stat-count" id="epicCount">0</div> <div class="stat-label">史诗</div> </div> <div class="stat-item"> <div class="stat-count" id="legendaryCount">0</div> <div class="stat-label">传说</div> </div> <div class="stat-item"> <div class="stat-count" id="mythicCount">0</div> <div class="stat-label">神话</div> </div> <div class="stat-item"> <div class="stat-count" id="totalValue">0</div> <div class="stat-label">总价值</div> </div> </div> <div class="inventory-items" id="inventoryItems"> <div class="empty-inventory">仓库空空如也，快去抽取热梗吧！</div> </div> </div> </div> </div> </div> <script> // 网络热梗数据 - 按稀有度分类 const memes = { common: [ { char: "😂", name: "笑哭了", probability: 40, value: 10 }, { char: "🤣", name: "笑到打滚", probability: 35, value: 15 }, { char: "😭", name: "爆哭", probability: 40, value: 12 }, { char: "🥺", name: "求求了", probability: 35, value: 8 }, { char: "🙏", name: "拜托拜托", probability: 30, value: 10 }, { char: "💀", name: "笑死了", probability: 30, value: 15 }, { char: "🍃", name: "小妖（趴菜）", probability: 25, value: 20 }, { char: "🦶", name: "东北余姐", probability: 25, value: 20 } ], uncommon: [ { char: "🐶", name: "修勾", probability: 15, value: 50 }, { char: "🍵", name: "绿茶", probability: 12, value: 45 }, { char: "🐔", name: "菜鸡", probability: 10, value: 40 }, { char: "🚗", name: "老司机", probability: 13, value: 55 }, { char: "💣", name: "爆雷", probability: 12, value: 50 }, { char: "🎤", name: "麦给你", probability: 10, value: 60 } ], rare: [ { char: "🤡", name: "小丑竟是我自己", probability: 8, value: 150 }, { char: "👑", name: "YYDS", probability: 7, value: 200 }, { char: "🌈", name: "彩虹屁", probability: 6, value: 180 }, { char: "💎", name: "宝藏", probability: 9, value: 220 }, { char: "🔥", name: "火钳刘明", probability: 7, value: 170 }, { char: "⚡", name: "雷到", probability: 6, value: 160 } ], epic: [ { char: "🧱", name: "搬砖", probability: 4, value: 500 }, { char: "🍋", name: "柠檬精", probability: 3, value: 450 }, { char: "🐖", name: "小猪佩奇", probability: 5, value: 600 }, { char: "🐷", name: "乔治", probability: 4, value: 480 }, { char: "🎭", name: "戏精", probability: 3, value: 520 } ], legendary: [ { char: "🐉", name: "龙傲天", probability: 2, value: 1500 }, { char: "👨🦲", name: "法海", probability: 1.5, value: 1300 }, { char: "🐲", name: "末影龙", probability: 1.5, value: 1400 }, { char: "🥬", name: "群乱小妖（白菜)", probability: 2, value: 1200 } ], mythic: [ { char: "💧", name: "OJ", probability: 0.5, value: 5000 }, { char: "🤖", name: "机器人", probability: 0.5, value: 4800 }, { char: "👾", name: "像素怪", probability: 0.5, value: 5200 }, { char: "🪬", name: "法海终极(US)", probability: 0.5, value: 8000 } ] }; // 稀有度配置 const rarities = { common: { name: "普通", color: "#cccccc", class: "common-glow" }, uncommon: { name: "优秀", color: "#4caf50", class: "uncommon-glow" }, rare: { name: "稀有", color: "#2196f3", class: "rare-glow" }, epic: { name: "史诗", color: "#9c27b0", class: "epic-glow" }, legendary: { name: "传说", color: "#ff9800", class: "legendary-glow" }, mythic: { name: "神话", color: "#f44336", class: "mythic-glow" } }; // DOM元素 const blindBox = document.getElementById('blindBox'); const boxContent = document.getElementById('boxContent'); const memeDisplay = document.getElementById('memeDisplay'); const memeName = document.getElementById('memeName'); const rarityBadge = document.getElementById('rarityBadge'); const result = document.getElementById('result'); const drawCountElement = document.getElementById('drawCount'); const boxCountElement = document.getElementById('boxCount'); const coinAmountElement = document.getElementById('coinAmount'); const diamondAmountElement = document.getElementById('diamondAmount'); const buyBoxBtn = document.getElementById('buyBoxBtn'); const buyMultiBtn = document.getElementById('buyMultiBtn'); const inventoryItems = document.getElementById('inventoryItems'); // 统计元素 const totalCountElement = document.getElementById('totalCount'); const commonCountElement = document.getElementById('commonCount'); const uncommonCountElement = document.getElementById('uncommonCount'); const rareCountElement = document.getElementById('rareCount'); const epicCountElement = document.getElementById('epicCount'); const legendaryCountElement = document.getElementById('legendaryCount'); const mythicCountElement = document.getElementById('mythicCount'); const totalValueElement = document.getElementById('totalValue'); // 状态变量 let drawCount = 0; let boxCount = 3; let coins = 1000; let diamonds = 50; let isDrawing = false; let inventory = []; // 初始化 function init() { updateCounters(); updateCurrency(); blindBox.addEventListener('click', drawMeme); buyBoxBtn.addEventListener('click', buyBox); buyMultiBtn.addEventListener('click', buyMultiBox); loadInventory(); updateStats(); } // 从本地存储加载仓库 function loadInventory() { const savedInventory = localStorage.getItem('memeInventory'); if (savedInventory) { inventory = JSON.parse(savedInventory); renderInventory(); } } // 保存仓库到本地存储 function saveInventory() { localStorage.setItem('memeInventory', JSON.stringify(inventory)); } // 更新货币显示 function updateCurrency() { coinAmountElement.textContent = coins; diamondAmountElement.textContent = diamonds; } // 更新计数器显示 function updateCounters() { drawCountElement.textContent = drawCount; boxCountElement.textContent = boxCount; } // 更新统计信息 function updateStats() { const counts = { common: 0, uncommon: 0, rare: 0, epic: 0, legendary: 0, mythic: 0 }; let totalValue = 0; inventory.forEach(item => { counts[item.rarity]++; totalValue += item.value; }); totalCountElement.textContent = inventory.length; commonCountElement.textContent = counts.common; uncommonCountElement.textContent = counts.uncommon; rareCountElement.textContent = counts.rare; epicCountElement.textContent = counts.epic; legendaryCountElement.textContent = counts.legendary; mythicCountElement.textContent = counts.mythic; totalValueElement.textContent = totalValue; } // 购买盲盒 function buyBox() { if (coins >= 100) { coins -= 100; boxCount++; updateCurrency(); updateCounters(); showMessage("购买成功！获得1个盲盒"); } else { showMessage("金币不足！"); } } // 批量购买盲盒 function buyMultiBox() { if (coins >= 900) { coins -= 900; boxCount += 10; updateCurrency(); updateCounters(); showMessage("购买成功！获得10个盲盒"); } else { showMessage("金币不足！"); } } // 显示消息 function showMessage(message) { const messageEl = document.createElement('div'); messageEl.textContent = message; messageEl.style.position = 'fixed'; messageEl.style.top = '20px'; messageEl.style.left = '50%'; messageEl.style.transform = 'translateX(-50%)'; messageEl.style.background = 'rgba(0,0,0,0.8)'; messageEl.style.color = 'white'; messageEl.style.padding = '10px 20px'; messageEl.style.borderRadius = '10px'; messageEl.style.zIndex = '1000'; document.body.appendChild(messageEl); setTimeout(() => { document.body.removeChild(messageEl); }, 2000); } // 出售热梗 function sellMeme(index) { const item = inventory[index]; coins += item.value; inventory.splice(index, 1); updateCurrency(); saveInventory(); renderInventory(); updateStats(); showMessage(`出售成功！获得 ${item.value} 金币`); } // 渲染仓库 function renderInventory() { if (inventory.length === 0) { inventoryItems.innerHTML = '<div class="empty-inventory">仓库空空如也，快去抽取热梗吧！</div>'; return; } inventoryItems.innerHTML = ''; inventory.forEach((item, index) => { const itemElement = document.createElement('div'); itemElement.classList.add('inventory-item'); itemElement.classList.add(`item-${item.rarity}`); const emojiElement = document.createElement('div'); emojiElement.textContent = item.emoji; const nameElement = document.createElement('div'); nameElement.classList.add('meme-name'); nameElement.textContent = item.name; const priceElement = document.createElement('div'); priceElement.classList.add('meme-price'); priceElement.textContent = `💰${item.value}`; const sellBtn = document.createElement('button'); sellBtn.classList.add('sell-btn'); sellBtn.textContent = '出售'; sellBtn.addEventListener('click', (e) => { e.stopPropagation(); sellMeme(index); }); itemElement.appendChild(emojiElement); itemElement.appendChild(nameElement); itemElement.appendChild(priceElement); itemElement.appendChild(sellBtn); itemElement.title = `${item.name} (${rarities[item.rarity].name}) - 价值: ${item.value}金币`; // 点击查看详情 itemElement.addEventListener('click', () => { showItemDetail(item, index); }); inventoryItems.appendChild(itemElement); }); } // 显示物品详情 function showItemDetail(item, index) { memeDisplay.textContent = item.emoji; memeName.textContent = item.name; rarityBadge.textContent = rarities[item.rarity].name; rarityBadge.style.background = rarities[item.rarity].color; // 应用稀有度特效 result.className = 'result'; result.classList.add(rarities[item.rarity].class); } // 创建粒子效果 function createParticles(color) { for (let i = 0; i < 30; i++) { const sparkle = document.createElement('div'); sparkle.classList.add('sparkle'); // 随机位置 const x = Math.random() * 300; const y = Math.random() * 300; sparkle.style.left = `${x}px`; sparkle.style.top = `${y}px`; // 随机大小 const size = Math.random() * 8 + 4; sparkle.style.width = `${size}px`; sparkle.style.height = `${size}px`; // 使用传入的颜色或随机颜色 sparkle.style.background = color || getRandomColor(); blindBox.appendChild(sparkle); // 动画 const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 100 + 50; const duration = Math.random() * 1000 + 500; sparkle.animate([ { opacity: 0, transform: `translate(0, 0) scale(0)` }, { opacity: 1, transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(1)` }, { opacity: 0, transform: `translate(${Math.cos(angle) * distance * 1.5}px, ${Math.sin(angle) * distance * 1.5}px) scale(0)` } ], { duration: duration, easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)' }).onfinish = () => { sparkle.remove(); }; } } // 获取随机颜色 function getRandomColor() { const colors = ['#FFD700', '#FF6B6B', '#4ECDC4', '#FF9A00', '#6A11CB']; return colors[Math.floor(Math.random() * colors.length)]; } // 根据概率随机选择稀有度 function getRandomRarity() { const rand = Math.random() * 100; if (rand < 50) return 'common'; // 50% 普通 if (rand < 75) return 'uncommon'; // 25% 优秀 if (rand < 88) return 'rare'; // 13% 稀有 if (rand < 96) return 'epic'; // 8% 史诗 if (rand < 99) return 'legendary'; // 3% 传说 return 'mythic'; // 1% 神话 } // 根据稀有度选择表情 function getMemeByRarity(rarity) { const pool = memes[rarity]; const totalProbability = pool.reduce((sum, item) => sum + item.probability, 0); let rand = Math.random() * totalProbability; for (const meme of pool) { if (rand < meme.probability) { return meme; } rand -= meme.probability; } // 如果概率计算有问题，返回第一个 return pool[0]; } // 抽取热梗 function drawMeme() { if (isDrawing || boxCount <= 0) return; isDrawing = true; drawCount++; boxCount--; updateCounters(); // 盲盒动画 blindBox.classList.add('open-animation'); boxContent.textContent = "✨"; // 延迟显示结果 setTimeout(() => { // 随机选择稀有度 const rarity = getRandomRarity(); const selectedMeme = getMemeByRarity(rarity); const rarityInfo = rarities[rarity]; // 显示结果 memeDisplay.textContent = selectedMeme.char; memeName.textContent = selectedMeme.name; rarityBadge.textContent = rarityInfo.name; rarityBadge.style.background = rarityInfo.color; // 应用稀有度特效 result.className = 'result'; result.classList.add(rarityInfo.class); // 应用动画 memeDisplay.className = 'meme'; void memeDisplay.offsetWidth; // 触发重排以重新启动动画 // 根据稀有度应用不同动画 if (rarity === 'mythic' || rarity === 'legendary') { memeDisplay.classList.add('bounce'); createParticles(rarityInfo.color); } else if (rarity === 'epic') { memeDisplay.classList.add('pulse'); createParticles(rarityInfo.color); } else { memeDisplay.classList.add('shake'); } // 添加到仓库 addToInventory(selectedMeme.char, selectedMeme.name, rarity, selectedMeme.value); // 重置盲盒 setTimeout(() => { blindBox.classList.remove('open-animation'); boxContent.textContent = "📦"; isDrawing = false; }, 1000); }, 800); } // 添加到仓库 function addToInventory(emoji, name, rarity, value) { const newItem = { emoji: emoji, name: name, rarity: rarity, value: value, timestamp: new Date().toISOString() }; inventory.unshift(newItem); saveInventory(); renderInventory(); updateStats(); } // 初始化应用 init(); </script> </body> </html>-
@ 2025-10-7 19:18:01
- 1