206 lines
9.1 KiB
HTML
206 lines
9.1 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>
|
||
<button id="mute-btn" onclick="toggleAudioClick()">🔊</button>
|
||
<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="NAME" maxlength="4" style="text-transform:uppercase;">
|
||
<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 für deinen Preis oder lösche den Eintrag.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="modal-impressum" class="modal-overlay" style="display:none;">
|
||
<div class="modal-content">
|
||
<button class="close-modal" onclick="closeModal()">X</button>
|
||
<h2>Impressum & Credits</h2>
|
||
|
||
<p><strong>Projektleitung & Code:</strong><br>
|
||
Sebastian Unterschütz<br>
|
||
Göltzschtalblick 16<br>
|
||
08236 Ellefeld<br>
|
||
<small>Kontakt: sebastian@unterschutz.de</small>
|
||
</p>
|
||
|
||
<hr style="border:1px solid #444; margin: 15px 0;">
|
||
|
||
<p><strong>🎵 Musik & Sound Design:</strong><br>
|
||
<span style="color:#ffcc00; font-size:18px;">Max E.</span>
|
||
</p>
|
||
|
||
<p><strong>💻 Quellcode:</strong><br>
|
||
<a href="https://git.zb-server.de/ZB-Server/it232Abschied" target="_blank" style="color:#2196F3; text-decoration:none;">
|
||
git.zb-server.de/ZB-Server/it232Abschied
|
||
</a>
|
||
</p>
|
||
|
||
<hr style="border:1px solid #444; margin: 15px 0;">
|
||
|
||
<p><strong>⚖️ Lizenzhinweis:</strong></p>
|
||
<p style="font-size:12px; color:#aaa;">
|
||
Dies ist ein Schulprojekt. <br>
|
||
<strong>Kommerzielle Nutzung und Veränderung des Quellcodes sind ausdrücklich untersagt.</strong><br>
|
||
Alle Rechte liegen bei den Urhebern.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="modal-datenschutz" class="modal-overlay" style="display:none;">
|
||
<div class="modal-content">
|
||
<button class="close-modal" onclick="closeModal()">X</button>
|
||
<h2>Datenschutzerklärung</h2>
|
||
|
||
<p><strong>1. Datenschutz auf einen Blick</strong><br>
|
||
Allgemeine Hinweise: Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.</p>
|
||
|
||
<p><strong>2. Verantwortlicher</strong><br>
|
||
Verantwortlich für die Datenverarbeitung auf dieser Website ist:<br>
|
||
Sebastian Unterschütz<br>
|
||
Göltzschtalblick 16, 08236 Ellefeld<br>
|
||
E-Mail: sebastian@unterschutz.de<br>
|
||
<em>(Schulprojekt im Rahmen der IT232)</em></p>
|
||
|
||
<p><strong>3. Hosting (Hetzner)</strong><br>
|
||
Wir hosten die Inhalte unserer Website bei folgendem Anbieter:<br>
|
||
<strong>Hetzner Online GmbH</strong><br>
|
||
Industriestr. 25<br>
|
||
91710 Gunzenhausen<br>
|
||
Deutschland<br>
|
||
<br>
|
||
Serverstandort: <strong>Deutschland</strong> (ausschließlich).<br>
|
||
Wir haben mit dem Anbieter einen Vertrag zur Auftragsverarbeitung (AVV) geschlossen. Hierbei handelt es sich um einen datenschutzrechtlich vorgeschriebenen Vertrag, der gewährleistet, dass dieser die personenbezogenen Daten unserer Websitebesucher nur nach unseren Weisungen und unter Einhaltung der DSGVO verarbeitet.</p>
|
||
|
||
<p><strong>4. Datenerfassung auf dieser Website</strong></p>
|
||
|
||
<p><strong>Server-Log-Dateien</strong><br>
|
||
Der Provider der Seiten (Hetzner) erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:
|
||
<ul>
|
||
<li>Uhrzeit der Serveranfrage</li>
|
||
<li>IP-Adresse</li>
|
||
</ul>
|
||
Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.<br>
|
||
<strong>Rechtsgrundlage:</strong> Art. 6 Abs. 1 lit. f DSGVO. Der Websitebetreiber hat ein berechtigtes Interesse an der technisch fehlerfreien Darstellung und der Optimierung seiner Website – hierzu müssen die Server-Log-Files erfasst werden. Die Daten werden nach spätestens 7 Tagen automatisch gelöscht.</p>
|
||
|
||
<p><strong>Spielstände & Highscores</strong><br>
|
||
Wenn Sie einen Highscore eintragen, speichern wir in unserer Datenbank:
|
||
<ul>
|
||
<li>Den von Ihnen gewählten Namen (Pseudonym empfohlen!)</li>
|
||
<li>Ihren Punktestand und Zeitstempel</li>
|
||
<li>Eine Session-ID und einen "Claim-Code" zur Verifizierung</li>
|
||
</ul>
|
||
Diese Daten dienen ausschließlich der Darstellung der Bestenliste und der Spielmechanik.</p>
|
||
|
||
<p><strong>Lokale Speicherung (LocalStorage)</strong><br>
|
||
Das Spiel speichert Einstellungen (z.B. "Ton aus") und Ihre persönlichen "Claim-Codes" lokal in Ihrem Browser (`LocalStorage`). Diese Daten verlassen Ihr Gerät nicht, außer Sie übermitteln einen Highscore aktiv an den Server. Wir setzen <strong>keine Tracking-Cookies</strong> oder Analyse-Tools (wie Google Analytics) ein.</p>
|
||
|
||
<p><strong>5. Ihre Rechte</strong><br>
|
||
Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger und den Zweck der Datenverarbeitung sowie ein Recht auf Berichtigung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich jederzeit an die im Impressum angegebene Adresse wenden.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/config.js"></script>
|
||
<script src="js/state.js"></script>
|
||
<script src="js/audio.js"></script>
|
||
<script src="js/particles.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');
|
||
}
|
||
|
||
window.onclick = function(event) {
|
||
if (event.target.classList.contains('modal-overlay')) {
|
||
closeModal();
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |