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

Add main menu, ghost enemy, and sword slash trail

Browse Source
This commit is contained in:
nico
2026-08-17 13:03:19 +02:00
parent 0b19c3d26b
commit 4751d428a7
8 changed files with 796 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+48
View File
@@ -70,6 +70,38 @@
text-shadow: 4px 4px 8px #000;
transition: opacity 2s ease-in;
}
#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;
font-family: monospace;
}
#game-over-stats {
color: #ffcc00; font-size: 20px; text-shadow: 2px 2px 4px #000;
}
.menu-button {
pointer-events: auto; cursor: pointer;
background: rgba(0,0,0,0.7); color: #fff; font-family: monospace;
font-size: 18px; padding: 10px 28px; border: 2px solid #888;
}
.menu-button:hover { background: #333; border-color: #ffcc00; color: #ffcc00; }
#main-menu {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 18px; pointer-events: auto; background: rgba(0,0,0,0.55);
transition: opacity 0.6s ease; font-family: monospace;
}
#main-menu h1 {
color: #fff; font-size: 72px; text-shadow: 4px 4px 8px #000;
}
#main-menu .subtitle {
color: #ffcc00; font-size: 20px; text-shadow: 2px 2px 4px #000;
}
#main-menu .menu-controls {
color: rgba(255,255,255,0.8); font-size: 13px; text-align: center;
line-height: 1.7;
}
#btn-start { font-size: 24px; padding: 14px 48px; }
#instructions {
position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.5); font-size: 11px; font-family: monospace;
@@ -108,6 +140,22 @@
</div>
<div id="game-over">Verloren!</div>
<div id="game-over-panel">
<div id="game-over-stats"></div>
<button id="btn-restart" class="menu-button">Nochmal spielen</button>
<button id="btn-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: Feuerball · Rechtsklick: Schwert · M3: Hände tauschen · E: Teleport
</div>
<button id="btn-start" class="menu-button">Start</button>
</div>
<div id="instructions">
WASD: Move · Space: Jump · Mouse: Aim · Left Click: Fireball · Right Click: Sword · M3: Swap hands · E: Teleport
</div>