77 lines
3.5 KiB
HTML
77 lines
3.5 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>Cyst-Kid</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="game-container">
|
|
<canvas id="gameCanvas"></canvas>
|
|
<div id="start-screen" class="overlay">
|
|
<div class="overlay-content">
|
|
<h1 class="game-title">CYST-KID</h1>
|
|
<p class="start-text">Sammle Punkte, weiche den Schmerzen aus<br>und bringe die Medikamente rechtzeitig<br>zum Patienten!</p>
|
|
<div class="controls-info">
|
|
<p>Steuerung: Pfeiltasten / WASD</p>
|
|
<p>Sprint: Shift</p>
|
|
<p>ESC: Zurück zum Start</p>
|
|
</div>
|
|
<button id="startBtn" class="arcade-btn">START</button>
|
|
</div>
|
|
</div>
|
|
<div id="level-complete-screen" class="overlay" style="display:none">
|
|
<div class="overlay-content">
|
|
<h2 class="level-text">LEVEL GESCHAFFT!</h2>
|
|
<p id="level-score-text"></p>
|
|
<button id="nextLevelBtn" class="arcade-btn">NÄCHSTES LEVEL (Enter)</button>
|
|
</div>
|
|
</div>
|
|
<div id="game-over-screen" class="overlay" style="display:none">
|
|
<div class="overlay-content">
|
|
<h2 class="gameover-text">GAME OVER</h2>
|
|
<p class="lose-text">Schade - verloren.</p>
|
|
<p id="go-score-text" class="end-score-text"></p>
|
|
<input type="text" id="go-playerName" placeholder="Dein Name" maxlength="20" class="name-input">
|
|
<button id="go-submitScoreBtn" class="arcade-btn">EINTRAGEN</button>
|
|
<div id="go-ranking-table-container" class="ranking-table-container"></div>
|
|
<button id="restartBtn" class="arcade-btn" style="display:none">ZURÜCK ZUM START</button>
|
|
</div>
|
|
</div>
|
|
<div id="win-screen" class="overlay" style="display:none">
|
|
<div class="overlay-content">
|
|
<h2 class="win-text">GEWONNEN!</h2>
|
|
<p class="win-msg">Herzlichen Glückwunsch - du hast gewonnen.</p>
|
|
<p id="win-score-text" class="end-score-text"></p>
|
|
<input type="text" id="playerName" placeholder="Dein Name" maxlength="20" class="name-input">
|
|
<button id="submitScoreBtn" class="arcade-btn">EINTRAGEN</button>
|
|
<div id="ranking-table-container" class="ranking-table-container"></div>
|
|
<button id="playAgainBtn" class="arcade-btn" style="display:none">ZURÜCK ZUM START</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Joystick -->
|
|
<div id="touch-controls">
|
|
<div id="joystick-base">
|
|
<span class="joy-arrow joy-up">▲</span>
|
|
<span class="joy-arrow joy-right">▶</span>
|
|
<span class="joy-arrow joy-down">▼</span>
|
|
<span class="joy-arrow joy-left">◀</span>
|
|
<div id="joystick-knob"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/constants.js"></script>
|
|
<script src="js/sound.js"></script>
|
|
<script src="js/game.js"></script>
|
|
<script src="js/movement.js"></script>
|
|
<script src="js/render.js"></script>
|
|
<script src="js/screen-start.js"></script>
|
|
<script src="js/screen-level-complete.js"></script>
|
|
<script src="js/screen-game-over.js"></script>
|
|
<script src="js/screen-win.js"></script>
|
|
</body>
|
|
</html>
|