Janik Dietz
25fc6fb345
- Add new fullscreen game mode playable in a dedicated browser tab - Extract shared game logic into `engine.js` to be used by both popup and fullscreen modes - Implement self-protection to prevent closing the game tab or popup tab - Update documentation and bump version to 1.1.0
97 lines
3.5 KiB
HTML
97 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Tab Shooter — Vollbild</title>
|
||
<link rel="stylesheet" href="popup.css" />
|
||
<link rel="stylesheet" href="game.css" />
|
||
</head>
|
||
<body class="fullscreen">
|
||
<div id="app" class="fullscreen-app">
|
||
<!-- START SCREEN -->
|
||
<div id="start-screen" class="screen visible">
|
||
<h1 class="title">🚀 TAB <span>SHOOTER</span></h1>
|
||
<p class="subtitle">Vollbild-Modus<br />Dieser Tab ist sicher – du kannst ihn <strong>nicht</strong> abschießen.</p>
|
||
|
||
<div class="scope-select">
|
||
<label class="scope-label">Welche Tabs ins Visier nehmen?</label>
|
||
<div class="scope-buttons">
|
||
<button class="scope-btn active" data-scope="current">
|
||
<span class="scope-icon">🪟</span>
|
||
<span class="scope-text">Aktuelles<br>Fenster</span>
|
||
</button>
|
||
<button class="scope-btn" data-scope="all">
|
||
<span class="scope-icon">🌐</span>
|
||
<span class="scope-text">Alle<br>Fenster</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="start-btn" class="primary-btn">SPIEL STARTEN</button>
|
||
|
||
<div class="highscore-display">
|
||
<span class="hs-label">🏆 Highscore</span>
|
||
<span id="hs-value" class="hs-value">0</span>
|
||
</div>
|
||
|
||
<div class="controls-hint">
|
||
<div><kbd>←</kbd> <kbd>→</kbd> / <kbd>A</kbd> <kbd>D</kbd> — Bewegen</div>
|
||
<div><kbd>Leertaste</kbd> / <kbd>Klick</kbd> — Schießen</div>
|
||
<div><kbd>Maus</kbd> — Ebenfalls steuerbar</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GAME SCREEN -->
|
||
<div id="game-screen" class="screen">
|
||
<canvas id="game-canvas" width="900" height="680"></canvas>
|
||
<div id="hud">
|
||
<div class="hud-item">
|
||
<span class="hud-label">SCORE</span>
|
||
<span id="hud-score" class="hud-value">0</span>
|
||
</div>
|
||
<div class="hud-item">
|
||
<span class="hud-label">LIVES</span>
|
||
<span id="hud-lives" class="hud-value">❤️❤️❤️</span>
|
||
</div>
|
||
<div class="hud-item">
|
||
<span class="hud-label">TABS</span>
|
||
<span id="hud-tabs" class="hud-value">0</span>
|
||
</div>
|
||
<div class="hud-item powerup-indicator" id="hud-powerups"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GAME OVER SCREEN -->
|
||
<div id="gameover-screen" class="screen">
|
||
<h1 class="title small">💥 GAME OVER</h1>
|
||
<div class="result-stats">
|
||
<div class="stat-row">
|
||
<span>Tabs vernichtet:</span>
|
||
<span id="result-tabs" class="stat-value">0</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span>Score:</span>
|
||
<span id="result-score" class="stat-value">0</span>
|
||
</div>
|
||
<div class="stat-row highlight">
|
||
<span>🏆 Highscore:</span>
|
||
<span id="result-highscore" class="stat-value">0</span>
|
||
</div>
|
||
</div>
|
||
<div id="new-record" class="new-record hidden">⚡ NEUER REKORD! ⚡</div>
|
||
<button id="replay-btn" class="primary-btn">NOCHMAL</button>
|
||
<button id="menu-btn" class="secondary-btn">ZUM MENÜ</button>
|
||
</div>
|
||
|
||
<!-- EMPTY STATE -->
|
||
<div id="empty-screen" class="screen">
|
||
<div class="empty-icon">🎉</div>
|
||
<h2 class="title small">Keine Tabs offen!</h2>
|
||
<p class="subtitle">Du hast aktuell keine Tabs zum Abschießen.<br />Chaosfrei!</p>
|
||
<button id="empty-menu-btn" class="secondary-btn">ZUM MENÜ</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="game.js"></script>
|
||
</body>
|
||
</html>
|