Untitled
unknown
plain_text
10 months ago
51 kB
12
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sigma Meme Card Battle 🗿</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Comic Sans MS', cursive;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
background-size: 400% 400%;
animation: gradientShift 3s ease infinite;
overflow-x: hidden;
min-height: 100vh;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.screen {
display: none;
min-height: 100vh;
padding: 20px;
}
.screen.active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main-menu {
text-align: center;
position: relative;
}
.title {
font-size: 4rem;
color: #fff;
text-shadow: 4px 4px 8px rgba(0,0,0,0.5);
margin-bottom: 30px;
animation: bounce 2s infinite;
text-transform: uppercase;
letter-spacing: 3px;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.floating-meme {
position: absolute;
font-size: 3rem;
animation: float 4s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.button {
background: linear-gradient(45deg, #ff4757, #ff6b6b);
border: none;
padding: 15px 30px;
margin: 10px;
font-size: 1.5rem;
color: white;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: bold;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.button:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.button:active {
transform: translateY(-2px) scale(0.98);
}
.shop-button {
background: linear-gradient(45deg, #ffa502, #ff6348);
}
.settings-button {
background: linear-gradient(45deg, #747d8c, #57606f);
}
.card {
width: 120px;
height: 160px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 10px;
margin: 10px;
color: white;
text-align: center;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.card-name {
font-size: 0.9rem;
font-weight: bold;
margin-bottom: 5px;
}
.card-meme {
font-size: 2rem;
margin: 10px 0;
}
.card-power {
position: absolute;
top: 5px;
right: 5px;
background: #ff4757;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
}
.game-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
width: 100%;
max-width: 1200px;
}
.player-area {
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.hand {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-size: 1.2rem;
color: white;
font-weight: bold;
}
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
max-width: 800px;
margin: 20px 0;
}
.shop-card {
background: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
position: relative;
}
.price {
color: #ff4757;
font-weight: bold;
font-size: 1.1rem;
}
.back-button {
position: absolute;
top: 20px;
left: 20px;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
}
.sigma-text {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8rem;
color: rgba(255,255,255,0.1);
z-index: 0;
animation: pulse 3s infinite;
pointer-events: none;
}
@keyframes pulse {
0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.1); }
}
.battle-log {
background: rgba(0,0,0,0.7);
color: white;
padding: 15px;
border-radius: 10px;
margin: 20px 0;
max-height: 150px;
overflow-y: auto;
font-family: monospace;
}
.winner-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
padding: 40px;
border-radius: 20px;
text-align: center;
z-index: 1000;
font-size: 2rem;
color: white;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
display: none;
}
/* CHEST SYSTEM STYLES */
.chest-opening {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: radial-gradient(circle, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.95) 100%);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
flex-direction: column;
}
.chest-container {
position: relative;
font-size: 10rem;
animation: chestPulse 1s ease-in-out infinite;
cursor: pointer;
filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}
@keyframes chestPulse {
0%, 100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}
50% {
transform: scale(1.1) rotate(2deg);
filter: drop-shadow(0 0 30px rgba(255,255,255,0.6));
}
}
.chest-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border-radius: 50%;
opacity: 0;
z-index: -1;
animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}
.bronze-glow { background: radial-gradient(circle, #cd7f32 0%, rgba(205,127,50,0.3) 50%, transparent 100%); }
.silver-glow { background: radial-gradient(circle, #c0c0c0 0%, rgba(192,192,192,0.3) 50%, transparent 100%); }
.gold-glow { background: radial-gradient(circle, #ffd700 0%, rgba(255,215,0,0.3) 50%, transparent 100%); }
.diamond-glow { background: radial-gradient(circle, #b9f2ff 0%, rgba(185,242,255,0.3) 50%, transparent 100%); }
.sigma-glow {
background: radial-gradient(circle, #ff00ff 0%, #00ffff 50%, transparent 100%);
animation: sigmaGlowCycle 1s ease-in-out infinite;
}
@keyframes sigmaGlowCycle {
0% { background: radial-gradient(circle, #ff00ff 0%, #00ffff 50%, transparent 100%); }
25% { background: radial-gradient(circle, #00ffff 0%, #00ff00 50%, transparent 100%); }
50% { background: radial-gradient(circle, #00ff00 0%, #ffff00 50%, transparent 100%); }
75% { background: radial-gradient(circle, #ffff00 0%, #ff0000 50%, transparent 100%); }
100% { background: radial-gradient(circle, #ff0000 0%, #ff00ff 50%, transparent 100%); }
}
.chest-stage-1 {
animation: chestShake 0.3s ease-in-out infinite;
}
.chest-stage-2 {
animation: chestVibrate 0.1s ease-in-out infinite;
filter: drop-shadow(0 0 40px currentColor);
}
.chest-stage-3 {
animation: chestExplode 2s ease-out forwards;
}
@keyframes chestShake {
0%, 100% { transform: translateX(0) scale(1); }
25% { transform: translateX(-15px) scale(1.05) rotate(-5deg); }
75% { transform: translateX(15px) scale(1.05) rotate(5deg); }
}
@keyframes chestVibrate {
0%, 100% { transform: scale(1.1); }
50% { transform: scale(1.15) rotate(1deg); }
}
@keyframes chestExplode {
0% {
transform: scale(1.1);
opacity: 1;
filter: drop-shadow(0 0 40px currentColor);
}
30% {
transform: scale(1.8) rotate(90deg);
opacity: 0.8;
filter: drop-shadow(0 0 80px currentColor);
}
70% {
transform: scale(2.5) rotate(270deg);
opacity: 0.4;
filter: drop-shadow(0 0 120px currentColor);
}
100% {
transform: scale(4) rotate(720deg);
opacity: 0;
filter: drop-shadow(0 0 200px currentColor);
}
}
.mega-explosion {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20rem;
opacity: 0;
z-index: 15;
animation: megaBlast 3s ease-out forwards;
}
@keyframes megaBlast {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0) rotate(0deg);
}
20% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.5) rotate(180deg);
}
40% {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1.2) rotate(360deg);
}
80% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(2) rotate(720deg);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(4) rotate(1080deg);
}
}
.reward-cards {
display: flex;
gap: 20px;
margin-top: 40px;
opacity: 0;
animation: cardsReveal 2s ease-out 3s forwards;
flex-wrap: wrap;
justify-content: center;
}
@keyframes cardsReveal {
0% {
opacity: 0;
transform: translateY(200px) scale(0.3) rotateY(180deg);
}
60% {
opacity: 0.8;
transform: translateY(-20px) scale(1.1) rotateY(20deg);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotateY(0deg);
}
}
.particles {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 10;
}
.particle {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
animation: particleExplode 2s ease-out forwards;
}
@keyframes particleExplode {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
50% {
opacity: 0.8;
transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(1.2);
}
100% {
transform: translate(var(--dx), var(--dy)) scale(0);
opacity: 0;
}
}
.screen-flash {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: white;
opacity: 0;
z-index: 50;
animation: flashEffect 0.3s ease-out forwards;
}
@keyframes flashEffect {
0% { opacity: 0; }
50% { opacity: 0.8; }
100% { opacity: 0; }
}
.floating-text {
position: absolute;
font-size: 3rem;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
opacity: 0;
animation: floatText 3s ease-out forwards;
z-index: 20;
}
@keyframes floatText {
0% {
opacity: 0;
transform: translateY(50px) scale(0.5);
}
30% {
opacity: 1;
transform: translateY(0) scale(1.2);
}
70% {
opacity: 0.8;
transform: translateY(-30px) scale(1);
}
100% {
opacity: 0;
transform: translateY(-80px) scale(0.8);
}
}
.chest-instruction {
color: white;
font-size: 2rem;
margin-top: 30px;
text-align: center;
animation: instructionPulse 2s infinite;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
font-weight: bold;
text-transform: uppercase;
}
@keyframes instructionPulse {
0%, 100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.rarity-badge {
position: absolute;
top: -10px;
left: -10px;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.7rem;
font-weight: bold;
text-transform: uppercase;
}
.bronze-badge { background: linear-gradient(45deg, #cd7f32, #8b4513); }
.silver-badge { background: linear-gradient(45deg, #c0c0c0, #808080); }
.gold-badge { background: linear-gradient(45deg, #ffd700, #ffb347); }
.diamond-badge { background: linear-gradient(45deg, #b9f2ff, #87ceeb); }
.sigma-badge {
background: linear-gradient(45deg, #ff00ff, #00ffff);
animation: rainbowPulse 1s infinite;
}
@keyframes rainbowPulse {
0% { background: linear-gradient(45deg, #ff00ff, #00ffff); }
25% { background: linear-gradient(45deg, #00ffff, #00ff00); }
50% { background: linear-gradient(45deg, #00ff00, #ffff00); }
75% { background: linear-gradient(45deg, #ffff00, #ff0000); }
100% { background: linear-gradient(45deg, #ff0000, #ff00ff); }
}
</style>
</head>
<body>
<div class="sigma-text">67</div>
<!-- Floating memes -->
<div class="floating-meme" style="top: 10%; left: 10%;">🗿</div>
<div class="floating-meme" style="top: 20%; right: 15%; animation-delay: -1s;">💀</div>
<div class="floating-meme" style="top: 60%; left: 5%; animation-delay: -2s;">🔥</div>
<div class="floating-meme" style="bottom: 20%; right: 10%; animation-delay: -3s;">💯</div>
<!-- Main Menu -->
<div class="screen active" id="main-menu">
<div class="main-menu">
<h1 class="title">67 <img src="IMG_1949.JPG" width="5%" height="5%" alt=""></h1>
<button class="button" onclick="startGame()">PLAY NOW</button>
<button class="button shop-button" onclick="showShop()">SHOP 💰</button>
<button class="button settings-button" onclick="showSettings()">SETTINGS ⚙️</button>
</div>
</div>
<!-- Game Screen -->
<div class="screen" id="game-screen">
<button class="button back-button" onclick="showMainMenu()">← BACK</button>
<div class="game-area">
<div class="player-area">
<div class="stats">
<span>YOUR SIGMA: <span id="player-health">100</span></span>
<span>COINS: <span id="player-coins">50</span></span>
</div>
<h3 style="color: white; text-align: center;">YOUR HAND</h3>
<div class="hand" id="player-hand"></div>
</div>
<div class="player-area">
<div class="stats">
<span>ENEMY SIGMA: <span id="enemy-health">100</span></span>
<span>AI LEVEL: CHAD</span>
</div>
<h3 style="color: white; text-align: center;">ENEMY HAND</h3>
<div class="hand" id="enemy-hand"></div>
</div>
</div>
<div class="battle-log" id="battle-log">
<div>🔥 BATTLE LOG 🔥</div>
<div>Choose your card to battle!</div>
</div>
</div>
<!-- Shop Screen -->
<div class="screen" id="shop-screen">
<button class="button back-button" onclick="showMainMenu()">← BACK</button>
<h1 style="color: white; text-align: center; margin-bottom: 20px;">SIGMA SHOP 💰</h1>
<div class="stats" style="justify-content: center;">
<span>YOUR COINS: <span id="shop-coins">50</span></span>
</div>
<!-- Shop Navigation -->
<div style="text-align: center; margin: 20px 0;">
<button class="button" onclick="showChests()" id="chests-tab">🗿 CHESTS</button>
<button class="button" onclick="showItems()" id="items-tab" style="opacity: 0.7;">⚡ ITEMS</button>
</div>
<!-- Chests Section -->
<div id="chests-section">
<h2 style="color: white; text-align: center; margin-bottom: 20px;">SIGMA CHEST COLLECTION 🔥</h2>
<div class="shop-grid" id="chests-grid"></div>
</div>
<!-- Items Section -->
<div id="items-section" style="display: none;">
<h2 style="color: white; text-align: center; margin-bottom: 20px;">POWER ITEMS ⚡</h2>
<div class="shop-grid" id="items-grid"></div>
</div>
</div>
<!-- Settings Screen -->
<div class="screen" id="settings-screen">
<button class="button back-button" onclick="showMainMenu()">← BACK</button>
<h1 style="color: white; text-align: center;">SETTINGS ⚙️</h1>
<div style="text-align: center; color: white; margin-top: 40px;">
<p style="font-size: 1.5rem; margin: 20px 0;">🔊 Sound: turn me on daddy</p>
<p style="font-size: 1.5rem; margin: 20px 0;">🎮 Difficulty: pegging</p>
<p style="font-size: 1.5rem; margin: 20px 0;">🌈 Effects: PASTIKA</p>
<p style="font-size: 1.2rem; margin: 40px 0;">Made with 💀 by Chad Developer</p>
</div>
</div>
<div class="winner-popup" id="winner-popup">
<div id="winner-text">YOU WIN! 🔥</div>
<button class="button" onclick="hideWinnerPopup()" style="margin-top: 20px;">CONTINUE</button>
</div>
<!-- Chest Opening Screen -->
<div class="chest-opening" id="chest-opening">
<div class="chest-container" id="chest-container" onclick="openChest()">
<div class="chest-glow" id="chest-glow"></div>
<div id="chest-emoji">📦</div>
<div class="particles" id="particles"></div>
</div>
<div class="chest-instruction">CLICK TO OPEN! 🗿</div>
<div class="reward-cards" id="reward-cards"></div>
<button class="button" onclick="closeChestScreen()" style="margin-top: 20px; display: none;" id="close-chest-btn">COLLECT REWARDS</button>
</div>
<script>
let currentChest = null;
let gameState = {
playerHealth: 100,
enemyHealth: 100,
playerCoins: 50,
currentTurn: 'player',
playerCards: [],
enemyCards: []
};
const memeCards = [
{name: "Chad", meme: "💪", power: 15, cost: 10, rarity: "common"},
{name: "Pepe", meme: "🐸", power: 12, cost: 8, rarity: "common"},
{name: "Doge", meme: "🐕", power: 10, cost: 6, rarity: "common"},
{name: "Stonks", meme: "📈", power: 18, cost: 15, rarity: "rare"},
{name: "Among Us", meme: "🔴", power: 14, cost: 12, rarity: "common"},
{name: "Gigachad", meme: "🗿", power: 25, cost: 25, rarity: "legendary"},
{name: "Wojak", meme: "😭", power: 8, cost: 5, rarity: "common"},
{name: "Sigma", meme: "💀", power: 20, cost: 20, rarity: "rare"},
{name: "Troll", meme: "😈", power: 16, cost: 13, rarity: "rare"},
{name: "NPC", meme: "🤖", power: 5, cost: 3, rarity: "common"}
];
const chestCards = [
{name: "Bronze Chest", meme: "📦", description: "3 Common Cards", cost: 20, type: "chest", rarity: "bronze"},
{name: "Silver Chest", meme: "🗃️", description: "2 Common + 1 Rare", cost: 45, type: "chest", rarity: "silver"},
{name: "Gold Chest", meme: "📋", description: "1 Common + 2 Rare", cost: 80, type: "chest", rarity: "gold"},
{name: "Diamond Chest", meme: "💎", description: "1 Rare + 1 Legendary", cost: 150, type: "chest", rarity: "diamond"},
{name: "SIGMA CHEST", meme: "🗿", description: "PURE SIGMA ENERGY", cost: 300, type: "chest", rarity: "sigma"}
];
const shopCards = [
{name: "Sigma Boost", meme: "⚡", description: "+50 Health", cost: 40, type: "boost"},
{name: "Meme Energy", meme: "🔋", description: "+100 Coins", cost: 25, type: "coins"}
];
function showScreen(screenId) {
document.querySelectorAll('.screen').forEach(screen => {
screen.classList.remove('active');
});
document.getElementById(screenId).classList.add('active');
}
function showMainMenu() {
showScreen('main-menu');
spawnRandomMemes();
}
function showShop() {
showScreen('shop-screen');
updateShopCoins();
showChests(); // Default to chests tab
}
function showChests() {
document.getElementById('chests-section').style.display = 'block';
document.getElementById('items-section').style.display = 'none';
document.getElementById('chests-tab').style.opacity = '1';
document.getElementById('items-tab').style.opacity = '0.7';
renderChests();
}
function showItems() {
document.getElementById('chests-section').style.display = 'none';
document.getElementById('items-section').style.display = 'block';
document.getElementById('chests-tab').style.opacity = '0.7';
document.getElementById('items-tab').style.opacity = '1';
renderItems();
}
function renderChests() {
const grid = document.getElementById('chests-grid');
grid.innerHTML = '';
chestCards.forEach(chest => {
const shopEl = document.createElement('div');
shopEl.className = 'shop-card';
shopEl.style.position = 'relative';
const rarityBadge = `<div class="rarity-badge ${chest.rarity}-badge">${chest.rarity}</div>`;
shopEl.innerHTML = `
${rarityBadge}
<div style="font-size: 4rem; margin-bottom: 15px; animation: bounce 2s infinite;">${chest.meme}</div>
<h3 style="text-transform: uppercase; font-weight: bold;">${chest.name}</h3>
<p style="margin: 10px 0; font-size: 0.9rem;">${chest.description}</p>
<div class="price" style="font-size: 1.3rem; margin: 10px 0;">${chest.cost} coins</div>
<button class="button" onclick="buyItem('${chest.name}', ${chest.cost}, '${chest.type}', '${chest.rarity}')"
${gameState.playerCoins < chest.cost ? 'style="opacity:0.5; pointer-events:none;"' : ''}
style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); text-transform: uppercase; font-weight: bold;">
🗿 OPEN CHEST 🗿
</button>
`;
grid.appendChild(shopEl);
});
}
function renderItems() {
const grid = document.getElementById('items-grid');
grid.innerHTML = '';
shopCards.forEach(item => {
const shopEl = document.createElement('div');
shopEl.className = 'shop-card';
shopEl.innerHTML = `
<div style="font-size: 3rem; margin-bottom: 10px;">${item.meme}</div>
<h3>${item.name}</h3>
<p>${item.description}</p>
<div class="price">${item.cost} coins</div>
<button class="button" onclick="buyItem('${item.name}', ${item.cost}, '${item.type}', '')"
${gameState.playerCoins < item.cost ? 'style="opacity:0.5"' : ''}>
BUY
</button>
`;
grid.appendChild(shopEl);
});
}
function showSettings() {
showScreen('settings-screen');
}
function startGame() {
showScreen('game-screen');
initializeGame();
}
function initializeGame() {
gameState.playerHealth = 100;
gameState.enemyHealth = 100;
gameState.currentTurn = 'player';
// Deal initial cards
gameState.playerCards = getRandomCards(5);
gameState.enemyCards = getRandomCards(5);
renderGame();
updateBattleLog("🔥 NEW BATTLE STARTED! Choose your weapon!");
}
function getRandomCards(count) {
const cards = [];
for (let i = 0; i < count; i++) {
cards.push({...memeCards[Math.floor(Math.random() * memeCards.length)]});
}
return cards;
}
function renderGame() {
renderPlayerHand();
renderEnemyHand();
updateGameStats();
}
function renderPlayerHand() {
const hand = document.getElementById('player-hand');
hand.innerHTML = '';
gameState.playerCards.forEach((card, index) => {
const cardEl = createCardElement(card, () => playCard(index, 'player'));
hand.appendChild(cardEl);
});
}
function renderEnemyHand() {
const hand = document.getElementById('enemy-hand');
hand.innerHTML = '';
gameState.enemyCards.forEach((card, index) => {
const cardEl = createCardElement(card, null, true);
hand.appendChild(cardEl);
});
}
function createCardElement(card, clickHandler, isEnemy = false) {
const cardEl = document.createElement('div');
cardEl.className = 'card';
cardEl.innerHTML = `
<div class="card-power">${card.power}</div>
<div class="card-name">${card.name}</div>
<div class="card-meme">${card.meme}</div>
`;
if (clickHandler && gameState.currentTurn === 'player') {
cardEl.onclick = clickHandler;
cardEl.style.cursor = 'pointer';
}
if (isEnemy) {
cardEl.style.background = 'linear-gradient(135deg, #ff4757 0%, #ff3838 100%)';
}
return cardEl;
}
function playCard(cardIndex, player) {
if (gameState.currentTurn !== 'player') return;
const playerCard = gameState.playerCards[cardIndex];
const enemyCardIndex = Math.floor(Math.random() * gameState.enemyCards.length);
const enemyCard = gameState.enemyCards[enemyCardIndex];
// Battle logic
let damage = 0;
if (playerCard.power > enemyCard.power) {
damage = playerCard.power - enemyCard.power;
gameState.enemyHealth -= damage;
updateBattleLog(`💥 Your ${playerCard.name} ${playerCard.meme} destroyed enemy ${enemyCard.name}! -${damage} damage!`);
} else if (playerCard.power < enemyCard.power) {
damage = enemyCard.power - playerCard.power;
gameState.playerHealth -= damage;
updateBattleLog(`😱 Enemy ${enemyCard.name} ${enemyCard.meme} overpowered your ${playerCard.name}! -${damage} damage!`);
} else {
updateBattleLog(`⚔️ ${playerCard.name} vs ${enemyCard.name} - IT'S A TIE!`);
}
// Remove played cards
gameState.playerCards.splice(cardIndex, 1);
gameState.enemyCards.splice(enemyCardIndex, 1);
// Add new cards
gameState.playerCards.push(...getRandomCards(1));
gameState.enemyCards.push(...getRandomCards(1));
// Award coins
gameState.playerCoins += 5;
checkWinCondition();
renderGame();
}
function updateGameStats() {
document.getElementById('player-health').textContent = Math.max(0, gameState.playerHealth);
document.getElementById('enemy-health').textContent = Math.max(0, gameState.enemyHealth);
document.getElementById('player-coins').textContent = gameState.playerCoins;
}
function updateShopCoins() {
document.getElementById('shop-coins').textContent = gameState.playerCoins;
}
function updateBattleLog(message) {
const log = document.getElementById('battle-log');
const div = document.createElement('div');
div.textContent = message;
log.appendChild(div);
log.scrollTop = log.scrollHeight;
}
function checkWinCondition() {
if (gameState.playerHealth <= 0) {
showWinnerPopup("💀 YOU GOT REKT! 💀", false);
} else if (gameState.enemyHealth <= 0) {
showWinnerPopup("🔥 SIGMA VICTORY! 🔥", true);
gameState.playerCoins += 50;
}
}
function showWinnerPopup(text, isWin) {
document.getElementById('winner-text').textContent = text;
document.getElementById('winner-popup').style.display = 'block';
}
function hideWinnerPopup() {
document.getElementById('winner-popup').style.display = 'none';
showMainMenu();
}
function buyItem(itemName, cost, type, rarity) {
if (gameState.playerCoins < cost) {
alert("❌ Not enough coins, broke sigma!");
return;
}
gameState.playerCoins -= cost;
if (type === 'chest') {
openChestAnimation(itemName, rarity);
return; // Don't update shop immediately for chests
} else {
switch(itemName) {
case 'Sigma Boost':
gameState.playerHealth += 50;
alert("⚡ SIGMA BOOSTED! +50 Health!");
break;
case 'Meme Energy':
gameState.playerCoins += 100;
alert("🔋 ENERGY RESTORED! +100 Coins!");
break;
}
}
updateShopCoins();
if (type === 'chest') {
renderChests();
} else {
renderItems();
}
}
function openChestAnimation(chestName, rarity) {
currentChest = {name: chestName, rarity: rarity};
const chestScreen = document.getElementById('chest-opening');
const chestEmoji = document.getElementById('chest-emoji');
const chestGlow = document.getElementById('chest-glow');
const chestContainer = document.getElementById('chest-container');
// Set chest appearance based on rarity
const chestEmojis = {
bronze: '📦',
silver: '🗃️',
gold: '📋',
diamond: '💎',
sigma: '🗿'
};
chestEmoji.textContent = chestEmojis[rarity];
chestGlow.className = `chest-glow ${rarity}-glow`;
// Reset all animations and states
chestContainer.className = 'chest-container';
document.getElementById('reward-cards').innerHTML = '';
document.getElementById('close-chest-btn').style.display = 'none';
document.getElementById('particles').innerHTML = '';
// Remove any existing floating text
document.querySelectorAll('.floating-text').forEach(el => el.remove());
document.querySelectorAll('.mega-explosion').forEach(el => el.remove());
document.querySelectorAll('.screen-flash').forEach(el => el.remove());
chestScreen.style.display = 'flex';
// Stage 1: Initial anticipation (2 seconds)
setTimeout(() => {
chestContainer.classList.add('chest-stage-1');
addFloatingText('GET READY...', 'top: 20%; left: 50%; transform: translateX(-50%);');
}, 500);
// Stage 2: Building tension (1.5 seconds)
setTimeout(() => {
chestContainer.classList.remove('chest-stage-1');
chestContainer.classList.add('chest-stage-2');
addFloatingText('CLICK NOW!', 'top: 80%; left: 50%; transform: translateX(-50%);');
}, 2000);
}
function openChest() {
const chestContainer = document.getElementById('chest-container');
const chestGlow = document.getElementById('chest-glow');
const rewardCards = document.getElementById('reward-cards');
const closeBtn = document.getElementById('close-chest-btn');
// Prevent multiple clicks
chestContainer.onclick = null;
// Remove previous stages and start explosion
chestContainer.className = 'chest-container chest-stage-3';
// Screen flash effect
const flash = document.createElement('div');
flash.className = 'screen-flash';
document.body.appendChild(flash);
// Create massive particle explosion
createMegaParticleExplosion();
// Add floating excitement text
addFloatingText('OPENING!', 'top: 30%; left: 20%;');
addFloatingText('EPIC!', 'top: 25%; right: 20%;');
addFloatingText('SIGMA!', 'top: 70%; left: 30%;');
// Special SIGMA chest effects
if (currentChest.rarity === 'sigma') {
// Mega explosion
const megaExplosion = document.createElement('div');
megaExplosion.className = 'mega-explosion';
megaExplosion.textContent = '🗿';
chestContainer.appendChild(megaExplosion);
// Multiple screen flashes
setTimeout(() => {
const flash2 = document.createElement('div');
flash2.className = 'screen-flash';
document.body.appendChild(flash2);
}, 500);
setTimeout(() => {
const flash3 = document.createElement('div');
flash3.className = 'screen-flash';
document.body.appendChild(flash3);
}, 1000);
// Ultra sigma text
addFloatingText('ULTIMATE!', 'top: 15%; left: 50%; transform: translateX(-50%);');
addFloatingText('SIGMA!', 'top: 85%; left: 50%; transform: translateX(-50%);');
addFloatingText('POWER!', 'top: 50%; left: 10%;');
addFloatingText('LEGENDARY!', 'top: 50%; right: 10%;');
// Screen shake effect
document.body.style.animation = 'shake 0.2s ease-in-out 10';
}
// Generate rewards based on chest type
const rewards = generateChestRewards(currentChest.rarity);
setTimeout(() => {
// Show rewards with staggered animation
rewardCards.innerHTML = '';
rewards.forEach((card, index) => {
setTimeout(() => {
const cardEl = createRewardCardElement(card);
cardEl.style.animationDelay = `${index * 0.2}s`;
rewardCards.appendChild(cardEl);
}, index * 200);
});
// Show close button
setTimeout(() => {
closeBtn.style.display = 'block';
closeBtn.style.animation = 'cardsReveal 1s ease-out forwards';
}, rewards.length * 200 + 500);
// Add coins based on rarity with floating text
const coinRewards = {
bronze: 10,
silver: 25,
gold: 50,
diamond: 100,
sigma: 500
};
const coinReward = coinRewards[currentChest.rarity];
gameState.playerCoins += coinReward;
addFloatingText(`+${coinReward} COINS!`, 'top: 60%; left: 50%; transform: translateX(-50%);', 4);
}, 3000);
// Clean up animations after 10 seconds
setTimeout(() => {
document.querySelectorAll('.screen-flash').forEach(el => el.remove());
document.body.style.animation = '';
}, 10000);
}
function generateChestRewards(rarity) {
const rewards = [];
switch(rarity) {
case 'bronze':
// 3 common cards
for(let i = 0; i < 3; i++) {
const commonCards = memeCards.filter(card => card.rarity === 'common');
rewards.push(commonCards[Math.floor(Math.random() * commonCards.length)]);
}
break;
case 'silver':
// 2 common + 1 rare
for(let i = 0; i < 2; i++) {
const commonCards = memeCards.filter(card => card.rarity === 'common');
rewards.push(commonCards[Math.floor(Math.random() * commonCards.length)]);
}
const rareCards = memeCards.filter(card => card.rarity === 'rare');
rewards.push(rareCards[Math.floor(Math.random() * rareCards.length)]);
break;
case 'gold':
// 1 common + 2 rare
const commonCards = memeCards.filter(card => card.rarity === 'common');
rewards.push(commonCards[Math.floor(Math.random() * commonCards.length)]);
for(let i = 0; i < 2; i++) {
const rareCards = memeCards.filter(card => card.rarity === 'rare');
rewards.push(rareCards[Math.floor(Math.random() * rareCards.length)]);
}
break;
case 'diamond':
// 1 rare + 1 legendary
const rareCardsDiamond = memeCards.filter(card => card.rarity === 'rare');
rewards.push(rareCardsDiamond[Math.floor(Math.random() * rareCardsDiamond.length)]);
const legendaryCards = memeCards.filter(card => card.rarity === 'legendary');
rewards.push(legendaryCards[Math.floor(Math.random() * legendaryCards.length)]);
break;
case 'sigma':
// PURE SIGMA ENERGY - all legendaries
const allLegendary = memeCards.filter(card => card.rarity === 'legendary');
for(let i = 0; i < 3; i++) {
rewards.push(allLegendary[Math.floor(Math.random() * allLegendary.length)]);
}
break;
}
return rewards;
}
function createRewardCardElement(card) {
const cardEl = document.createElement('div');
cardEl.className = 'card';
cardEl.style.transform = 'scale(0.8)';
let rarityColor = {
common: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
rare: 'linear-gradient(135deg, #ffd89b 0%, #19547b 100%)',
legendary: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%)'
};
cardEl.style.background = rarityColor[card.rarity] || rarityColor.common;
cardEl.innerHTML = `
<div class="card-power">${card.power}</div>
<div class="card-name">${card.name}</div>
<div class="card-meme">${card.meme}</div>
<div style="font-size: 0.7rem; margin-top: 5px; text-transform: uppercase; opacity: 0.8;">${card.rarity}</div>
`;
return cardEl;
}
function createMegaParticleExplosion() {
const particles = document.getElementById('particles');
particles.innerHTML = '';
// Create way more particles for epic effect
const particleCount = currentChest.rarity === 'sigma' ? 80 : 50;
for(let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const angle = (i / particleCount) * 2 * Math.PI;
const distance = 150 + Math.random() * 300;
const dx = Math.cos(angle) * distance;
const dy = Math.sin(angle) * distance;
particle.style.setProperty('--dx', dx + 'px');
particle.style.setProperty('--dy', dy + 'px');
// Color particles based on rarity
const colors = {
bronze: '#cd7f32',
silver: '#c0c0c0',
gold: '#ffd700',
diamond: '#b9f2ff',
sigma: `hsl(${Math.random() * 360}, 100%, 50%)`
};
particle.style.background = colors[currentChest.rarity];
particle.style.animationDelay = `${Math.random() * 0.5}s`;
// Larger particles for higher rarities
if (currentChest.rarity === 'diamond' || currentChest.rarity === 'sigma') {
particle.style.width = '20px';
particle.style.height = '20px';
}
particles.appendChild(particle);
}
}
function addFloatingText(text, position, duration = 3) {
const floatingText = document.createElement('div');
floatingText.className = 'floating-text';
floatingText.textContent = text;
floatingText.style.cssText = position;
floatingText.style.animationDuration = `${duration}s`;
// Special colors for different rarities
const colors = {
bronze: '#cd7f32',
silver: '#c0c0c0',
gold: '#ffd700',
diamond: '#b9f2ff',
sigma: '#ff00ff'
};
if (currentChest && colors[currentChest.rarity]) {
floatingText.style.color = colors[currentChest.rarity];
floatingText.style.textShadow = `0 0 10px ${colors[currentChest.rarity]}`;
}
document.getElementById('chest-opening').appendChild(floatingText);
// Remove after animation
setTimeout(() => {
if (floatingText.parentNode) {
floatingText.parentNode.removeChild(floatingText);
}
}, duration * 1000);
}
function closeChestScreen() {
document.getElementById('chest-opening').style.display = 'none';
currentChest = null;
updateShopCoins();
if (document.getElementById('shop-screen').classList.contains('active')) {
renderChests(); // Refresh the chests display
}
}
function spawnRandomMemes() {
const memes = ['🗿', '💀', '🔥', '💯', '😂', '🤡', '👑', '💎', '🚀', '⚡'];
setInterval(() => {
if (document.getElementById('main-menu').classList.contains('active')) {
const meme = document.createElement('div');
meme.textContent = memes[Math.floor(Math.random() * memes.length)];
meme.style.position = 'fixed';
meme.style.fontSize = '2rem';
meme.style.left = Math.random() * window.innerWidth + 'px';
meme.style.top = '-50px';
meme.style.zIndex = '1';
meme.style.animation = 'fall 3s linear forwards';
document.body.appendChild(meme);
setTimeout(() => {
if (meme.parentNode) {
meme.parentNode.removeChild(meme);
}
}, 3000);
}
}, 2000);
}
// Add screen shake animation
const style = document.createElement('style');
style.textContent = `
@keyframes fall {
to {
transform: translateY(${window.innerHeight + 50}px) rotate(360deg);
opacity: 0;
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
`;
document.head.appendChild(style);
// Initialize
spawnRandomMemes();
</script>
</body>
</html>Editor is loading...
Leave a Comment