v0.1.0 — M1: Project Setup + Tilemap + Combat + Backend
Frontend: - HTML5 Canvas isometric tilemap renderer - Eichenhafen starting city (procedural) - Click-to-move A* pathfinding - Player stats, HP/SP/EXP bars, skill bar, minimap - 3 NPCs (merchant, class master, innkeeper) - 6 monster spawns with aggro AI - Combat: auto-attack, damage numbers, EXP/gold - Player death + respawn Backend: - FastAPI server with SQLite - Ollama LLM bridge for events + dialogue - Event validation (no soft-lock) - NPC dialogue generation Design: - Full DESIGN.md with architecture, formulas, milestones - 6 base classes + 6 advanced classes - 3 fixed cities, dynamic events
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aether Chronicles</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="game-container">
|
||||
<canvas id="game-canvas" width="960" height="640"></canvas>
|
||||
|
||||
<!-- UI Overlay -->
|
||||
<div id="ui-overlay">
|
||||
<!-- HP/SP Bars -->
|
||||
<div id="status-bars">
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">HP</span>
|
||||
<div class="bar-container">
|
||||
<div id="hp-bar" class="bar-fill hp-fill"></div>
|
||||
<span id="hp-text" class="bar-text">100/100</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">SP</span>
|
||||
<div class="bar-container">
|
||||
<div id="sp-bar" class="bar-fill sp-fill"></div>
|
||||
<span id="sp-text" class="bar-text">50/50</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">EXP</span>
|
||||
<div class="bar-container">
|
||||
<div id="exp-bar" class="bar-fill exp-fill"></div>
|
||||
<span id="exp-text" class="bar-text">0/100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Bar -->
|
||||
<div id="skill-bar">
|
||||
<div class="skill-slot" data-slot="1">1</div>
|
||||
<div class="skill-slot" data-slot="2">2</div>
|
||||
<div class="skill-slot" data-slot="3">3</div>
|
||||
<div class="skill-slot" data-slot="4">4</div>
|
||||
<div class="skill-slot" data-slot="5">5</div>
|
||||
<div class="skill-slot" data-slot="6">6</div>
|
||||
<div class="skill-slot" data-slot="7">7</div>
|
||||
<div class="skill-slot" data-slot="8">8</div>
|
||||
<div class="skill-slot" data-slot="9">9</div>
|
||||
<div class="skill-slot" data-slot="0">0</div>
|
||||
</div>
|
||||
|
||||
<!-- Minimap -->
|
||||
<div id="minimap-container">
|
||||
<canvas id="minimap" width="120" height="120"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Chat / Event Log -->
|
||||
<div id="event-log">
|
||||
<div id="event-messages"></div>
|
||||
</div>
|
||||
|
||||
<!-- Character Info -->
|
||||
<div id="char-info">
|
||||
<div id="char-name">Wanderer</div>
|
||||
<div id="char-level">Lv. 1</div>
|
||||
<div id="char-class">Wanderer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/tilemap.js"></script>
|
||||
<script src="js/camera.js"></script>
|
||||
<script src="js/player.js"></script>
|
||||
<script src="js/input.js"></script>
|
||||
<script src="js/game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user