nico/Wackelpeter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Krake boss with ink, pull marks and sweep tentacles plus boss mode

Browse Source
This commit is contained in:
nico
2026-08-19 13:59:39 +02:00
parent 1a4cccda6e
commit 496c4af50e
12 changed files with 911 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+37
View File
@@ -37,6 +37,34 @@
0%, 100% { opacity: 0.25; }
50% { opacity: 0.6; }
}
#ink-vignette {
position: absolute; inset: 0; opacity: 0; pointer-events: none;
background: radial-gradient(ellipse at center,
rgba(120,40,180,0) 35%, rgba(120,40,180,0.4) 100%);
box-shadow: inset 0 0 140px 50px rgba(100,30,160,0.55);
}
#ink-vignette.ink { animation: ink-flash 0.5s ease-out; }
@keyframes ink-flash {
0% { opacity: 1; }
100% { opacity: 0; }
}
#boss-bar {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
width: 420px; display: none; text-align: center; font-family: monospace;
}
#boss-bar-label {
color: #ffcc00; font-size: 16px; text-shadow: 1px 1px 3px #000;
margin-bottom: 4px;
}
#boss-bar-bg {
height: 18px; background: rgba(0,0,0,0.6);
border: 2px solid #aa3366;
}
#boss-bar-fill {
height: 100%; width: 100%;
background: linear-gradient(#ff5577, #bb2244);
transition: width 0.15s linear;
}
#health-bar-bg {
position: absolute; top: 16px; left: 16px; width: 250px; height: 20px;
background: rgba(0,0,0,0.6); border: 2px solid #555;
@@ -235,6 +263,11 @@
<div id="ui-overlay">
<div id="damage-vignette"></div>
<div id="low-hp-vignette"></div>
<div id="ink-vignette"></div>
<div id="boss-bar">
<div id="boss-bar-label">BOSS</div>
<div id="boss-bar-bg"><div id="boss-bar-fill"></div></div>
</div>
<div id="health-bar-bg"></div>
<div id="health-bar"></div>
<div id="health-text">100</div>
@@ -334,6 +367,10 @@
Q, E, 1–4: Skills (werden nach Erwerb belegt)
</div>
<input id="seed-input" type="text" placeholder="Seed (leer = zufällig)" />
<div id="boss-mode" style="opacity:0; pointer-events:none; visibility:hidden; display:flex; flex-direction:column; align-items:center; gap:10px;">
<div class="subtitle">BOSS-MODUS</div>
<div id="boss-mode-buttons" style="display:flex; flex-direction:column; gap:8px; align-items:center;"></div>
</div>
<button id="btn-start" class="menu-button">Start</button>
</div>