161 lines
5.9 KiB
HTML
161 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Escape the Teacher</title>
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="rotate-overlay">
|
|
<div class="icon">📱↻</div>
|
|
<p>Bitte Gerät drehen!</p>
|
|
<small>Querformat benötigt</small>
|
|
</div>
|
|
|
|
<div id="game-container">
|
|
<canvas id="gameCanvas"></canvas>
|
|
|
|
<div id="ui-layer">
|
|
SCORE: <span id="score">0</span>
|
|
</div>
|
|
|
|
<div id="startScreen">
|
|
|
|
<div class="start-left">
|
|
<h1>ESCAPE THE<br>TEACHER</h1>
|
|
|
|
<p style="font-size: 12px; color: #aaa;">Dein Rekord: <span id="localHighscore" style="color:yellow">0</span></p>
|
|
|
|
<button id="startBtn" onclick="startGameClick()">STARTEN</button>
|
|
<div id="loadingText">Lade Grafiken...</div>
|
|
|
|
<div class="info-box">
|
|
<div class="info-title">SCHUL-NEWS</div>
|
|
<p>
|
|
• Herr Müller verteilt heute Nachsitzen!<br>
|
|
• Spring über Tische und Mülleimer.<br>
|
|
• <strong>Neu:</strong> Ducken (Pfeil Runter) gegen fliegende Schwämme!
|
|
</p>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<div class="info-title">STEUERUNG</div>
|
|
<p>
|
|
PC: <strong>Leertaste/Maus</strong> (Springen), <strong>Pfeil Runter</strong> (Ducken)<br>
|
|
Handy: <strong>Tippen</strong> (Springen), <strong>Wischen nach unten</strong> (Ducken)
|
|
</p>
|
|
</div>
|
|
|
|
<div class="legal-bar">
|
|
<button class="legal-btn" onclick="showMyCodes()" style="color:yellow; border-color:yellow;">★ MEINE CODES</button>
|
|
<button class="legal-btn" onclick="openModal('impressum')">Impressum</button>
|
|
<button class="legal-btn" onclick="openModal('datenschutz')">Datenschutz</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="start-right">
|
|
<div class="hall-of-fame-box">
|
|
<h3>🏆 TOP SCHÜLER</h3>
|
|
<div id="startLeaderboardList">Lade...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gameOverScreen" style="display:none;">
|
|
<h1>ERWISCHT!</h1>
|
|
<p>Dein Score: <span id="finalScore" style="color:yellow; font-size: 24px;">0</span></p>
|
|
|
|
<div id="inputSection">
|
|
<input type="text" id="playerNameInput" placeholder="Dein Name" maxlength="10">
|
|
<button id="submitBtn" onclick="submitScore()">EINTRAGEN</button>
|
|
</div>
|
|
|
|
<div id="leaderboard"></div>
|
|
|
|
<button class="retry-btn" onclick="location.reload()" style="margin-top: 20px; background: #ff4444; color: white;">NOCHMAL SPIELEN</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-codes" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<button class="close-modal" onclick="closeModal()">X</button>
|
|
<h2 style="color:yellow">MEINE BEWEISE</h2>
|
|
<div id="codesList" style="font-size: 10px; line-height: 1.8;">
|
|
</div>
|
|
<p style="margin-top:20px; font-size:9px; color:#888;">Zeige diesen Code dem Lehrer für deinen Preis oder lösche den Eintrag.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-impressum" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<button class="close-modal" onclick="closeModal()">X</button>
|
|
<h2>Impressum</h2>
|
|
<p><strong>Angaben gemäß § 5 TMG:</strong></p>
|
|
<p>
|
|
Sebastian Unterschütz<br>
|
|
Göltzschtalblick 16 <br>
|
|
08236 Ellefeld
|
|
</p>
|
|
<p>Kontakt: sebastian@unterschuetz.de</p>
|
|
<p><em>Dies ist ein Schulprojekt ohne kommerzielle Absicht.</em></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-datenschutz" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<button class="close-modal" onclick="closeModal()">X</button>
|
|
<h2>Datenschutz</h2>
|
|
|
|
<p><strong>1. Allgemeines</strong><br>
|
|
Dies ist ein Schulprojekt. Wir speichern so wenig Daten wie möglich.</p>
|
|
|
|
<p><strong>2. Welche Daten speichern wir?</strong><br>
|
|
Wenn du einen Highscore einträgst, speichern wir auf unserem Server:
|
|
<ul>
|
|
<li>Deinen gewählten Namen</li>
|
|
<li>Deinen Punktestand</li>
|
|
<li>Einen Zeitstempel</li>
|
|
<li>Einen zufälligen "Beweis-Code"</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<p><strong>3. Lokale Speicherung (Dein Gerät)</strong><br>
|
|
Das Spiel nutzt den "LocalStorage" deines Browsers, um deinen persönlichen Rekord und deine gesammelten Beweis-Codes zu speichern. Diese Daten verlassen dein Gerät nicht, außer du sendest sie aktiv ab.</p>
|
|
|
|
<p><strong>4. Cookies & Tracking</strong><br>
|
|
Wir verwenden <strong>keine</strong> Tracking-Cookies, keine Analyse-Tools (wie Google Analytics) und laden keine Schriftarten von fremden Servern.</p>
|
|
|
|
<p><strong>5. Deine Rechte</strong><br>
|
|
Du kannst deine Einträge jederzeit selbstständig über das Menü "Meine Codes" vom Server löschen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/config.js"></script>
|
|
<script src="js/state.js"></script>
|
|
<script src="js/network.js"></script>
|
|
<script src="js/input.js"></script>
|
|
<script src="js/logic.js"></script>
|
|
<script src="js/render.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
<script>
|
|
function openModal(id) {
|
|
document.getElementById('modal-' + id).style.display = 'flex';
|
|
}
|
|
function closeModal() {
|
|
const modals = document.querySelectorAll('.modal-overlay');
|
|
modals.forEach(el => el.style.display = 'none');
|
|
}
|
|
|
|
// Schließen wenn man daneben klickt
|
|
window.onclick = function(event) {
|
|
if (event.target.classList.contains('modal-overlay')) {
|
|
closeModal();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |