Wildlife Kingdom — original browser zoo-management sim
- Procedural canvas art: 15 species × 4 poses, 15 buildings, modular terrain, UI icons - Habitat enclosure detection, biome suitability, staff/guest AI pathfinding - Economy: tickets, shops, wages, star rating, research tiers, 15 missions - Day/night cycle, particles, WebAudio soundtrack & synth SFX - Mouse + touch controls, responsive UI, localStorage autosave - Verified: 31/31 logic tests (test/smoke.js) · 12/12 render audits (test/qa.html)
This commit is contained in:
+100
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<title>Wildlife Kingdom — Zoo Management</title>
|
||||
<meta name="description" content="Wildlife Kingdom: build and run your own cozy zoo. Original browser management sim.">
|
||||
<link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="38" r="14" fill="%2343382a"/><circle cx="15" cy="24" r="7" fill="%2343382a"/><circle cx="28" cy="16" r="7" fill="%2343382a"/><circle cx="43" cy="18" r="7" fill="%2343382a"/><circle cx="53" cy="30" r="7" fill="%2343382a"/></svg>'>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<canvas id="game"></canvas>
|
||||
|
||||
<!-- ===== TOP HUD ===== -->
|
||||
<header id="hud-top" class="hidden">
|
||||
<div class="hud-group">
|
||||
<div class="stat pill" id="st-money"><span class="ic" data-ic="coin"></span><b>0</b></div>
|
||||
<div class="stat pill" id="st-guests"><span class="ic" data-ic="guest"></span><b>0</b></div>
|
||||
<div class="stat pill" id="st-joy"><span class="ic" data-ic="heart"></span><b>0%</b></div>
|
||||
<div class="stat pill" id="st-research"><span class="ic" data-ic="flask"></span><b>0</b></div>
|
||||
</div>
|
||||
<div class="hud-group">
|
||||
<div class="stat pill stars" id="st-stars"><span class="ic" data-ic="star"></span><b>0.0</b></div>
|
||||
<div class="stat pill time"><b id="st-day">Day 1</b><i id="st-clock">08:00</i></div>
|
||||
</div>
|
||||
<div class="hud-group right">
|
||||
<div class="speedctl panel-lite">
|
||||
<button class="btn icobtn spd" id="spd-pause" title="Pause (Space)"></button>
|
||||
<button class="btn icobtn spd active" id="spd-play" title="Normal speed (1)"></button>
|
||||
<button class="btn icobtn spd" id="spd-fast" title="Fast (2)"></button>
|
||||
<button class="btn icobtn spd" id="spd-ultra" title="Ultra (3)"></button>
|
||||
</div>
|
||||
<button class="btn icobtn" id="btn-sound" title="Sound"></button>
|
||||
<button class="btn icobtn" id="btn-settings" title="Settings"></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ===== SIDE PANEL ===== -->
|
||||
<aside id="side-panel" class="hidden">
|
||||
<div class="sp-tabs">
|
||||
<button class="sp-tab active" data-tab="objectives">Missions</button>
|
||||
<button class="sp-tab" data-tab="research">Research</button>
|
||||
<button class="sp-tab" data-tab="zoo">Zoo</button>
|
||||
</div>
|
||||
<div id="sp-content"></div>
|
||||
</aside>
|
||||
<button id="sp-toggle" class="btn hidden" title="Objectives & Research">☰</button>
|
||||
|
||||
<!-- ===== BOTTOM TOOLBAR ===== -->
|
||||
<footer id="toolbar" class="hidden">
|
||||
<div id="tb-palette" class="hidden"></div>
|
||||
<div id="tb-row">
|
||||
<button class="btn icobtn danger" id="btn-bulldoze" title="Bulldoze (X)"></button>
|
||||
<div id="tb-categories"></div>
|
||||
<div id="tool-info" class="hidden"><b id="tool-name"></b><span id="tool-cost"></span></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- selection popup -->
|
||||
<div id="sel-popup" class="panel hidden"></div>
|
||||
|
||||
<!-- toasts -->
|
||||
<div id="toasts"></div>
|
||||
|
||||
<!-- ===== MAIN MENU / HERO ===== -->
|
||||
<div id="menu">
|
||||
<div class="menu-inner">
|
||||
<div class="menu-title-block">
|
||||
<h1 class="title"><span>WILDLIFE</span><em>KINGDOM</em></h1>
|
||||
<p class="tagline">Build a cozy zoo. Keep every animal happy.</p>
|
||||
</div>
|
||||
<div class="menu-buttons">
|
||||
<button class="btn big primary" id="btn-continue" disabled>Continue Zoo</button>
|
||||
<button class="btn big" id="btn-new">New Zoo</button>
|
||||
<button class="btn big ghost" id="btn-how">How to Play</button>
|
||||
</div>
|
||||
<p class="menu-foot">An original cozy management sim · runs entirely in your browser · progress autosaves</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modals -->
|
||||
<div id="modal-root"></div>
|
||||
</div>
|
||||
<script src="js/util.js"></script>
|
||||
<script src="js/data.js"></script>
|
||||
<script src="js/audio.js"></script>
|
||||
<script src="js/sprites.js"></script>
|
||||
<script src="js/world.js"></script>
|
||||
<script src="js/entities.js"></script>
|
||||
<script src="js/sim.js"></script>
|
||||
<script src="js/render.js"></script>
|
||||
<script src="js/input.js"></script>
|
||||
<script src="js/ui.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user