131 lines
5.6 KiB
HTML
131 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>Stein der Erinnerung – Die Sisyphus-Saga der Zystinurie</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- TITLE -->
|
||
<div id="screen-title" class="screen screen--title">
|
||
<div id="title-glow" class="title-glow"></div>
|
||
<div class="title-icon">🪨</div>
|
||
<h1 class="title-heading">Stein der Erinnerung</h1>
|
||
<p class="title-sub">Die Sisyphus-Saga der Zystinurie</p>
|
||
<button id="btn-start" class="btn">Spiel starten</button>
|
||
<div class="title-instructions">
|
||
Finde den Zystinstein. Rolle ihn zum Gipfel.<br>
|
||
Halte die Kristallkeime unter Kontrolle.<br>
|
||
Werde zum Zystinstein-Guru.
|
||
</div>
|
||
<div class="title-controls">
|
||
WASD / Pfeiltasten = Bewegen • Shift = Sprint • Leertaste = Aktion • 1-2-3 = Medikament<br>
|
||
Mobil: Swipe = Bewegen • Tap = Aktion • ⚡-Button = Aktion
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GAME -->
|
||
<div id="screen-game" class="game-wrap" style="display:none">
|
||
<div id="tut-ov" class="tut-ov" style="display:none">
|
||
<div class="tut-bx">
|
||
<h2 id="tut-h">Level 1</h2>
|
||
<p><b>Phase 1 – Suche:</b> Finde den Zystinstein unter <span id="tut-sc">5</span> Steinen. Rolle Steine zum Labor und lasse sie scannen. Achte auf leuchtende Hinweise!</p>
|
||
<p><b>Phase 2 – Transport:</b> Rolle den Zystinstein zum Gipfel. Kristallkeime sprießen auf den Wegen – bekämpfe sie mit Medikamenten ([Leertaste] = Sprühen). Fülle Vorräte in der Apotheke auf (2 von 3 pro Besuch).</p>
|
||
<p><b>Steuerung:</b> WASD / Pfeiltasten = Bewegen. <b>Shift</b> = Sprint (ohne Stein). Leertaste = Aktion. Tasten 1-2-3 = Medikament wählen.</p>
|
||
<p><b>Tipp:</b> Minimap oben rechts zeigt Wege, Gebäude und Keime. Der Stein-Timer pausiert, solange du in der Apotheke bist!</p>
|
||
<div class="tut-hint">Klicke irgendwo, um zu starten</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hud-top">
|
||
<div class="hud-l">
|
||
<span id="hud-lv" class="hud-lv">Lvl 1</span>
|
||
<span id="hud-sc" class="hud-sc">⭐ 0</span>
|
||
<span id="hud-ph" class="hud-ph">🔍 0/5</span>
|
||
</div>
|
||
<div class="hud-r">
|
||
<div id="kid-w" class="kid-w" style="display:none">
|
||
<span class="kid-i">🫘</span>
|
||
<div class="bar-t"><div id="kid-f" class="bar-f bar-ok" style="width:0%"></div></div>
|
||
</div>
|
||
<span id="st-tm" class="st-tm" style="display:none"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<canvas id="gc" class="game-canvas" width="800" height="600"></canvas>
|
||
|
||
<div id="hud-bot" class="hud-bot">
|
||
<button id="med-0" class="med-b">
|
||
<div class="med-ic">💧</div><div class="med-nm">Wasser</div>
|
||
<div class="med-br"><div id="mfl-0" class="med-fl" style="width:100%;background:#4fc3f7"></div></div>
|
||
<div id="mst-0" class="med-st med-ok">100%</div>
|
||
</button>
|
||
<button id="med-1" class="med-b">
|
||
<div class="med-ic">💊</div><div class="med-nm">Bikarbonat</div>
|
||
<div class="med-br"><div id="mfl-1" class="med-fl" style="width:100%;background:#81c784"></div></div>
|
||
<div id="mst-1" class="med-st med-ok">100%</div>
|
||
</button>
|
||
<button id="med-2" class="med-b">
|
||
<div class="med-ic">💉</div><div class="med-nm">Thiola®</div>
|
||
<div class="med-br"><div id="mfl-2" class="med-fl" style="width:100%;background:#ffb74d"></div></div>
|
||
<div id="mst-2" class="med-st med-ok">100%</div>
|
||
</button>
|
||
</div>
|
||
|
||
<div id="msg-pop" class="msg-pop" style="display:none"></div>
|
||
<button id="act-btn" class="act-btn">⚡</button>
|
||
</div>
|
||
|
||
<!-- GAME OVER -->
|
||
<div id="screen-gameover" class="screen screen--gameover" style="display:none">
|
||
<div class="go-icon">💀</div>
|
||
<h1 class="go-h">SPIEL VORBEI</h1>
|
||
<p id="go-r" class="go-reason"></p>
|
||
<div class="btn-row">
|
||
<button id="go-retry" class="btn btn--s btn--red">Level wiederholen</button>
|
||
<button id="go-rst" class="btn btn--s btn--red">Von vorne</button>
|
||
<button id="go-quit" class="btn btn--s btn--red">Beenden</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TRANSITION -->
|
||
<div id="screen-transition" class="screen screen--transition" style="display:none">
|
||
<div class="tr-icon">🏆</div>
|
||
<h1 class="tr-h">LEVEL GESCHAFFT!</h1>
|
||
<p id="tr-ln" class="tr-sub"></p>
|
||
<div class="tr-box">
|
||
<div class="tr-lbl">Verliehener Titel</div>
|
||
<div id="tr-t" class="tr-ttl"></div>
|
||
</div>
|
||
<button id="tr-btn" class="btn btn--s btn--grn">Nächstes Level</button>
|
||
</div>
|
||
|
||
<!-- VICTORY -->
|
||
<div id="screen-victory" class="screen screen--victory" style="display:none">
|
||
<div id="v-guru" class="v-float">🧘</div>
|
||
<div class="v-beard">🧔</div>
|
||
<h1 class="v-h">ZYSTINSTEIN-GURU</h1>
|
||
<p class="v-txt">
|
||
Sisyphus schwebt nun erleuchtet über dem Gipfel.<br>
|
||
Sein Bart weht im Wind der Erkenntnis.<br>
|
||
Die Zystinsteine sind bezwungen. Die Nieren sind sicher.
|
||
</p>
|
||
<div id="v-stone2" class="v-stone">🪨✨</div>
|
||
<button onclick="location.reload()" class="btn btn--s btn--pur" style="margin-top:32px">Zurück zum Anfang</button>
|
||
</div>
|
||
|
||
<script src="js/constants.js"></script>
|
||
<script src="js/utils.js"></script>
|
||
<script src="js/audio.js"></script>
|
||
<script src="js/world.js"></script>
|
||
<script src="js/state.js"></script>
|
||
<script src="js/screens.js"></script>
|
||
<script src="js/input.js"></script>
|
||
<script src="js/gameloop.js"></script>
|
||
<script src="js/render.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|