Tronax/tab-shooter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add fullscreen mode and extract shared game engine

Browse source 
- 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
This commit is contained in:
Janik Dietz 2026-08-04 08:02:53 +02:00
parent 0f566b02ac
commit 25fc6fb345
Signed by: Tronax
SSH key fingerprint: SHA256:2pKKXDZucWvaF/GzXNz0FY53EAO1YDLN80bqS+TTz/o
8 changed files with 1064 additions and 798 deletions
Download patch file Download diff file Expand all files Collapse all files

97
game.html Normal file
View file

@ -0,0 +1,97 @@
<!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>