deepseek
ac00687480
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
96 lines
4.8 KiB
HTML
96 lines
4.8 KiB
HTML
<!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 & 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 & 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>
|