140 lines
5.2 KiB
HTML
140 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
|
<title id="pageTitle">Spiel</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="game.css">
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="bgCanvas"></canvas>
|
|
|
|
<!-- INTRO -->
|
|
<div class="screen active" id="introScreen">
|
|
<div class="intro-inner">
|
|
<div class="intro-particles" id="introParticles"></div>
|
|
<span class="intro-figure" id="introFigure">🎮</span>
|
|
<div class="game-badge">Spiel-Generator Workshop</div>
|
|
<h1 class="intro-title" id="introTitle">Mein <span class="highlight">Spiel</span></h1>
|
|
<p class="intro-desc" id="introDesc">Beschreibung folgt...</p>
|
|
<div class="intro-meta" id="introMeta"></div>
|
|
<button class="btn-start" onclick="startGame()">🎮 Spiel starten!</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GAME -->
|
|
<div class="screen" id="gameScreen">
|
|
<div class="hud">
|
|
<div class="hud-title" id="hudTitle">Spiel</div>
|
|
<!-- 1P-Pillen (versteckt bei 2P) -->
|
|
<div class="hud-pill" id="hudPosPill">⬛ Feld <span class="val" id="hudPos">1/10</span></div>
|
|
<div class="hud-pill" id="hudLifePill">❤️ <span class="val hud-lives" id="hudLives">❤️❤️❤️</span></div>
|
|
<div class="hud-pill" id="hudPtPill" style="display:none">⭐ <span class="val" id="hudPts">0</span></div>
|
|
<!-- 2P-Spieler-Pillen (versteckt bei 1P) -->
|
|
<div class="hud-2p" id="hud2p" style="display:none">
|
|
<div class="hud-player" id="hudP1">
|
|
<span class="hp-fig" id="hp1Fig">🤖</span>
|
|
<span class="hp-pos" id="hp1Pos">1/10</span>
|
|
<span class="hp-stat" id="hp1Stat">❤️❤️❤️</span>
|
|
</div>
|
|
<div class="hud-player" id="hudP2">
|
|
<span class="hp-fig" id="hp2Fig">🦊</span>
|
|
<span class="hp-pos" id="hp2Pos">1/10</span>
|
|
<span class="hp-stat" id="hp2Stat">❤️❤️❤️</span>
|
|
</div>
|
|
</div>
|
|
<button id="btnMenu" onclick="showMenu()">☰ Menü</button>
|
|
</div>
|
|
<div class="board-area">
|
|
<canvas id="boardCanvas"></canvas>
|
|
</div>
|
|
<div class="dice-panel">
|
|
<div>
|
|
<div class="dice-label" id="diceLabel">Würfeln!</div>
|
|
<div id="diceEmoji">🎲</div>
|
|
</div>
|
|
<button id="btnRoll" onclick="doRoll()">🎲 Würfeln</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OVERLAYS -->
|
|
<!-- Story -->
|
|
<div class="overlay" id="storyOverlay">
|
|
<div class="overlay-bg"></div>
|
|
<div class="overlay-box">
|
|
<div class="story-ov-header">
|
|
<span class="story-ov-emoji" id="storyEmoji">📖</span>
|
|
<div class="story-ov-title">Erzähl-Text</div>
|
|
</div>
|
|
<div class="story-ov-body">
|
|
<p class="story-ov-text" id="storyText"></p>
|
|
</div>
|
|
<button class="story-ov-btn" onclick="closeStory()">▶ Weiter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Minigame -->
|
|
<div class="overlay" id="mgOverlay">
|
|
<div class="overlay-bg"></div>
|
|
<div class="overlay-box">
|
|
<div class="mg-ov-header">
|
|
<div class="mg-ov-title" id="mgTitle">Mini-Game</div>
|
|
<button class="mg-ov-close" onclick="skipMinigame()">✕</button>
|
|
</div>
|
|
<div class="mg-ov-body">
|
|
<p class="mg-ov-desc" id="mgDesc"></p>
|
|
<div class="mg-canvas-wrap" id="mgCanvasWrap"></div>
|
|
<div class="mg-ov-controls" id="mgControls"></div>
|
|
<div class="mg-result-bar" id="mgResultBar">
|
|
<h3 id="mgResultTitle"></h3>
|
|
<p id="mgResultSub"></p>
|
|
</div>
|
|
<button id="btnMgContinue" onclick="afterMinigame()">Weiter →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result -->
|
|
<div class="overlay" id="resultOverlay">
|
|
<div class="overlay-bg"></div>
|
|
<div class="overlay-box">
|
|
<span class="res-emoji" id="resEmoji">🏆</span>
|
|
<h2 class="res-title" id="resTitle">Gewonnen!</h2>
|
|
<p class="res-sub" id="resSub"></p>
|
|
<div class="res-stats" id="resStats"></div>
|
|
<div style="display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px">
|
|
<button class="res-btn" onclick="window.location.reload()" style="background:linear-gradient(135deg,#7c3aed,#5b21b6)">🔄 Nochmal spielen</button>
|
|
<button class="res-btn" onclick="backToEditor()" style="background:linear-gradient(135deg,#0e7490,#06b6d4)">📝 Zum Editor</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flash -->
|
|
<div id="transOverlay"></div>
|
|
<div id="toast"></div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
|
|
<script src="js/world.js"></script>
|
|
<script src="js/game.js"></script>
|
|
|
|
<!-- Mini-Game Module -->
|
|
<script src="minigames/_api.js"></script>
|
|
<script src="minigames/snake.js"></script>
|
|
<script src="minigames/flappy.js"></script>
|
|
<script src="minigames/memory.js"></script>
|
|
<script src="minigames/quiz.js"></script>
|
|
<script src="minigames/reaction.js"></script>
|
|
<script src="minigames/basketball.js"></script>
|
|
<script src="minigames/catch.js"></script>
|
|
<script src="minigames/maze.js"></script>
|
|
<script src="minigames/simon.js"></script>
|
|
<script src="minigames/typing.js"></script>
|
|
<script src="minigames/puzzle.js"></script>
|
|
<script src="minigames/spotdiff.js"></script>
|
|
<script src="minigames/snake2p.js"></script>
|
|
<script src="minigames/flappy2p.js"></script>
|
|
<script src=/chat/chat.js></script>
|
|
</body>
|
|
</html>
|