mirror of
https://github.com/tiennm99/ai-coding-workflow-labs.git
synced 2026-09-17 06:24:20 +00:00
tiennm99
a4a79e6761
Chicken-Invaders + 1942-inspired additions: stack a booster to level it (L1-L3, larger spread / faster fire / deeper pierce), new drone power-up spawning 1-2 orbital companions that fire along with you, medal pickups that fly up on kill for bonus score and combo, a meteor-rain bonus wave every 4th non-boss wave, flavor-specific announcer banners (ROLL CALL, SHOOTERS JOIN, BOSS APPROACHING, PERFECT WAVE), hit-stop on boss kills and combo bumps, and a persistent top-5 local leaderboard with game-over placement highlight. Verifier approved with zero blockers.
77 lines
3.6 KiB
HTML
77 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>OMC Neon Arena</title>
|
|
<link rel="stylesheet" href="./styles/main.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<canvas id="game" width="1280" height="720"></canvas>
|
|
|
|
<div id="hud" class="hud">
|
|
<div class="hud__slot" data-slot="score">Score: <span data-hud="score">0</span></div>
|
|
<div class="hud__slot" data-slot="wave">Wave: <span data-hud="wave">1</span></div>
|
|
<div class="hud__slot" data-slot="health">HP: <span data-hud="health">100</span></div>
|
|
<div class="hud__slot" data-slot="combo">Combo: <span data-hud="combo">x1</span></div>
|
|
<div class="hud-buffs" data-hud="buffs"></div>
|
|
<div class="dash-pip hidden" data-hud="dash"></div>
|
|
<div class="boss-bar hidden" data-hud="boss"><span class="label">BOSS</span><div class="boss-bar__fill"></div></div>
|
|
<div class="wave-banner" data-hud="banner"></div>
|
|
</div>
|
|
|
|
<div id="overlay-menu" class="overlay overlay--menu" data-overlay="menu">
|
|
<div class="overlay__panel">
|
|
<h1 class="overlay__title">OMC Neon Arena</h1>
|
|
<p class="overlay__subtitle">WASD / arrows to move · mouse to aim · click or space to shoot · P to pause</p>
|
|
<button class="overlay__button" data-action="start">Start</button>
|
|
<p class="overlay__meta">Best: <span data-hud="best">0</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="overlay-pause" class="overlay overlay--pause hidden" data-overlay="pause">
|
|
<div class="overlay__panel">
|
|
<h2 class="overlay__title">Paused</h2>
|
|
<button class="overlay__button" data-action="resume">Resume</button>
|
|
<button class="overlay__button" data-action="reset">Restart</button>
|
|
<button class="overlay__button overlay__button--settings" data-action="open-settings">Settings</button>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="overlay hidden" data-overlay="settings" id="overlay-settings">
|
|
<div class="overlay__panel">
|
|
<h2 class="overlay__title">Settings</h2>
|
|
<div class="settings-row">
|
|
<label class="settings-label" for="settings-volume">Volume</label>
|
|
<div class="settings-control">
|
|
<input type="range" min="0" max="100" id="settings-volume" data-setting="volume" class="settings-slider" />
|
|
<span class="settings-value" id="settings-volume-val">70</span>
|
|
</div>
|
|
</div>
|
|
<div class="settings-row">
|
|
<label class="settings-label" for="settings-shake">Screen Shake</label>
|
|
<div class="settings-control">
|
|
<input type="checkbox" id="settings-shake" data-setting="shake" class="settings-toggle" />
|
|
<label class="settings-toggle-label" for="settings-shake"></label>
|
|
</div>
|
|
</div>
|
|
<button class="overlay__button" data-action="settings-back">Back</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="overlay-gameover" class="overlay overlay--gameover hidden" data-overlay="gameover">
|
|
<div class="overlay__panel">
|
|
<h2 class="overlay__title">You Died</h2>
|
|
<p class="overlay__meta">Score: <span data-hud="final-score">0</span></p>
|
|
<p class="overlay__meta">Best: <span data-hud="final-best">0</span></p>
|
|
<ol class="leaderboard" data-overlay-leaderboard></ol>
|
|
<button class="overlay__button" data-action="reset">Try Again</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="./src/main.js"></script>
|
|
</body>
|
|
</html>
|