|
|
<!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"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="game-screen" class="w-full h-screen"> |
|
|
|
|
|
<div class="damage-effect" id="damage-effect"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="player" style="top: 300px; left: 500px;"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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 |
|
|
}; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
gameState.gameActive = true; |
|
|
gameState.player.health = 100; |
|
|
gameState.player.armor = 50; |
|
|
gameState.enemies = []; |
|
|
gameState.bullets = []; |
|
|
gameState.loot = []; |
|
|
gameState.gameTime = 0; |
|
|
|
|
|
|
|
|
for (let i = 0; i < 10; i++) { |
|
|
createEnemy(); |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 0; i < 15; i++) { |
|
|
createLoot(); |
|
|
} |
|
|
|
|
|
|
|
|
gameLoop(); |
|
|
} |
|
|
|
|
|
function stopGame() { |
|
|
gameState.gameActive = false; |
|
|
|
|
|
|
|
|
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() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
healthBar.style.width = `${gameState.player.health}%`; |
|
|
healthText.textContent = gameState.player.health; |
|
|
armorBar.style.width = `${gameState.player.armor}%`; |
|
|
armorText.textContent = gameState.player.armor; |
|
|
|
|
|
|
|
|
playerElement.style.left = `${gameState.player.x}px`; |
|
|
playerElement.style.top = `${gameState.player.y}px`; |
|
|
} |
|
|
|
|
|
function updateEnemies() { |
|
|
|
|
|
gameState.enemies.forEach(enemy => { |
|
|
|
|
|
enemy.x += (Math.random() - 0.5) * 2; |
|
|
enemy.y += (Math.random() - 0.5) * 2; |
|
|
|
|
|
|
|
|
enemy.x = Math.max(0, Math.min(window.innerWidth - 40, enemy.x)); |
|
|
enemy.y = Math.max(0, Math.min(window.innerHeight - 40, enemy.y)); |
|
|
|
|
|
|
|
|
const enemyElement = document.getElementById(`enemy-${enemy.id}`); |
|
|
if (enemyElement) { |
|
|
enemyElement.style.left = `${enemy.x}px`; |
|
|
enemyElement.style.top = `${enemy.y}px`; |
|
|
} |
|
|
|
|
|
|
|
|
if (Math.random() < 0.01) { |
|
|
shoot(enemy.x + 20, enemy.y + 20, gameState.player.x + 25, gameState.player.y + 25, false); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateBullets() { |
|
|
|
|
|
gameState.bullets.forEach(bullet => { |
|
|
bullet.x += bullet.vx; |
|
|
bullet.y += bullet.vy; |
|
|
|
|
|
|
|
|
if (bullet.x < 0 || bullet.x > window.innerWidth || |
|
|
bullet.y < 0 || bullet.y > window.innerHeight) { |
|
|
removeBullet(bullet.id); |
|
|
} |
|
|
|
|
|
|
|
|
const bulletElement = document.getElementById(`bullet-${bullet.id}`); |
|
|
if (bulletElement) { |
|
|
bulletElement.style.left = `${bullet.x}px`; |
|
|
bulletElement.style.top = `${bullet.y}px`; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function checkCollisions() { |
|
|
|
|
|
gameState.bullets.forEach(bullet => { |
|
|
|
|
|
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) { |
|
|
|
|
|
|
|
|
takeDamage(10); |
|
|
removeBullet(bullet.id); |
|
|
} |
|
|
|
|
|
|
|
|
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.health -= 25; |
|
|
if (enemy.health <= 0) { |
|
|
removeEnemy(enemy.id); |
|
|
} |
|
|
removeBullet(bullet.id); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
|
|
|
collectLoot(loot); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateGameTime() { |
|
|
gameState.gameTime += 0.016; |
|
|
|
|
|
|
|
|
if (gameState.gameTime % 30 < 0.016) { |
|
|
gameState.safeZone.radius = Math.max(200, gameState.safeZone.radius - 50); |
|
|
|
|
|
|
|
|
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`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
takeDamage(1); |
|
|
} |
|
|
|
|
|
|
|
|
if (Math.random() < 0.01 && gameState.enemies.length < 15) { |
|
|
createEnemy(); |
|
|
} |
|
|
|
|
|
|
|
|
if (Math.random() < 0.005 && gameState.loot.length < 20) { |
|
|
createLoot(); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateMiniMap() { |
|
|
|
|
|
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`; |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
gameState.enemies = gameState.enemies.filter(e => e.id !== id); |
|
|
|
|
|
|
|
|
const enemyElement = document.getElementById(`enemy-${id}`); |
|
|
if (enemyElement) { |
|
|
enemyElement.remove(); |
|
|
} |
|
|
|
|
|
|
|
|
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}`; |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
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': |
|
|
|
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
gameState.loot = gameState.loot.filter(l => l.id !== loot.id); |
|
|
|
|
|
|
|
|
const lootElement = document.getElementById(`loot-${loot.id}`); |
|
|
if (lootElement) { |
|
|
lootElement.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
function shoot(fromX, fromY, toX, toY, fromPlayer) { |
|
|
const id = Date.now() + Math.random(); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
gameState.bullets = gameState.bullets.filter(b => b.id !== id); |
|
|
|
|
|
|
|
|
const bulletElement = document.getElementById(`bullet-${id}`); |
|
|
if (bulletElement) { |
|
|
bulletElement.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
function takeDamage(amount) { |
|
|
|
|
|
if (gameState.player.armor > 0) { |
|
|
const armorDamage = Math.min(amount, gameState.player.armor); |
|
|
gameState.player.armor -= armorDamage; |
|
|
amount -= armorDamage; |
|
|
} |
|
|
|
|
|
|
|
|
gameState.player.health = Math.max(0, gameState.player.health - amount); |
|
|
|
|
|
|
|
|
damageEffect.style.opacity = '1'; |
|
|
setTimeout(() => { |
|
|
damageEffect.style.opacity = '0'; |
|
|
}, 200); |
|
|
|
|
|
|
|
|
if (gameState.player.health <= 0) { |
|
|
endGame(false); |
|
|
} |
|
|
} |
|
|
|
|
|
function endGame(win) { |
|
|
gameState.gameActive = false; |
|
|
|
|
|
|
|
|
gameScreen.style.display = 'none'; |
|
|
gameOverScreen.style.display = 'flex'; |
|
|
|
|
|
|
|
|
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}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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 ' ': |
|
|
|
|
|
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; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
