Spaces:
Running
Running
Download index.html from themiga/anycoder-522ed2c0: direct link, hf CLI and curl.
- Browser
- Download file 35.4 kB
-
https://huggingface.co/spaces/themiga/anycoder-522ed2c0/resolve/main/index.html
- Command line
-
hf download hf://spaces/themiga/anycoder-522ed2c0/index.html
-
curl -L -o index.html https://huggingface.co/spaces/themiga/anycoder-522ed2c0/resolve/main/index.html
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) {
<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;
}