Design a game interface with HUD elements, health bars, and interactive components.
This project will guide you through creating a modern game UI interface using CSS. You'll learn to design health bars, score displays, and interactive game elements.
Intermediate: 2-3 hours | Advanced: 1-2 hours
Difficulty Level: Intermediate
<div class="game-ui">
<div class="hud-top">
<div class="health-bar">
<div class="health-fill" style="width: 75%;"></div>
<span class="health-text">75/100</span>
</div>
<div class="mana-bar">
<div class="mana-fill" style="width: 50%;"></div>
<span class="mana-text">50/100</span>
</div>
<div class="score">Score: 1250</div>
<div class="timer">Time: 02:45</div>
</div>
<div class="hud-bottom">
<div class="inventory">
<div class="inventory-slot">Item 1</div>
<div class="inventory-slot">Item 2</div>
</div>
<div class="skill-bar">
<button class="skill-btn">Q</button>
<button class="skill-btn">W</button>
<button class="skill-btn">E</button>
</div>
</div>
<div class="game-menu" style="display: none;">
<h3>Paused</h3>
<button>Resume</button>
<button>Settings</button>
<button>Quit</button>
</div>
</div>
.game-ui {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
}
.hud-top {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: auto;
}
.health-bar, .mana-bar {
width: 200px;
height: 20px;
background: rgba(0,0,0,0.7);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.health-fill {
height: 100%;
background: linear-gradient(90deg, #ff4757, #ff3742);
border-radius: 10px;
transition: width 0.3s ease;
}
.mana-fill {
height: 100%;
background: linear-gradient(90deg, #3742fa, #2f3542);
border-radius: 10px;
transition: width 0.3s ease;
}
.health-text, .mana-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
font-size: 12px;
}
.score, .timer {
color: white;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.hud-bottom {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: auto;
}
.inventory {
display: flex;
gap: 10px;
}
.inventory-slot {
width: 50px;
height: 50px;
background: rgba(0,0,0,0.7);
border: 2px solid #ffa502;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
.skill-bar {
display: flex;
gap: 10px;
}
.skill-btn {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
border-radius: 8px;
color: white;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s;
}
.skill-btn:hover {
transform: scale(1.1);
}
.game-menu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.9);
padding: 2rem;
border-radius: 12px;
text-align: center;
pointer-events: auto;
}
.game-menu h3 {
color: white;
margin-bottom: 1rem;
}
.game-menu button {
display: block;
width: 100%;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.game-menu button:hover {
background: #764ba2;
}
@media (max-width: 768px) {
.hud-top {
flex-direction: column;
gap: 10px;
}
.health-bar, .mana-bar {
width: 150px;
}
.hud-bottom {
flex-direction: column;
gap: 20px;
}
}
function updateHealth(current, max) {
const healthFill = document.querySelector('.health-fill');
const healthText = document.querySelector('.health-text');
const percentage = (current / max) * 100;
healthFill.style.width = percentage + '%';
healthText.textContent = current + '/' + max;
}
// Example usage
updateHealth(75, 100);