218 lines
9.8 KiB
HTML
218 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PONG – Thiola Edition</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
background: #0a0a12;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
font-family: 'Orbitron', monospace;
|
||
overflow: hidden;
|
||
user-select: none;
|
||
}
|
||
|
||
#game-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
#hud {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 800px;
|
||
padding: 0 20px;
|
||
color: #ccc;
|
||
font-size: 11px;
|
||
letter-spacing: 1px;
|
||
}
|
||
#hud .level-display { color: #ff6b35; font-weight: 700; font-size: 13px; text-shadow: 0 0 10px rgba(255,107,53,.5); }
|
||
#hud .shield-display { color: #4ecdc4; font-size: 11px; }
|
||
|
||
#game-container {
|
||
position: relative;
|
||
border: 2px solid #1a1a2e;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 40px rgba(78,205,196,.08), 0 0 80px rgba(255,107,53,.05), inset 0 0 60px rgba(0,0,0,.5);
|
||
}
|
||
|
||
canvas { display: block; background: #0d0d1a; }
|
||
|
||
/* ─── Start overlay ─── */
|
||
#overlay {
|
||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||
background: rgba(10,10,18,.94); backdrop-filter: blur(8px);
|
||
z-index: 10; transition: opacity .4s;
|
||
}
|
||
#overlay.hidden { opacity: 0; pointer-events: none; }
|
||
#overlay h1 { font-family: 'Press Start 2P', monospace; font-size: 28px; color: #ff6b35; text-shadow: 0 0 20px rgba(255,107,53,.6); margin-bottom: 8px; letter-spacing: 4px; }
|
||
#overlay .subtitle { font-size: 12px; color: #4ecdc4; margin-bottom: 28px; letter-spacing: 2px; }
|
||
#overlay .info-box { background: rgba(255,255,255,.04); border: 1px solid rgba(78,205,196,.15); border-radius: 8px; padding: 18px 28px; margin-bottom: 28px; text-align: center; max-width: 520px; }
|
||
#overlay .info-box p { font-size: 10px; color: #999; line-height: 2.1; }
|
||
.hl { color: #ff6b35; font-weight: 700; }
|
||
.hl2 { color: #4ecdc4; font-weight: 700; }
|
||
|
||
/* ─── Buttons ─── */
|
||
.game-btn {
|
||
font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 700; color: #0d0d1a;
|
||
background: linear-gradient(135deg, #ff6b35, #ff8c42); border: none;
|
||
padding: 14px 40px; border-radius: 6px; cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
|
||
transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 20px rgba(255,107,53,.3);
|
||
}
|
||
.game-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(255,107,53,.5); }
|
||
.game-btn.thiola { background: linear-gradient(135deg, #00b894, #55efc4); box-shadow: 0 4px 20px rgba(0,184,148,.3); }
|
||
.game-btn.thiola:hover { box-shadow: 0 6px 30px rgba(0,184,148,.5); }
|
||
|
||
/* ─── Full-screen popup (level transitions) ─── */
|
||
#popup {
|
||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||
background: rgba(10,10,18,.94); backdrop-filter: blur(8px);
|
||
z-index: 20; opacity: 0; pointer-events: none; transition: opacity .4s; padding: 30px;
|
||
}
|
||
#popup.show { opacity: 1; pointer-events: auto; }
|
||
#popup h2 { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #4ecdc4; text-shadow: 0 0 20px rgba(78,205,196,.5); margin-bottom: 18px; text-align: center; line-height: 1.5; }
|
||
.edu-card { background: rgba(255,255,255,.04); border: 1px solid rgba(78,205,196,.2); border-radius: 10px; padding: 24px 32px; max-width: 540px; margin-bottom: 22px; text-align: center; }
|
||
.edu-card .edu-icon { font-size: 36px; margin-bottom: 10px; display: block; }
|
||
.edu-card .edu-title { font-size: 12px; font-weight: 900; color: #4ecdc4; margin-bottom: 12px; letter-spacing: 1px; text-transform: uppercase; }
|
||
.edu-card .edu-text { font-size: 11px; color: #bbb; line-height: 2; }
|
||
.edu-card .edu-text strong { color: #fff; }
|
||
.edu-card .edu-text .thl { color: #55efc4; font-weight: 900; }
|
||
.edu-card .edu-text .warn { color: #ff6b35; font-weight: 700; }
|
||
#popup .popup-sub { font-size: 10px; color: #666; margin-bottom: 18px; }
|
||
|
||
.final-summary { background: linear-gradient(135deg, rgba(0,184,148,.08), rgba(78,205,196,.04)); border: 1px solid rgba(0,184,148,.25); border-radius: 12px; padding: 28px 36px; max-width: 560px; margin-bottom: 22px; text-align: center; }
|
||
.final-title { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #55efc4; margin-bottom: 16px; text-shadow: 0 0 15px rgba(85,239,196,.4); }
|
||
.final-text { font-size: 11px; color: #ccc; line-height: 2; }
|
||
.final-text strong { color: #fff; }
|
||
.pathway { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0; font-size: 11px; font-weight: 700; flex-wrap: wrap; }
|
||
.pathway .step { background: rgba(78,205,196,.12); border: 1px solid rgba(78,205,196,.3); border-radius: 6px; padding: 8px 14px; color: #4ecdc4; white-space: nowrap; }
|
||
.pathway .arrow { color: #ff6b35; font-size: 16px; }
|
||
|
||
/* ─── Goal flash banner (in-game edu) ─── */
|
||
#goal-flash {
|
||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||
z-index: 15; opacity: 0; pointer-events: none; transition: opacity .3s;
|
||
padding: 20px;
|
||
}
|
||
#goal-flash.show { opacity: 1; pointer-events: auto; }
|
||
#goal-flash.player-goal { background: rgba(0,30,25,.88); }
|
||
#goal-flash.cpu-goal { background: rgba(40,10,5,.88); }
|
||
|
||
#goal-flash .flash-score {
|
||
font-family: 'Press Start 2P', monospace;
|
||
font-size: 32px;
|
||
margin-bottom: 16px;
|
||
letter-spacing: 6px;
|
||
}
|
||
#goal-flash.player-goal .flash-score { color: #4ecdc4; text-shadow: 0 0 20px rgba(78,205,196,.6); }
|
||
#goal-flash.cpu-goal .flash-score { color: #ff6b35; text-shadow: 0 0 20px rgba(255,107,53,.6); }
|
||
|
||
#goal-flash .flash-card {
|
||
border-radius: 10px;
|
||
padding: 20px 32px;
|
||
max-width: 520px;
|
||
text-align: center;
|
||
margin-bottom: 18px;
|
||
}
|
||
#goal-flash.player-goal .flash-card { background: rgba(78,205,196,.08); border: 1px solid rgba(78,205,196,.25); }
|
||
#goal-flash.cpu-goal .flash-card { background: rgba(255,107,53,.06); border: 1px solid rgba(255,107,53,.2); }
|
||
|
||
.flash-card .flash-icon { font-size: 28px; margin-bottom: 8px; display: block; }
|
||
.flash-card .flash-title { font-size: 11px; font-weight: 900; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; }
|
||
#goal-flash.player-goal .flash-title { color: #4ecdc4; }
|
||
#goal-flash.cpu-goal .flash-title { color: #ff6b35; }
|
||
.flash-card .flash-text { font-size: 11px; color: #ccc; line-height: 1.9; }
|
||
.flash-card .flash-text strong { color: #fff; }
|
||
.flash-card .flash-text .thl { color: #55efc4; font-weight: 900; }
|
||
.flash-card .flash-text .warn { color: #ff6b35; font-weight: 700; }
|
||
|
||
#goal-flash .flash-continue {
|
||
font-size: 10px; color: #666; letter-spacing: 1px;
|
||
animation: pulse-hint 1.5s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse-hint { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
|
||
|
||
#controls-hint { font-size: 9px; color: #444; letter-spacing: 1px; margin-top: 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="game-wrapper">
|
||
<div id="hud">
|
||
<div class="level-display">LEVEL <span id="hud-level">1</span> / 3</div>
|
||
<div class="shield-display">THIOLA-SCHUTZ: <span id="hud-shield">0</span>%</div>
|
||
<div style="color:#aaa; font-size:12px;">
|
||
<span id="hud-plabel">SPIELER</span> <span id="hud-pscore" style="color:#4ecdc4; font-weight:700">0</span>
|
||
:
|
||
<span id="hud-cscore" style="color:#ff6b35; font-weight:700">0</span> <span id="hud-clabel">CPU</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="game-container">
|
||
<canvas id="canvas" width="800" height="500"></canvas>
|
||
|
||
<div id="overlay">
|
||
<h1>PONG</h1>
|
||
<div class="subtitle">THIOLA EDITION</div>
|
||
<div class="info-box">
|
||
<p>
|
||
Nierensteine treffen auf dein Tor — kannst du sie abwehren?<br>
|
||
Gewinne <span class="hl">3 Level</span> mit jeweils <span class="hl">5 Punkten</span> Vorsprung.<br>
|
||
Ab Level 2 schützt <span class="hl2">Thiola</span> dein Tor!
|
||
</p>
|
||
</div>
|
||
<div style="font-size:11px; color:#888; margin-bottom:14px; letter-spacing:1px;">SPIELMODUS WÄHLEN</div>
|
||
<div style="display:flex; gap:14px; flex-wrap:wrap; justify-content:center;">
|
||
<button class="game-btn" id="start-btn-cpu">SPIELER VS. CPU</button>
|
||
<button class="game-btn thiola" id="start-btn-pvp">SPIELER VS. SPIELER</button>
|
||
</div>
|
||
<div id="controls-info" style="font-size:9px; color:#666; margin-top:18px; line-height:1.8; text-align:center;">
|
||
<span style="color:#4ecdc4">SPIELER 1 (links):</span> W / S oder Maus<br>
|
||
<span style="color:#ff6b35">SPIELER 2 (rechts):</span> ↑ / ↓ Pfeiltasten
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Goal flash (in-game edu per goal) -->
|
||
<div id="goal-flash">
|
||
<div class="flash-score" id="flash-score"></div>
|
||
<div class="flash-card">
|
||
<span class="flash-icon" id="flash-icon"></span>
|
||
<div class="flash-title" id="flash-title"></div>
|
||
<div class="flash-text" id="flash-text"></div>
|
||
</div>
|
||
<div class="flash-continue">KLICKEN ODER TASTE DRÜCKEN</div>
|
||
</div>
|
||
|
||
<!-- Level transition popup -->
|
||
<div id="popup">
|
||
<h2 id="popup-title"></h2>
|
||
<div id="popup-content"></div>
|
||
<div class="popup-sub" id="popup-sub"></div>
|
||
<button class="game-btn" id="popup-btn">WEITER</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="controls-hint">PONG · THIOLA EDITION</div>
|
||
</div>
|
||
|
||
<script src="constants.js"></script>
|
||
<script src="game.js"></script>
|
||
</body>
|
||
</html>
|