Yandrik/topdown-shooter-vibecodegame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: better health display and stronger shotgun

Browse Source
This commit is contained in:
Yandrik
2025-07-12 15:28:46 +02:00
parent 183d074267
commit 20ca2b3b6f
1 changed files with 137 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
index.html
View File

@ -31,41 +31,107 @@
.ui {
position: fixed;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
color: white;
font-size: 18px;
font-size: 16px;
z-index: 10;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
font-family: 'Courier New', monospace;
}
.weapon-info {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
padding: 15px 20px;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
background: rgba(64, 64, 64, 0.95);
padding: 12px 16px;
border-radius: 8px;
border: 3px solid #FFB000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
min-width: 280px;
}
.weapon-info div {
margin: 5px 0;
margin: 4px 0;
font-weight: bold;
}
.weapon-info span {
color: #00ff88;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
.weapon-name {
color: #FFB000;
text-align: center;
font-size: 18px;
margin-bottom: 12px !important;
text-shadow: 0 0 10px rgba(255, 176, 0, 0.5);
}
.stat-container {
position: relative;
margin: 0;
}
.stat-label {
color: black;
font-size: 14px;
font-weight: bold;
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
text-shadow: none;
}
.health-bar {
width: 100%;
height: 24px;
background: #330000;
border: 2px solid #000;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.health-fill {
height: 100%;
background: linear-gradient(to bottom, #ff4444, #cc0000);
transition: width 0.3s ease;
border-radius: 2px;
}
.ammo-bar {
width: 100%;
height: 24px;
background: #000033;
border: 2px solid #000;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.ammo-fill {
height: 100%;
background: linear-gradient(to bottom, #4488ff, #2266cc);
transition: width 0.3s ease;
border-radius: 2px;
}
.ammo-infinite {
color: #4488ff;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 24px;
text-shadow: 0 0 10px rgba(68, 136, 255, 0.8);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
#score {
color: #ffaa00 !important;
text-shadow: 0 0 10px rgba(255, 170, 0, 0.5) !important;
}
#health {
color: #ff4444 !important;
text-shadow: 0 0 10px rgba(255, 68, 68, 0.5) !important;
color: #FFB000;
text-align: center;
font-size: 16px;
text-shadow: 0 0 10px rgba(255, 176, 0, 0.5);
}
.game-over-screen {
@ -158,10 +224,24 @@
<canvas id="gameCanvas"></canvas>
<div class="ui">
<div class="weapon-info">
<div>Weapon: <span id="weaponName">Pistol</span></div>
<div>Ammo: <span id="ammoCount">∞</span></div>
<div>Health: <span id="health">100</span></div>
<div>Score: <span id="score">0</span></div>
<div class="weapon-name" id="weaponName">Pistol</div>
<div class="stat-container">
<div class="health-bar">
<div class="stat-label" id="healthText">HP: 100</div>
<div class="health-fill" id="healthFill"></div>
</div>
</div>
<div class="stat-container">
<div class="ammo-bar" id="ammoBar">
<div class="stat-label" id="ammoText">Ammo: ∞</div>
<div class="ammo-fill" id="ammoFill"></div>
<div class="ammo-infinite" id="ammoInfinite">∞</div>
</div>
</div>
<div id="score">Score: 0</div>
</div>
</div>
@ -272,7 +352,7 @@
damage: 40,
fireRate: 800,
spread: 0.5,
bulletsPerShot: 5,
bulletsPerShot: 20,
range: 200,
autoFire: false,
burstCount: 1,
@ -1063,11 +1143,39 @@
}
function updateUI() {
// Update weapon name
document.getElementById('weaponName').textContent = game.player.weapon.name;
document.getElementById('ammoCount').textContent =
game.player.weapon.ammo === Infinity ? '∞' : game.player.weapon.ammo;
document.getElementById('health').textContent = game.player.health;
document.getElementById('score').textContent = game.score;
// Update health bar
const healthPercent = (game.player.health / game.player.maxHealth) * 100;
document.getElementById('healthText').textContent = `HP: ${game.player.health}`;
document.getElementById('healthFill').style.width = `${healthPercent}%`;
// Update ammo bar
const ammoBar = document.getElementById('ammoBar');
const ammoFill = document.getElementById('ammoFill');
const ammoText = document.getElementById('ammoText');
const ammoInfinite = document.getElementById('ammoInfinite');
if (game.player.weapon.ammo === Infinity) {
// Show infinite symbol for pistol
ammoFill.style.width = '0%';
ammoText.style.display = 'none';
ammoInfinite.style.display = 'block';
} else {
// Show ammo bar for other weapons
const maxAmmo = weaponTypes[Object.keys(weaponTypes).find(key =>
weaponTypes[key].name === game.player.weapon.name)].ammo;
const ammoPercent = (game.player.weapon.ammo / maxAmmo) * 100;
ammoFill.style.width = `${ammoPercent}%`;
ammoText.style.display = 'block';
ammoText.textContent = `Ammo: ${game.player.weapon.ammo}`;
ammoInfinite.style.display = 'none';
}
// Update score
document.getElementById('score').textContent = `Score: ${game.score}`;
}
function showGameOver() {