Arcane Tycoon — Heroes & Magic theme park tycoon game

Complete browser game inspired by OpenRCT2 with fantasy twist:
- Custom roller coaster designer with physics-based ratings + on-ride POV
- 10 animated rides, 7 shops, 16 scenery items, path network & guest AI
- Heroes guild vs monster invasions (5 classes, XP/gear/bosses)
- Magic spell system (8 spells), research tree, economy/marketing/loans
- Day-night cycle, weather, park rating, awards, 4 scenarios
- Save/load slots + autosave, procedural WebAudio SFX/music
- Isometric canvas renderer, minimap, diagnostics overlay
- Test suites: smoke(13), linkcheck, inputcheck, framecheck, rendercheck, flow
This commit is contained in:
2026-08-23 06:59:21 +00:00
commit ac00687480
30 changed files with 6772 additions and 0 deletions
+95
View File
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Arcane Tycoon — Heroes &amp; Magic Theme Park</title>
<meta name="description" content="Build the ultimate fantasy theme park: design roller coasters, manage guests, recruit heroes and cast powerful spells.">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎡</text></svg>">
</head>
<body>
<div id="app">
<canvas id="game"></canvas>
<!-- ===== TOP HUD ===== -->
<div id="topbar" class="hidden">
<div class="hud-group brand" title="Arcane Tycoon">✦ Arcane Tycoon</div>
<div class="hud-group stat" id="stat-cash" title="Park cash">💰 <span></span></div>
<div class="hud-group stat" id="stat-guests" title="Guests in park">🧑‍🤝‍🧑 <span>0</span></div>
<div class="hud-group stat" id="stat-rating" title="Park rating"><span>0</span></div>
<div class="hud-group stat" id="stat-mana" title="Mana — grows with ley pools &amp; magic scenery">
<span class="mana-icon">🔮</span><div class="mana-bar"><div id="mana-fill"></div></div><span id="mana-num">0/50</span>
</div>
<div class="hud-group stat" id="stat-weather" title="Weather">☀️</div>
<div class="hud-group stat clock" id="stat-date" title="Date & time">📅 </div>
<div class="spacer"></div>
<button class="hbtn" id="btn-pause" title="Pause / resume (Space)"></button>
<div id="speed-group">
<button class="hbtn spd active" data-speed="1" title="Normal speed (1)"></button>
<button class="hbtn spd" data-speed="2" title="Fast speed (2)">▶▶</button>
<button class="hbtn spd" data-speed="3" title="Very fast (3)">▶▶▶</button>
</div>
<button class="hbtn" id="btn-research" title="Research (T)">🔬</button>
<button class="hbtn" id="btn-finance" title="Finances (F)">📈</button>
<button class="hbtn" id="btn-heroes" title="Hero Guild (G)">🛡️</button>
<button class="hbtn" id="btn-objectives" title="Objectives">🏆</button>
<button class="hbtn" id="btn-park" title="Park settings">⚙️</button>
<button class="hbtn" id="btn-save" title="Save / Load (Ctrl+S)">💾</button>
<button class="hbtn" id="btn-help" title="How to play (H)"></button>
</div>
<!-- ===== MINIMAP ===== -->
<div id="minimap-wrap" class="hidden"><canvas id="minimap" width="180" height="180"></canvas></div>
<!-- ===== BOTTOM TOOLBAR ===== -->
<div id="toolbar" class="hidden">
<button class="tbtn tool-select active" data-tool="select" title="Select / inspect (Esc)">🖱️<span>Select</span></button>
<button class="tbtn" data-tool="path" title="Build paths">🧱<span>Paths</span></button>
<button class="tbtn" data-tool="coaster" title="Custom coaster designer">🎢<span>Coaster</span></button>
<button class="tbtn" data-tool="ride" title="Build rides">🎠<span>Rides</span></button>
<button class="tbtn" data-tool="shop" title="Build shops">🍔<span>Shops</span></button>
<button class="tbtn" data-tool="scenery" title="Place scenery">🌳<span>Scenery</span></button>
<button class="tbtn" data-tool="terrain" title="Terrain tools">⛰️<span>Terrain</span></button>
<button class="tbtn" data-tool="staff" title="Hire staff">🧹<span>Staff</span></button>
<button class="tbtn" data-tool="heroes" title="Heroes & invasions">⚔️<span>Heroes</span></button>
<button class="tbtn" data-tool="magic" title="Cast spells"><span>Magic</span></button>
</div>
<!-- Build palette panel -->
<div id="palette" class="hidden">
<div class="pal-head"><span id="pal-title">Build</span><button id="pal-close" title="Close"></button></div>
<div id="pal-body"></div>
</div>
<!-- Context / selection panel -->
<div id="context-panel" class="hidden"></div>
<!-- Tool hint bar -->
<div id="tool-hint" class="hidden"></div>
<!-- Toasts -->
<div id="toasts"></div>
<!-- Generic modal root -->
<div id="modal-root" class="hidden"></div>
<!-- ===== MAIN MENU ===== -->
<div id="main-menu">
<div class="mm-inner">
<h1 class="mm-title">ARCANE TYCOON</h1>
<div class="mm-sub">Heroes · Magic · Roller Coasters</div>
<div class="mm-buttons">
<button id="mm-new" class="big-btn">🏰 New Game</button>
<button id="mm-continue" class="big-btn hidden">↻ Continue</button>
<button id="mm-how" class="big-btn ghost">📖 How to Play</button>
</div>
<div class="mm-credit">Inspired by classic theme-park tycoon games · Built for the web</div>
</div>
</div>
<!-- Scenario picker modal is rendered by ui.js into #modal-root -->
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>