anycoder-522ed2c0 / index.html
themiga's picture
Upload folder using huggingface_hub
126ec95 verified
Raw History Blame Contribute Delete
35.4 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MM2 Style Game Simulator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #ff4757; --secondary: #2f3542; --accent: #ffa502; --dark: #1e272e; --light: #f1f2f6; --success: #2ed573; --danger: #ff6b81; --murderer: #ff4757; --sheriff: #3742fa; --innocent: #2ed573; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e272e 0%, #2f3542 100%); min-height: 100vh; color: var(--light); overflow-x: hidden; } /* Header */ .header { background: linear-gradient(90deg, var(--dark), var(--secondary)); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--primary); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .logo { display: flex; align-items: center; gap: 1rem; } .logo i { font-size: 2.5rem; color: var(--primary); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .logo h1 { font-size: 1.8rem; background: linear-gradient(45deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .built-with { color: var(--accent); text-decoration: none; font-size: 0.9rem; transition: all 0.3s; padding: 0.5rem 1rem; border: 1px solid var(--accent); border-radius: 20px; } .built-with:hover { background: var(--accent); color: var(--dark); } /* Main Container */ .container { max-width: 1400px; margin: 0 auto; padding: 2rem; } /* Game Stats */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .stat-card { background: linear-gradient(145deg, var(--secondary), var(--dark)); padding: 1.5rem; border-radius: 15px; text-align: center; border: 2px solid transparent; transition: all 0.3s; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: 0.5s; } .stat-card:hover::before { left: 100%; } .stat-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 30px rgba(255,71,87,0.3); } .stat-card i { font-size: 2.5rem; margin-bottom: 1rem; } .stat-card.kills i { color: var(--murderer); } .stat-card.wins i { color: var(--success); } .stat-card.coins i { color: var(--accent); } .stat-card.level i { color: var(--sheriff); } .stat-value { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; } .stat-label { color: #a4a4a4; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } /* Game Area */ .game-section { display: grid; grid-template-columns: 1fr 350px; gap: 2rem; margin-bottom: 2rem; } @media (max-width: 900px) { .game-section { grid-template-columns: 1fr; } } /* Game Arena */ .game-arena { background: linear-gradient(145deg, #2a2a3e, #1a1a2e); border-radius: 20px; padding: 2rem; position: relative; min-height: 500px; border: 2px solid var(--secondary); } .arena-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .arena-title { font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .timer { background: var(--dark); padding: 0.8rem 1.5rem; border-radius: 10px; font-size: 1.5rem; font-weight: bold; color: var(--primary); font-family: 'Courier New', monospace; } .arena-map { background: linear-gradient(135deg, #0a0a15, #1a1a2e); border-radius: 15px; height: 350px; position: relative; overflow: hidden; border: 1px solid #333; } .player { position: absolute; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s; cursor: pointer; z-index: 10; } .player:hover { transform: scale(1.2); } .player.murderer { background: var(--murderer); box-shadow: 0 0 20px var(--murderer); } .player.sheriff { background: var(--sheriff); box-shadow: 0 0 20px var(--sheriff); } .player.innocent { background: var(--innocent); box-shadow: 0 0 20px var(--innocent); } .player.dead { opacity: 0.3; filter: grayscale(100%); } .player-name { position: absolute; bottom: -25px; white-space: nowrap; font-size: 0.7rem; background: rgba(0,0,0,0.7); padding: 2px 8px; border-radius: 10px; } /* Role Card */ .role-display { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 1rem 2rem; border-radius: 15px; text-align: center; backdrop-filter: blur(10px); } .role-display.murderer { border: 2px solid var(--murderer); } .role-display.sheriff { border: 2px solid var(--sheriff); } .role-display.innocent { border: 2px solid var(--innocent); } .role-label { font-size: 0.8rem; color: #888; margin-bottom: 0.3rem; } .role-name { font-size: 1.5rem; font-weight: bold; text-transform: uppercase; } .role-name.murderer { color: var(--murderer); } .role-name.sheriff { color: var(--sheriff); } .role-name.innocent { color: var(--innocent); } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .panel { background: linear-gradient(145deg, var(--secondary), var(--dark)); border-radius: 15px; padding: 1.5rem; border: 1px solid #444; } .panel-title { font-size: 1.2rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--accent); } /* Players List */ .players-list { display: flex; flex-direction: column; gap: 0.8rem; max-height: 200px; overflow-y: auto; } .player-item { display: flex; align-items: center; gap: 1rem; padding: 0.8rem; background: rgba(0,0,0,0.3); border-radius: 10px; transition: all 0.3s; } .player-item:hover { background: rgba(255,255,255,0.1); } .player-avatar { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } .player-info { flex: 1; } .player-info h4 { font-size: 0.9rem; } .player-info span { font-size: 0.75rem; color: #888; } .player-status { font-size: 0.7rem; padding: 0.3rem 0.6rem; border-radius: 15px; text-transform: uppercase; } .player-status.alive { background: var(--success); color: var(--dark); } .player-status.dead { background: var(--danger); color: white; } /* Inventory */ .inventory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .inventory-slot { aspect-ratio: 1; background: rgba(0,0,0,0.4); border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; transition: all 0.3s; cursor: pointer; } .inventory-slot:hover { border-color: var(--accent); transform: scale(1.05); } .inventory-slot.legendary { border-color: var(--accent); background: linear-gradient(145deg, rgba(255,165,2,0.2), rgba(0,0,0,0.4)); } .inventory-slot.godly { border-color: var(--primary); background: linear-gradient(145deg, rgba(255,71,87,0.2), rgba(0,0,0,0.4)); animation: godlyGlow 2s infinite; } @keyframes godlyGlow { 0%, 100% { box-shadow: 0 0 10px var(--primary); } 50% { box-shadow: 0 0 20px var(--primary); } } .inventory-slot i { font-size: 1.5rem; } /* Controls */ .controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; } .btn { padding: 1rem; border: none; border-radius: 10px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-primary { background: linear-gradient(45deg, var(--primary), #ff6b81); color: white; } .btn-secondary { background: linear-gradient(45deg, var(--sheriff), #5352ed); color: white; } .btn-success { background: linear-gradient(45deg, var(--success), #7bed9f); color: var(--dark); } .btn-warning { background: linear-gradient(45deg, var(--accent), #ffc048); color: var(--dark); } .btn:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(0,0,0,0.3); } .btn:active { transform: translateY(0); } /* Chat */ .chat-messages { height: 150px; overflow-y: auto; margin-bottom: 1rem; padding: 0.5rem; background: rgba(0,0,0,0.3); border-radius: 10px; } .chat-message { margin-bottom: 0.5rem; font-size: 0.85rem; } .chat-message .username { font-weight: bold; color: var(--accent); } .chat-input-container { display: flex; gap: 0.5rem; } .chat-input { flex: 1; padding: 0.8rem; border: none; border-radius: 10px; background: rgba(0,0,0,0.4); color: white; font-size: 0.9rem; } .chat-input:focus { outline: 2px solid var(--accent); } .chat-send { padding: 0.8rem 1.2rem; background: var(--accent); border: none; border-radius: 10px; color: var(--dark); cursor: pointer; transition: all 0.3s; } .chat-send:hover { background: #ffc048; } /* Knife Collection */ .knife-collection { margin-top: 2rem; } .knife-collection h2 { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .knives-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .knife-card { background: linear-gradient(145deg, var(--secondary), var(--dark)); border-radius: 15px; padding: 1.5rem; text-align: center; border: 2px solid transparent; transition: all 0.3s; cursor: pointer; } .knife-card:hover { transform: translateY(-5px); border-color: var(--accent); } .knife-card.common { border-color: #888; } .knife-card.uncommon { border-color: #2ed573; } .knife-card.rare { border-color: #3742fa; } .knife-card.legendary { border-color: var(--accent); } .knife-card.godly { border-color: var(--primary); animation: godlyGlow 2s infinite; } .knife-icon { font-size: 3rem; margin-bottom: 1rem; } .knife-name { font-weight: bold; margin-bottom: 0.5rem; } .knife-rarity { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; padding: 0.3rem 0.8rem; border-radius: 15px; display: inline-block; } .knife-rarity.common { background: #888; } .knife-rarity.uncommon { background: #2ed573; color: var(--dark); } .knife-rarity.rare { background: #3742fa; } .knife-rarity.legendary { background: var(--accent); color: var(--dark); } .knife-rarity.godly { background: var(--primary); } /* Event Log */ .event-log { position: fixed; top: 100px; right: 20px; width: 300px; max-height: 200px; overflow-y: auto; z-index: 100; } .event { background: rgba(0,0,0,0.8); padding: 0.8rem 1rem; border-radius: 10px; margin-bottom: 0.5rem; animation: slideIn 0.3s ease; border-left: 3px solid var(--accent); } @keyframes slideIn { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .event.kill { border-left-color: var(--murderer); } .event.win { border-left-color: var(--success); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--dark); } ::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Responsive */ @media (max-width: 768px) { .header { flex-direction: column; gap: 1rem; text-align: center; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .controls { grid-template-columns: 1fr; } .event-log { position: static; width: 100%; margin-bottom: 1rem; } .container { padding: 1rem; } } /* Loading Animation */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.5s; } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .loading-knife { font-size: 5rem; color: var(--primary); animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-text { margin-top: 1rem; font-size: 1.5rem; color: var(--accent); } </style> </head> <body> <!-- Loading Overlay --> <div class="loading-overlay" id="loadingOverlay"> <i class="fas fa-crosshairs loading-knife"></i> <div class="loading-text">Loading Game...</div> </div> <!-- Header --> <header class="header"> <div class="logo"> <i class="fas fa-skull-crossbones"></i> <h1>MM2 Game Simulator</h1> </div> <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> <i class="fas fa-code"></i> Built with anycoder </a> </header> <!-- Event Log --> <div class="event-log" id="eventLog"></div> <div class="container"> <!-- Stats Grid --> <div class="stats-grid"> <div class="stat-card kills"> <i class="fas fa-skull"></i> <div class="stat-value" id="killsCount">0</div> <div class="stat-label">Total Kills</div> </div> <div class="stat-card wins"> <i class="fas fa-trophy"></i> <div class="stat-value" id="winsCount">0</div> <div class="stat-label">Victories</div> </div> <div class="stat-card coins"> <i class="fas fa-coins"></i> <div class="stat-value" id="coinsCount">0</div> <div class="stat-label">Coins</div> </div> <div class="stat-card level"> <i class="fas fa-star"></i> <div class="stat-value" id="levelCount">1</div> <div class="stat-label">Level</div> </div> </div> <!-- Game Section --> <div class="game-section"> <!-- Game Arena --> <div class="game-arena"> <div class="arena-header"> <div class="arena-title"> <i class="fas fa-gamepad"></i> <span>Game Arena</span> </div> <div class="timer" id="gameTimer">02:00</div> </div> <div class="arena-map" id="arenaMap"> <!-- Players will be added here dynamically --> </div> <div class="role-display innocent" id="roleDisplay"> <div class="role-label">Your Role</div> <div class="role-name innocent" id="roleName">Innocent</div> </div> </div> <!-- Sidebar --> <div class="sidebar"> <!-- Players Panel --> <div class="panel"> <div class="panel-title"> <i class="fas fa-users"></i> Players (8/12) </div> <div class="players-list" id="playersList"> <!-- Players will be added dynamically --> </div> </div> <!-- Inventory Panel --> <div class="panel"> <div class="panel-title"> <i class="fas fa-box"></i> Inventory </div> <div class="inventory-grid" id="inventoryGrid"> <!-- Inventory slots will be added dynamically --> </div> </div> <!-- Chat Panel --> <div class="panel"> <div class="panel-title"> <i class="fas fa-comments"></i> Chat </div> <div class="chat-messages" id="chatMessages"> <!-- Chat messages will be added dynamically --> </div> <div class="chat-input-container"> <input type="text" class="chat-input" id="chatInput" placeholder="Type a message..."> <button class="chat-send" onclick="sendMessage()"> <i class="fas fa-paper-plane"></i> </button> </div> </div> </div> </div> <!-- Controls --> <div class="controls"> <button class="btn btn-primary" onclick="startNewRound()"> <i class="fas fa-play"></i> New Round </button> <button class="btn btn-secondary" onclick="assignRoles()"> <i class="fas fa-random"></i> Shuffle Roles </button> <button class="btn btn-success" onclick="collectCoins()"> <i class="fas fa-coins"></i> Collect Coins </button> <button class="btn btn-warning" onclick="openCrate()"> <i class="fas fa-gift"></i> Open Crate </button> </div> <!-- Knife Collection --> <div class="knife-collection"> <h2><i class="fas fa-cut"></i> Knife Collection</h2> <div class="knives-grid" id="knivesGrid"> <!-- Knives will be added dynamically --> </div> </div> </div> <script> // Game State const gameState = { kills: 0, wins: 0, coins: 500, level: 1, xp: 0, currentRole: 'innocent', timeRemaining: 120, gameActive: false, players: [], knives: [], inventory: [] }; // Player names for simulation const playerNames = [ 'ShadowKiller', 'NinjaWarrior', 'DarkLord', 'SwiftBlade', 'GhostHunter', 'BladeRunner', 'StealthMaster', 'VenomStrike', 'PhantomX', 'CrimsonBlade', 'NightStalker', 'IronFist' ]; // Knife data const knifeData = [ { name: 'Classic', rarity: 'common', icon: 'fa-utensils' }, { name: 'Seer', rarity: 'godly', icon: 'fa-eye' }, { name: 'Chroma Seer', rarity: 'godly', icon: 'fa-star' }, { name: 'Luger', rarity: 'legendary', icon: 'fa-crosshairs' }, { name: 'Laser', rarity: 'legendary', icon: 'fa-bolt' }, { name: 'Fang', rarity: 'rare', icon: 'fa-tooth' }, { name: 'Slasher', rarity: 'rare', icon: 'fa-slash' }, { name: 'Spider', rarity: 'uncommon', icon: 'fa-spider' }, { name: 'Ghostblade', rarity: 'godly', icon: 'fa-ghost' }, { name: 'Elderwood', rarity: 'legendary', icon: 'fa-tree' }, { name: 'Batwing', rarity: 'godly', icon: 'fa-crow' }, { name: 'Eternal', rarity: 'godly', icon: 'fa-infinity' } ]; // Initialize game function initGame() { generatePlayers(); generateInventory(); generateKnives(); updateStats(); addChatMessage('System', 'Welcome to MM2 Simulator!'); addChatMessage('System', 'Click "New Round" to start playing!'); // Hide loading screen setTimeout(() => { document.getElementById('loadingOverlay').classList.add('hidden'); }, 1500); } // Generate players function generatePlayers() { const arenaMap = document.getElementById('arenaMap'); const playersList = document.getElementById('playersList'); arenaMap.innerHTML = ''; playersList.innerHTML = ''; gameState.players = []; const numPlayers = 8; const shuffledNames = [...playerNames].sort(() => Math.random() - 0.5).slice(0, numPlayers); shuffledNames.forEach((name, index) => { const player = { id: index, name: name, role: 'innocent', alive: true, x: Math.random() * 80 + 10, y: Math.random() * 80 + 10 }; gameState.players.push(player); // Add to arena const playerEl = document.createElement('div'); playerEl.className = `player innocent`; playerEl.id = `player-${index}`; playerEl.style.left = `${player.x}%`; playerEl.style.top = `${player.y}%`; playerEl.innerHTML = ` <i class="fas fa-user"></i> <span class="player-name">${name}</span> `; playerEl.onclick = () => interactWithPlayer(index); arenaMap.appendChild(playerEl); // Add to list const listItem = document.createElement('div'); listItem.className = 'player-item'; listItem.id = `list-${index}`; listItem.innerHTML = ` <div class="player-avatar" style="background: var(--innocent)"> ${name.charAt(0)} </div> <div class="player-info"> <h4>${name}</h4> <span>Level ${Math.floor(Math.random() * 50) + 1}</span> </div> <span class="player-status alive">Alive</span> `; playersList.appendChild(listItem); }); } // Generate inventory function generateInventory() { const inventoryGrid = document.getElementById('inventoryGrid'); inventoryGrid.innerHTML = ''; const items = [ { icon: 'fa-cut', rarity: 'godly' }, { icon: 'fa-crosshairs', rarity: 'legendary' }, { icon: 'fa-bolt', rarity: 'rare' }, { icon: 'fa-coins', rarity: '' }, { icon: '', rarity: '' }, { icon: '', rarity: '' }, { icon: '', rarity: '' }, { icon: '', rarity: '' } ]; items.forEach(item => { const slot = document.createElement('div'); slot.className = `inventory-slot ${item.rarity}`; slot.innerHTML = item.icon ? `<i class="fas ${item.icon}"></i>` : ''; inventoryGrid.appendChild(slot); }); } // Generate knife collection function generateKnives() { const knivesGrid = document.getElementById('knivesGrid'); knivesGrid.innerHTML = ''; knifeData.forEach(knife => { const card = document.createElement('div'); card.className = `knife-card ${knife.rarity}`; card.innerHTML = ` <div class="knife-icon"><i class="fas ${knife.icon}"></i></div> <div class="knife-name">${knife.name}</div> <span class="knife-rarity ${knife.rarity}">${knife.rarity}</span> `; knivesGrid.appendChild(card); }); } // Assign roles function assignRoles() { if (gameState.players.length < 3) return; // Reset all to innocent gameState.players.forEach(p => p.role = 'innocent'); // Assign murderer const murdererIndex = Math.floor(Math.random() * gameState.players.length); gameState.players[murdererIndex].role = 'murderer'; // Assign sheriff let sheriffIndex; do { sheriffIndex = Math.floor(Math.random() * gameState.players.length); } while (sheriffIndex === murdererIndex); gameState.players[sheriffIndex].role = 'sheriff'; // Player role (random for simulation) const playerRoleIndex = Math.floor(Math.random() * 3); const roles = ['innocent', 'sheriff', 'murderer']; gameState.currentRole = roles[playerRoleIndex]; updateRoleDisplay(); updatePlayerVisuals(); addEvent(`Roles have been assigned!`, 'info'); } // Update role display function updateRoleDisplay() { const roleDisplay = document.getElementById('roleDisplay'); const roleName = document.getElementById('roleName'); roleDisplay.className = `role-display ${gameState.currentRole}`; roleName.className = `role-name ${gameState.currentRole}`; roleName.textContent = gameState.currentRole.charAt(0).toUpperCase() + gameState.currentRole.slice(1); } // Update player visuals function updatePlayerVisuals() { gameState.players.forEach((player, index) => { const playerEl = document.getElementById(`player-${index}`); const listItem = document.getElementById(`list-${index}`); if (playerEl) { playerEl.className = `player ${player.role} ${player.alive ? '' : 'dead'}`; } if (listItem) { const status = listItem.querySelector('.player-status'); status.className = `player-status ${player.alive ? 'alive' : 'dead'}`; status.textContent = player.alive ? 'Alive' : 'Dead'; } }); } // Interact with player function interactWithPlayer(index) { const player = gameState.players[index]; if (!player.alive) return; if (gameState.currentRole === 'murderer' && player.role !== 'murderer') { player.alive = false; gameState.kills++; gameState.coins += 50; gameState.xp += 25; updateStats(); updatePlayerVisuals(); addEvent(`${player.name} was eliminated!`, 'kill'); addChatMessage('System', `${player.name} was killed!`); checkWinCondition(); } else if (gameState.currentRole === 'sheriff' && player.role === 'murderer') { player.alive = false; gameState.wins++; gameState.coins += 200; gameState.xp += 100; updateStats(); updatePlayerVisuals(); addEvent(`Sheriff shot the Murderer! Innocents win!`, 'win'); addChatMessage('System', 'The Murderer has been caught!'); } } // Check win condition function checkWinCondition() { const alivePlayers = gameState.players.filter(p => p.alive && p.role !== 'murderer'); if (alivePlayers.length === 0) { addEvent('Murderer wins!', 'win'); if (gameState.currentRole === 'murderer') { gameState.wins++; gameState.coins += 300; updateStats(); } } } // Start new round function startNewRound() { gameState.timeRemaining = 120; gameState.gameActive = true; generatePlayers(); assignRoles(); startTimer(); addEvent('New round started!', 'info'); addChatMessage('System', 'A new round has begun!'); } // Timer let timerInterval; function startTimer() { clearInterval(timerInterval); timerInterval = setInterval(() => { if (gameState.timeRemaining > 0) { gameState.timeRemaining--; updateTimerDisplay(); // Random player movement if (Math.random() > 0.7) { movePlayers(); } } else { clearInterval(timerInterval); gameState.gameActive = false; addEvent('Time is up! Innocents survive!', 'win'); } }, 1000); } function updateTimerDisplay() { const minutes = Math.floor(gameState.timeRemaining / 60); const seconds = gameState.timeRemaining % 60; document.getElementById('gameTimer').textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; } // Move players randomly function movePlayers() { gameState.players.forEach((player, index) => { if (player.alive) { player.x = Math.max(5, Math.min(90, player.x + (Math.random() - 0.5) * 10)); player.y = Math.max(5, Math.min(85, player.y + (Math.random() - 0.5) * 10)); const playerEl = document.getElementById(`player-${index}`); if (playerEl) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MM2 Style Game Simulator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #ff4757;
--secondary: #2f3542;
--accent: #ffa502;
--dark: #1e272e;
--light: #f1f2f6;
--success: #2ed573;
--danger: #ff6b81;
--murderer: #ff4757;
--sheriff: #3742fa;
--innocent: #2ed573;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e272e 0%, #2f3542 100%);
min-height: 100vh;
color: var(--light);
overflow-x: hidden;
}
/* Header */
.header {
background: linear-gradient(90deg, var(--dark), var(--secondary));
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 3px solid var(--primary);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
}
.logo i {
font-size: 2.5rem;
color: var(--primary);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.logo h1 {
font-size: 1.8rem;
background: linear-gradient(45deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.built-with {
color: var(--accent);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s;
padding: 0.5rem 1rem;
border: 1px solid var(--accent);
border-radius: 20px;
}
.built-with:hover {
background: var(--accent);
color: var(--dark);
}
/* Main Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/* Game Stats */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}