Add aura, boomerang, trap and gas cloud skills with hotbar and ESC pause

This commit is contained in:
2026-08-19 09:46:22 +02:00
parent fd57ca9740
commit 64d473de6d
10 changed files with 843 additions and 15 deletions
+35 -7
View File
@@ -76,6 +76,8 @@
#sword-cooldown { bottom: 48px; }
#teleport-cooldown { bottom: 24px; }
#lightning-cooldown { bottom: 96px; }
#trap-cooldown { bottom: 120px; }
#gas-cooldown { bottom: 144px; }
#wave-bar-container {
position: absolute; top: 16px; right: 16px; width: 250px; height: 16px;
}
@@ -99,7 +101,8 @@
#game-over-panel {
position: absolute; top: 62%; left: 50%; transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 12px;
pointer-events: none; opacity: 0; transition: opacity 0.8s ease-in 1.5s;
pointer-events: none; opacity: 0; visibility: hidden;
transition: opacity 0.8s ease-in 1.5s;
font-family: monospace;
}
#game-over-stats {
@@ -180,7 +183,16 @@
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 24px; background: rgba(0,0,0,0.7); opacity: 0; pointer-events: none;
transition: opacity 0.3s ease; font-family: monospace;
visibility: hidden; transition: opacity 0.3s ease; font-family: monospace;
}
#pause-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 18px; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none;
visibility: hidden; transition: opacity 0.2s ease; font-family: monospace;
}
#pause-overlay h2 {
color: #fff; font-size: 48px; text-shadow: 3px 3px 6px #000;
}
#level-up h2 {
color: #ffcc00; font-size: 44px; text-shadow: 3px 3px 6px #000;
@@ -259,6 +271,16 @@
<div class="cooldown-fill"></div>
<div class="cooldown-label">Chain Lightning</div>
</div>
<div id="trap-cooldown" class="cooldown-container" style="display: none">
<div class="cooldown-bg"></div>
<div class="cooldown-fill"></div>
<div class="cooldown-label">Falle</div>
</div>
<div id="gas-cooldown" class="cooldown-container" style="display: none">
<div class="cooldown-bg"></div>
<div class="cooldown-fill"></div>
<div class="cooldown-label">Gaswolke</div>
</div>
<div id="wave-bar-container">
<div id="wave-bar-bg"></div>
@@ -274,8 +296,7 @@
</div>
<div id="level-up">
<h2>Level Up!</h2>
<div id="offer-row">
<h2>Level Up!</h2> <div id="offer-row">
<div id="offer-0" class="offer-card">
<div id="offer-icon-0" class="offer-icon"></div>
<div id="offer-title-0" class="offer-title"></div>
@@ -298,19 +319,26 @@
<button id="btn-confirm" class="menu-button" disabled>Bestätigen (Enter)</button>
</div>
<div id="pause-overlay">
<h2>Pausiert</h2>
<button id="btn-resume" class="menu-button">Weiter (ESC)</button>
<button id="btn-pause-menu" class="menu-button">Hauptmenü</button>
</div>
<div id="main-menu">
<h1>WACKELPETER</h1>
<div class="subtitle">Ein Blob kämpft ums Überleben</div>
<div class="menu-controls">
WASD: Bewegen · Space: Springen · Maus: Zielen<br>
Linksklick: Schwert · Rechtsklick: Feuerball (per Skill) · Q: Kettenblitz (per Skill) · E: Teleport (per Skill)
WASD: Bewegen · Space: Springen · Maus: Zielen · ESC: Pause<br>
Linksklick: Schwert · Rechtsklick: Feuerball (per Skill)<br>
Q, E, 14: Skills (werden nach Erwerb belegt)
</div>
<input id="seed-input" type="text" placeholder="Seed (leer = zufällig)" />
<button id="btn-start" class="menu-button">Start</button>
</div>
<div id="instructions">
WASD: Move · Space: Jump · Mouse: Aim · Left Click: Sword · Right Click: Fireball · Q: Lightning · E: Teleport
WASD: Move · Space: Jump · Mouse: Aim · Left Click: Sword · Right Click: Fireball · Q/E/1-4: Skills · ESC: Pause
</div>
</div>
<script type="module" src="/src/main.ts"></script>