Hugging Face's logo

Spaces:
D110
/
b
Running

App Files Community
b / index.html
D110's picture
D110
Add 3 files
c218c78 verified
raw
history blame contribute delete
57.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Battle Royale</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.game-container {
perspective: 1000px;
}
.character {
transition: transform 0.2s;
}
.character:hover {
transform: translateY(-5px) rotateY(10deg);
}
.weapon-card {
transition: all 0.3s;
}
.weapon-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.map-selector {
background-size: cover;
background-position: center;
transition: all 0.3s;
}
.map-selector:hover {
transform: scale(1.03);
}
#game-screen {
display: none;
position: relative;
overflow: hidden;
background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
}
#player {
position: absolute;
width: 50px;
height: 50px;
background-image: url('https://i.imgur.com/Jj7ZxHm.png');
background-size: contain;
background-repeat: no-repeat;
z-index: 10;
}
.enemy {
position: absolute;
width: 40px;
height: 40px;
background-image: url('https://i.imgur.com/8Km9tLL.png');
background-size: contain;
background-repeat: no-repeat;
z-index: 9;
}
.bullet {
position: absolute;
width: 5px;
height: 5px;
background-color: yellow;
border-radius: 50%;
z-index: 8;
}
.health-bar {
height: 5px;
background-color: red;
transition: width 0.3s;
}
.damage-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.3);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.loot-item {
position: absolute;
width: 30px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
z-index: 7;
animation: pulse 1.5s infinite;
}
#mini-map {
position: absolute;
bottom: 20px;
right: 20px;
width: 150px;
height: 150px;
background-color: rgba(0,0,0,0.5);
border: 2px solid #fff;
z-index: 20;
}
#player-mini {
position: absolute;
width: 5px;
height: 5px;
background-color: blue;
border-radius: 50%;
}
.enemy-mini {
position: absolute;
width: 4px;
height: 4px;
background-color: red;
border-radius: 50%;
}
.safe-zone {
position: absolute;
border: 2px dashed #00ff00;
border-radius: 50%;
}
#kill-feed {
position: absolute;
top: 20px;
right: 20px;
width: 200px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
border-radius: 5px;
z-index: 20;
}
.kill-message {
margin-bottom: 5px;
animation: fadeIn 0.5s;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- Main Menu -->
<div id="main-menu" class="min-h-screen flex flex-col items-center justify-center p-4">
<div class="text-center mb-12">
<h1 class="text-6xl font-bold mb-4 text-yellow-400">ULTIMATE BATTLE ROYALE</h1>
<p class="text-xl text-gray-300">Survive, Loot, and Be the Last One Standing!</p>
</div>
<div class="flex flex-col md:flex-row gap-8 w-full max-w-6xl">
<!-- Quick Play -->
<div class="bg-gray-800 rounded-lg p-6 flex-1 hover:bg-gray-700 transition cursor-pointer" onclick="startGame()">
<div class="text-center">
<i class="fas fa-play-circle text-5xl text-green-500 mb-4"></i>
<h2 class="text-2xl font-bold mb-2">Quick Play</h2>
<p class="text-gray-300">Jump into a match right away with random settings</p>
</div>
</div>
<!-- Custom Game -->
<div class="bg-gray-800 rounded-lg p-6 flex-1 hover:bg-gray-700 transition cursor-pointer" onclick="showCustomGameMenu()">
<div class="text-center">
<i class="fas fa-cog text-5xl text-blue-500 mb-4"></i>
<h2 class="text-2xl font-bold mb-2">Custom Game</h2>
<p class="text-gray-300">Customize your match settings and play style</p>
</div>
</div>
<!-- Inventory -->
<div class="bg-gray-800 rounded-lg p-6 flex-1 hover:bg-gray-700 transition cursor-pointer" onclick="showInventory()">
<div class="text-center">
<i class="fas fa-archive text-5xl text-purple-500 mb-4"></i>
<h2 class="text-2xl font-bold mb-2">Inventory</h2>
<p class="text-gray-300">View and manage your collected items and skins</p>
</div>
</div>
</div>
<div class="mt-12 flex gap-4">
<button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-bold flex items-center gap-2">
<i class="fas fa-users"></i> Squad
</button>
<button class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-bold flex items-center gap-2">
<i class="fas fa-store"></i> Shop
</button>
<button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-bold flex items-center gap-2">
<i class="fas fa-cog"></i> Settings
</button>
</div>
</div>
<!-- Custom Game Menu -->
<div id="custom-game-menu" class="min-h-screen hidden p-8">
<div class="max-w-6xl mx-auto">
<div class="flex justify-between items-center mb-8">
<h1 class="text-4xl font-bold text-yellow-400">CUSTOM GAME</h1>
<button onclick="hideCustomGameMenu()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg">
<i class="fas fa-arrow-left"></i> Back
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Map Selection -->
<div class="bg-gray-800 rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">MAP SELECTION</h2>
<div class="grid grid-cols-2 gap-4">
<div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
style="background-image: url('https://i.imgur.com/XdKXz7A.jpg')" onclick="selectMap('erangel')">
<span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Erangel</span>
</div>
<div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
style="background-image: url('https://i.imgur.com/5QzZfzJ.jpg')" onclick="selectMap('miramar')">
<span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Miramar</span>
</div>
<div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
style="background-image: url('https://i.imgur.com/8YvJ3RB.jpg')" onclick="selectMap('sanhok')">
<span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Sanhok</span>
</div>
<div class="map-selector h-32 rounded-lg cursor-pointer bg-gray-700 flex items-end p-2"
style="background-image: url('https://i.imgur.com/9pXqM9T.jpg')" onclick="selectMap('vikendi')">
<span class="bg-black bg-opacity-70 text-white px-2 py-1 rounded">Vikendi</span>
</div>
</div>
</div>
<!-- Game Mode -->
<div class="bg-gray-800 rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">GAME MODE</h2>
<div class="space-y-4">
<div class="flex items-center gap-3 p-3 hover:bg-gray-700 rounded-lg cursor-pointer" onclick="selectMode('solo')">
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
<i class="fas fa-user"></i>
</div>
<div>
<h3 class="font-bold">Solo</h3>
<p class="text-sm text-gray-400">Play alone against 99 players</p>
</div>
</div>
<div class="flex items-center gap-3 p-3 hover:bg-gray-700 rounded-lg cursor-pointer" onclick="selectMode('duo')">
<div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center">
<i class="fas fa-user-friends"></i>
</div>
<div>
<h3 class="font-bold">Duo</h3>
<p class="text-sm text-gray-400">Team up with 1 friend</p>
</div>
</div>
<div class="flex items-center gap-3 p-3 hover:bg-gray-700 rounded-lg cursor-pointer" onclick="selectMode('squad')">
<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
<i class="fas fa-users"></i>
</div>
<div>
<h3 class="font-bold">Squad</h3>
<p class="text-sm text-gray-400">Team up with 3 friends</p>
</div>
</div>
</div>
</div>
<!-- Advanced Settings -->
<div class="bg-gray-800 rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">ADVANCED SETTINGS</h2>
<div class="space-y-4">
<div>
<label class="block mb-2">Bot Difficulty</label>
<select class="w-full bg-gray-700 rounded p-2">
<option>Easy</option>
<option selected>Medium</option>
<option>Hard</option>
</select>
</div>
<div>
<label class="block mb-2">Starting Zone</label>
<select class="w-full bg-gray-700 rounded p-2">
<option selected>Random</option>
<option>Hot Drop</option>
<option>Safe Landing</option>
</select>
</div>
<div>
<label class="flex items-center gap-2">
<input type="checkbox" class="rounded" checked>
<span>Fog Weather</span>
</label>
</div>
<div>
<label class="flex items-center gap-2">
<input type="checkbox" class="rounded">
<span>Night Mode</span>
</label>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center">
<button onclick="startCustomGame()" class="bg-green-600 hover:bg-green-700 px-8 py-3 rounded-lg font-bold text-xl">
START GAME <i class="fas fa-play ml-2"></i>
</button>
</div>
</div>
</div>
<!-- Inventory Screen -->
<div id="inventory-screen" class="min-h-screen hidden p-8">
<div class="max-w-6xl mx-auto">
<div class="flex justify-between items-center mb-8">
<h1 class="text-4xl font-bold text-yellow-400">INVENTORY</h1>
<button onclick="hideInventory()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg">
<i class="fas fa-arrow-left"></i> Back
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Character Skins -->
<div class="bg-gray-800 rounded-lg p-6 col-span-1">
<h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">CHARACTERS</h2>
<div class="grid grid-cols-2 gap-4">
<div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-user text-4xl"></i>
</div>
<h3 class="font-bold">Default</h3>
<p class="text-xs text-gray-400">Equipped</p>
</div>
<div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
<div class="h-24 bg-blue-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-user-ninja text-4xl"></i>
</div>
<h3 class="font-bold">Shadow</h3>
<p class="text-xs text-gray-400">Locked</p>
</div>
<div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
<div class="h-24 bg-green-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-user-secret text-4xl"></i>
</div>
<h3 class="font-bold">Ghost</h3>
<p class="text-xs text-gray-400">Locked</p>
</div>
<div class="character bg-gray-700 rounded-lg p-3 cursor-pointer text-center">
<div class="h-24 bg-red-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-user-astronaut text-4xl"></i>
</div>
<h3 class="font-bold">Cyborg</h3>
<p class="text-xs text-gray-400">Locked</p>
</div>
</div>
</div>
<!-- Weapons -->
<div class="bg-gray-800 rounded-lg p-6 col-span-3">
<h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">WEAPONS</h2>
<div class="mb-6">
<h3 class="text-xl font-bold mb-3">Assault Rifles</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">M416</h3>
<p class="text-xs text-gray-400">5.56mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 3</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">AKM</h3>
<p class="text-xs text-gray-400">7.62mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 4</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">SCAR-L</h3>
<p class="text-xs text-gray-400">5.56mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">M16A4</h3>
<p class="text-xs text-gray-400">5.56mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 1</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-bold mb-3">Sniper Rifles</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">AWM</h3>
<p class="text-xs text-gray-400">.300 Magnum</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 5</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">M24</h3>
<p class="text-xs text-gray-400">7.62mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 4</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">Kar98k</h3>
<p class="text-xs text-gray-400">7.62mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 3</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">SKS</h3>
<p class="text-xs text-gray-400">7.62mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-3">SMGs & Shotguns</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">UMP9</h3>
<p class="text-xs text-gray-400">9mm</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">Vector</h3>
<p class="text-xs text-gray-400">.45 ACP</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 3</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">S12K</h3>
<p class="text-xs text-gray-400">12 Gauge</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 1</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
<div class="weapon-card bg-gray-700 rounded-lg p-3 cursor-pointer">
<div class="h-24 bg-gray-600 rounded mb-2 flex items-center justify-center">
<i class="fas fa-gun text-4xl"></i>
</div>
<h3 class="font-bold">S686</h3>
<p class="text-xs text-gray-400">12 Gauge</p>
<div class="mt-2 flex justify-between items-center">
<span class="text-yellow-400"><i class="fas fa-star"></i> 2</span>
<button class="bg-blue-600 text-xs px-2 py-1 rounded">Equip</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Game Screen -->
<div id="game-screen" class="w-full h-screen">
<!-- Damage Effect -->
<div class="damage-effect" id="damage-effect"></div>
<!-- Player HUD -->
<div class="absolute top-4 left-4 bg-black bg-opacity-50 p-3 rounded-lg z-10">
<div class="flex items-center gap-4">
<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center">
<i class="fas fa-user text-2xl"></i>
</div>
<div>
<h2 class="font-bold text-xl">Player1</h2>
<div class="flex items-center gap-2">
<i class="fas fa-heart text-red-500"></i>
<div class="w-32 h-2 bg-gray-700 rounded-full">
<div class="health-bar h-full rounded-full" id="health-bar" style="width: 100%"></div>
</div>
<span id="health-text">100</span>
</div>
<div class="flex items-center gap-2 mt-1">
<i class="fas fa-shield-alt text-blue-400"></i>
<div class="w-32 h-2 bg-gray-700 rounded-full">
<div class="h-full bg-blue-400 rounded-full" id="armor-bar" style="width: 50%"></div>
</div>
<span id="armor-text">50</span>
</div>
</div>
</div>
</div>
<!-- Weapons HUD -->
<div class="absolute bottom-4 left-4 bg-black bg-opacity-50 p-3 rounded-lg z-10">
<div class="flex gap-4">
<div class="weapon-slot bg-gray-800 p-2 rounded w-20 h-20 flex flex-col items-center justify-center border-2 border-yellow-500">
<i class="fas fa-gun text-2xl mb-1"></i>
<span class="text-xs">M416</span>
<div class="text-xs mt-1">30/120</div>
</div>
<div class="weapon-slot bg-gray-800 p-2 rounded w-20 h-20 flex flex-col items-center justify-center">
<i class="fas fa-gun text-2xl mb-1"></i>
<span class="text-xs">Kar98k</span>
<div class="text-xs mt-1">5/20</div>
</div>
<div class="weapon-slot bg-gray-800 p-2 rounded w-20 h-20 flex flex-col items-center justify-center">
<i class="fas fa-bomb text-2xl mb-1"></i>
<span class="text-xs">Frag</span>
<div class="text-xs mt-1">2</div>
</div>
</div>
</div>
<!-- Inventory Quick Access -->
<div class="absolute bottom-4 right-4 bg-black bg-opacity-50 p-2 rounded-lg z-10">
<div class="grid grid-cols-4 gap-2">
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
<div class="inventory-slot bg-gray-800 w-12 h-12 rounded flex items-center justify-center">
<i class="fas fa-plus text-gray-500"></i>
</div>
</div>
</div>
<!-- Mini Map -->
<div id="mini-map">
<div id="player-mini" style="top: 75px; left: 75px;"></div>
<div class="safe-zone" style="width: 120px; height: 120px; top: 15px; left: 15px;"></div>
</div>
<!-- Kill Feed -->
<div id="kill-feed">
<div class="kill-message">Player2 killed Player3 with AKM</div>
<div class="kill-message">Player4 killed Player5 with M416</div>
</div>
<!-- Player -->
<div id="player" style="top: 300px; left: 500px;"></div>
<!-- Controls -->
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 p-3 rounded-lg z-10">
<div class="flex gap-4">
<button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
<i class="fas fa-arrow-up"></i>
</button>
<div class="flex flex-col gap-2">
<button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
<i class="fas fa-arrow-left"></i>
</button>
<button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
<i class="fas fa-arrow-right"></i>
</button>
</div>
<button class="control-btn bg-gray-700 w-12 h-12 rounded-full flex items-center justify-center">
<i class="fas fa-arrow-down"></i>
</button>
<button class="control-btn bg-red-600 w-12 h-12 rounded-full flex items-center justify-center ml-4">
<i class="fas fa-fire"></i>
</button>
<button class="control-btn bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center">
<i class="fas fa-sync-alt"></i>
</button>
</div>
</div>
</div>
<!-- Game Over Screen -->
<div id="game-over-screen" class="min-h-screen hidden items-center justify-center bg-black bg-opacity-80 absolute inset-0 z-20">
<div class="text-center p-8 bg-gray-900 rounded-lg max-w-md">
<h1 class="text-5xl font-bold text-red-500 mb-4">GAME OVER</h1>
<p class="text-2xl mb-6">You placed <span class="text-yellow-400">#5</span> out of 100 players</p>
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="bg-gray-800 p-4 rounded">
<div class="text-3xl font-bold text-green-500">3</div>
<div class="text-gray-400">Kills</div>
</div>
<div class="bg-gray-800 p-4 rounded">
<div class="text-3xl font-bold text-blue-500">542</div>
<div class="text-gray-400">Damage</div>
</div>
<div class="bg-gray-800 p-4 rounded">
<div class="text-3xl font-bold text-purple-500">12:34</div>
<div class="text-gray-400">Time Survived</div>
</div>
<div class="bg-gray-800 p-4 rounded">
<div class="text-3xl font-bold text-yellow-500">1,250</div>
<div class="text-gray-400">XP Earned</div>
</div>
</div>
<div class="flex justify-center gap-4">
<button onclick="returnToMainMenu()" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-bold">
Main Menu
</button>
<button onclick="playAgain()" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-bold">
Play Again
</button>
</div>
</div>
</div>
<script>
// Game state
const gameState = {
player: {
x: 500,
y: 300,
health: 100,
armor: 50,
weapons: [
{ name: "M416", ammo: 30, maxAmmo: 120, type: "assault" },
{ name: "Kar98k", ammo: 5, maxAmmo: 20, type: "sniper" }
],
activeWeapon: 0,
grenades: 2
},
enemies: [],
bullets: [],
loot: [],
gameTime: 0,
safeZone: {
x: 0,
y: 0,
radius: 600
},
miniMapScale: 0.1,
gameActive: false
};
// Game elements
const mainMenu = document.getElementById('main-menu');
const customGameMenu = document.getElementById('custom-game-menu');
const inventoryScreen = document.getElementById('inventory-screen');
const gameScreen = document.getElementById('game-screen');
const gameOverScreen = document.getElementById('game-over-screen');
const playerElement = document.getElementById('player');
const healthBar = document.getElementById('health-bar');
const healthText = document.getElementById('health-text');
const armorBar = document.getElementById('armor-bar');
const armorText = document.getElementById('armor-text');
const damageEffect = document.getElementById('damage-effect');
const miniMap = document.getElementById('mini-map');
const playerMini = document.getElementById('player-mini');
// Navigation functions
function startGame() {
mainMenu.style.display = 'none';
gameScreen.style.display = 'block';
initGame();
}
function showCustomGameMenu() {
mainMenu.style.display = 'none';
customGameMenu.style.display = 'block';
}
function hideCustomGameMenu() {
customGameMenu.style.display = 'none';
mainMenu.style.display = 'flex';
}
function showInventory() {
mainMenu.style.display = 'none';
inventoryScreen.style.display = 'block';
}
function hideInventory() {
inventoryScreen.style.display = 'none';
mainMenu.style.display = 'flex';
}
function selectMap(map) {
console.log(`Selected map: ${map}`);
}
function selectMode(mode) {
console.log(`Selected mode: ${mode}`);
}
function startCustomGame() {
customGameMenu.style.display = 'none';
gameScreen.style.display = 'block';
initGame();
}
function returnToMainMenu() {
gameOverScreen.style.display = 'none';
mainMenu.style.display = 'flex';
stopGame();
}
function playAgain() {
gameOverScreen.style.display = 'none';
gameScreen.style.display = 'block';
initGame();
}
// Game functions
function initGame() {
gameState.gameActive = true;
gameState.player.health = 100;
gameState.player.armor = 50;
gameState.enemies = [];
gameState.bullets = [];
gameState.loot = [];
gameState.gameTime = 0;
// Create initial enemies
for (let i = 0; i < 10; i++) {
createEnemy();
}
// Create initial loot
for (let i = 0; i < 15; i++) {
createLoot();
}
// Start game loop
gameLoop();
}
function stopGame() {
gameState.gameActive = false;
// Remove all enemies and bullets from DOM
document.querySelectorAll('.enemy').forEach(e => e.remove());
document.querySelectorAll('.bullet').forEach(b => b.remove());
document.querySelectorAll('.loot-item').forEach(l => l.remove());
}
function gameLoop() {
if (!gameState.gameActive) return;
updatePlayer();
updateEnemies();
updateBullets();
checkCollisions();
updateGameTime();
updateMiniMap();
requestAnimationFrame(gameLoop);
}
function updatePlayer() {
// Update player position based on controls (simplified for this demo)
// In a real game, this would respond to keyboard/controller input
// Update HUD
healthBar.style.width = `${gameState.player.health}%`;
healthText.textContent = gameState.player.health;
armorBar.style.width = `${gameState.player.armor}%`;
armorText.textContent = gameState.player.armor;
// Position player element
playerElement.style.left = `${gameState.player.x}px`;
playerElement.style.top = `${gameState.player.y}px`;
}
function updateEnemies() {
// Move enemies randomly
gameState.enemies.forEach(enemy => {
// Simple random movement
enemy.x += (Math.random() - 0.5) * 2;
enemy.y += (Math.random() - 0.5) * 2;
// Keep within bounds
enemy.x = Math.max(0, Math.min(window.innerWidth - 40, enemy.x));
enemy.y = Math.max(0, Math.min(window.innerHeight - 40, enemy.y));
// Update DOM element
const enemyElement = document.getElementById(`enemy-${enemy.id}`);
if (enemyElement) {
enemyElement.style.left = `${enemy.x}px`;
enemyElement.style.top = `${enemy.y}px`;
}
// Occasionally shoot at player
if (Math.random() < 0.01) {
shoot(enemy.x + 20, enemy.y + 20, gameState.player.x + 25, gameState.player.y + 25, false);
}
});
}
function updateBullets() {
// Move bullets
gameState.bullets.forEach(bullet => {
bullet.x += bullet.vx;
bullet.y += bullet.vy;
// Remove if out of bounds
if (bullet.x < 0 || bullet.x > window.innerWidth ||
bullet.y < 0 || bullet.y > window.innerHeight) {
removeBullet(bullet.id);
}
// Update DOM element
const bulletElement = document.getElementById(`bullet-${bullet.id}`);
if (bulletElement) {
bulletElement.style.left = `${bullet.x}px`;
bulletElement.style.top = `${bullet.y}px`;
}
});
}
function checkCollisions() {
// Check bullet collisions with enemies and player
gameState.bullets.forEach(bullet => {
// Check if bullet hits player
if (bullet.fromPlayer === false &&
bullet.x > gameState.player.x && bullet.x < gameState.player.x + 50 &&
bullet.y > gameState.player.y && bullet.y < gameState.player.y + 50) {
// Player hit
takeDamage(10);
removeBullet(bullet.id);
}
// Check if bullet hits enemy
if (bullet.fromPlayer === true) {
gameState.enemies.forEach(enemy => {
if (bullet.x > enemy.x && bullet.x < enemy.x + 40 &&
bullet.y > enemy.y && bullet.y < enemy.y + 40) {
// Enemy hit
enemy.health -= 25;
if (enemy.health <= 0) {
removeEnemy(enemy.id);
}
removeBullet(bullet.id);
}
});
}
});
// Check player collision with loot
gameState.loot.forEach(loot => {
if (gameState.player.x + 25 > loot.x && gameState.player.x + 25 < loot.x + 30 &&
gameState.player.y + 25 > loot.y && gameState.player.y + 25 < loot.y + 30) {
// Collect loot
collectLoot(loot);
}
});
}
function updateGameTime() {
gameState.gameTime += 0.016; // Approximate time per frame at 60fps
// Shrink safe zone over time
if (gameState.gameTime % 30 < 0.016) { // Every ~30 seconds
gameState.safeZone.radius = Math.max(200, gameState.safeZone.radius - 50);
// Update safe zone visual
const safeZoneElement = document.querySelector('.safe-zone');
if (safeZoneElement) {
safeZoneElement.style.width = `${gameState.safeZone.radius * gameState.miniMapScale * 2}px`;
safeZoneElement.style.height = `${gameState.safeZone.radius * gameState.miniMapScale * 2}px`;
}
}
// Check if player is outside safe zone
const distanceToCenter = Math.sqrt(
Math.pow(gameState.player.x + 25 - window.innerWidth/2, 2) +
Math.pow(gameState.player.y + 25 - window.innerHeight/2, 2)
);
if (distanceToCenter > gameState.safeZone.radius) {
// Take zone damage
takeDamage(1);
}
// Randomly spawn new enemies
if (Math.random() < 0.01 && gameState.enemies.length < 15) {
createEnemy();
}
// Randomly spawn new loot
if (Math.random() < 0.005 && gameState.loot.length < 20) {
createLoot();
}
}
function updateMiniMap() {
// Update player position on mini map
const miniX = (gameState.player.x * gameState.miniMapScale) + 75 - 2.5;
const miniY = (gameState.player.y * gameState.miniMapScale) + 75 - 2.5;
playerMini.style.left = `${miniX}px`;
playerMini.style.top = `${miniY}px`;
// Update enemies on mini map
document.querySelectorAll('.enemy-mini').forEach(e => e.remove());
gameState.enemies.forEach(enemy => {
const enemyMini = document.createElement('div');
enemyMini.className = 'enemy-mini';
enemyMini.style.left = `${(enemy.x * gameState.miniMapScale) + 75 - 2}px`;
enemyMini.style.top = `${(enemy.y * gameState.miniMapScale) + 75 - 2}px`;
miniMap.appendChild(enemyMini);
});
}
function createEnemy() {
const id = Date.now() + Math.random();
const x = Math.random() * (window.innerWidth - 40);
const y = Math.random() * (window.innerHeight - 40);
gameState.enemies.push({
id,
x,
y,
health: 100
});
const enemyElement = document.createElement('div');
enemyElement.className = 'enemy';
enemyElement.id = `enemy-${id}`;
enemyElement.style.left = `${x}px`;
enemyElement.style.top = `${y}px`;
gameScreen.appendChild(enemyElement);
}
function removeEnemy(id) {
// Remove from array
gameState.enemies = gameState.enemies.filter(e => e.id !== id);
// Remove from DOM
const enemyElement = document.getElementById(`enemy-${id}`);
if (enemyElement) {
enemyElement.remove();
}
// Check win condition
if (gameState.enemies.length === 0) {
endGame(true);
}
}
function createLoot() {
const types = ['ammo', 'health', 'armor', 'weapon'];
const type = types[Math.floor(Math.random() * types.length)];
const loot = {
id: Date.now() + Math.random(),
x: Math.random() * (window.innerWidth - 30),
y: Math.random() * (window.innerHeight - 30),
type
};
gameState.loot.push(loot);
const lootElement = document.createElement('div');
lootElement.className = 'loot-item';
lootElement.id = `loot-${loot.id}`;
// Set different icons for different loot types
switch(type) {
case 'ammo':
lootElement.innerHTML = '<i class="fas fa-bullseye text-yellow-500 text-xl"></i>';
break;
case 'health':
lootElement.innerHTML = '<i class="fas fa-heart text-red-500 text-xl"></i>';
break;
case 'armor':
lootElement.innerHTML = '<i class="fas fa-shield-alt text-blue-400 text-xl"></i>';
break;
case 'weapon':
lootElement.innerHTML = '<i class="fas fa-gun text-gray-300 text-xl"></i>';
break;
}
lootElement.style.left = `${loot.x}px`;
lootElement.style.top = `${loot.y}px`;
gameScreen.appendChild(lootElement);
}
function collectLoot(loot) {
// Apply loot effect
switch(loot.type) {
case 'ammo':
gameState.player.weapons[gameState.player.activeWeapon].ammo =
gameState.player.weapons[gameState.player.activeWeapon].maxAmmo;
break;
case 'health':
gameState.player.health = Math.min(100, gameState.player.health + 25);
break;
case 'armor':
gameState.player.armor = Math.min(100, gameState.player.armor + 25);
break;
case 'weapon':
// In a real game, this would add a new weapon
break;
}
// Remove from array
gameState.loot = gameState.loot.filter(l => l.id !== loot.id);
// Remove from DOM
const lootElement = document.getElementById(`loot-${loot.id}`);
if (lootElement) {
lootElement.remove();
}
}
function shoot(fromX, fromY, toX, toY, fromPlayer) {
const id = Date.now() + Math.random();
// Calculate direction
const dx = toX - fromX;
const dy = toY - fromY;
const distance = Math.sqrt(dx * dx + dy * dy);
const speed = 10;
const bullet = {
id,
x: fromX,
y: fromY,
vx: (dx / distance) * speed,
vy: (dy / distance) * speed,
fromPlayer
};
gameState.bullets.push(bullet);
// Create bullet element
const bulletElement = document.createElement('div');
bulletElement.className = 'bullet';
bulletElement.id = `bullet-${id}`;
bulletElement.style.left = `${fromX}px`;
bulletElement.style.top = `${fromY}px`;
gameScreen.appendChild(bulletElement);
}
function removeBullet(id) {
// Remove from array
gameState.bullets = gameState.bullets.filter(b => b.id !== id);
// Remove from DOM
const bulletElement = document.getElementById(`bullet-${id}`);
if (bulletElement) {
bulletElement.remove();
}
}
function takeDamage(amount) {
// Apply damage to armor first
if (gameState.player.armor > 0) {
const armorDamage = Math.min(amount, gameState.player.armor);
gameState.player.armor -= armorDamage;
amount -= armorDamage;
}
// Apply remaining damage to health
gameState.player.health = Math.max(0, gameState.player.health - amount);
// Show damage effect
damageEffect.style.opacity = '1';
setTimeout(() => {
damageEffect.style.opacity = '0';
}, 200);
// Check if player died
if (gameState.player.health <= 0) {
endGame(false);
}
}
function endGame(win) {
gameState.gameActive = false;
// Show game over screen
gameScreen.style.display = 'none';
gameOverScreen.style.display = 'flex';
// Update game over message
const gameOverTitle = document.querySelector('#game-over-screen h1');
const gameOverMessage = document.querySelector('#game-over-screen p span');
if (win) {
gameOverTitle.textContent = 'VICTORY!';
gameOverTitle.className = 'text-5xl font-bold text-green-500 mb-4';
gameOverMessage.textContent = '#1';
} else {
gameOverTitle.textContent = 'GAME OVER';
gameOverTitle.className = 'text-5xl font-bold text-red-500 mb-4';
gameOverMessage.textContent = `#${Math.floor(Math.random() * 10) + 1}`;
}
}
// Event listeners for controls (simplified for this demo)
document.addEventListener('keydown', (e) => {
if (!gameState.gameActive) return;
const speed = 5;
switch(e.key) {
case 'ArrowUp':
case 'w':
gameState.player.y = Math.max(0, gameState.player.y - speed);
break;
case 'ArrowDown':
case 's':
gameState.player.y = Math.min(window.innerHeight - 50, gameState.player.y + speed);
break;
case 'ArrowLeft':
case 'a':
gameState.player.x = Math.max(0, gameState.player.x - speed);
break;
case 'ArrowRight':
case 'd':
gameState.player.x = Math.min(window.innerWidth - 50, gameState.player.x + speed);
break;
case ' ':
// Shoot in direction of mouse
const rect = gameScreen.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
shoot(
gameState.player.x + 25,
gameState.player.y + 25,
mouseX,
mouseY,
true
);
break;
}
});
// Mouse click to shoot
gameScreen.addEventListener('click', (e) => {
if (!gameState.gameActive) return;
const rect = gameScreen.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
shoot(
gameState.player.x + 25,
gameState.player.y + 25,
mouseX,
mouseY,
true
);
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=D110/b" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>