243 lines
9.3 KiB
HTML
243 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Бомж RPG — Выживание в городе</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<!-- Главный экран -->
|
||
<div id="menu-screen">
|
||
<div class="menu-content">
|
||
<h1>БОМЖ RPG</h1>
|
||
<p class="subtitle">Выживание в большом городе</p>
|
||
<div class="menu-version">v2.0</div>
|
||
<button id="btn-start" class="menu-btn">Начать игру</button>
|
||
<button id="btn-continue" class="menu-btn hidden">Продолжить</button>
|
||
<button id="btn-controls" class="menu-btn">Управление</button>
|
||
</div>
|
||
<div id="controls-panel" class="hidden">
|
||
<h2>Управление</h2>
|
||
<ul>
|
||
<li><kbd>W A S D</kbd> — Движение</li>
|
||
<li><kbd>Мышь</kbd> — Обзор камеры</li>
|
||
<li><kbd>E</kbd> — Взаимодействие</li>
|
||
<li><kbd>I</kbd> — Инвентарь / Экипировка</li>
|
||
<li><kbd>Q</kbd> — Журнал квестов</li>
|
||
<li><kbd>Shift</kbd> — Бег</li>
|
||
<li><kbd>F</kbd> — Попросить милостыню</li>
|
||
<li><kbd>G</kbd> — Играть на гармошке (бускинг)</li>
|
||
<li><kbd>J</kbd> — Навыки</li>
|
||
<li><kbd>U</kbd> — Достижения</li>
|
||
<li><kbd>Space</kbd> — Дать отпор</li>
|
||
<li><kbd>H</kbd> — Отменить работу</li>
|
||
<li><kbd>F5</kbd> — Сохранить</li>
|
||
<li><kbd>M</kbd> — Звук вкл/выкл</li>
|
||
</ul>
|
||
<button id="btn-back" class="menu-btn">Назад</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Игровой Canvas -->
|
||
<canvas id="game-canvas"></canvas>
|
||
|
||
<!-- Прицел -->
|
||
<div id="crosshair"></div>
|
||
|
||
<!-- Экранные эффекты -->
|
||
<div id="screen-effects">
|
||
<div id="effect-damage"></div>
|
||
<div id="effect-cold"></div>
|
||
<div id="effect-hunger"></div>
|
||
<div id="effect-sleep"></div>
|
||
<div id="effect-disease"></div>
|
||
</div>
|
||
|
||
<!-- HUD -->
|
||
<div id="hud" class="hidden">
|
||
<div id="stats-panel">
|
||
<div class="stat-bar" data-stat="health">
|
||
<span class="stat-icon">❤️</span>
|
||
<span class="stat-label">Здоровье</span>
|
||
<div class="bar-bg"><div class="bar-fill health" id="bar-health"></div></div>
|
||
<span class="stat-value" id="val-health">100</span>
|
||
</div>
|
||
<div class="stat-bar" data-stat="hunger">
|
||
<span class="stat-icon">🍖</span>
|
||
<span class="stat-label">Сытость</span>
|
||
<div class="bar-bg"><div class="bar-fill hunger" id="bar-hunger"></div></div>
|
||
<span class="stat-value" id="val-hunger">100</span>
|
||
</div>
|
||
<div class="stat-bar" data-stat="warmth">
|
||
<span class="stat-icon">🔥</span>
|
||
<span class="stat-label">Тепло</span>
|
||
<div class="bar-bg"><div class="bar-fill warmth" id="bar-warmth"></div></div>
|
||
<span class="stat-value" id="val-warmth">100</span>
|
||
</div>
|
||
<div class="stat-bar" data-stat="mood">
|
||
<span class="stat-icon">😊</span>
|
||
<span class="stat-label">Настроение</span>
|
||
<div class="bar-bg"><div class="bar-fill mood" id="bar-mood"></div></div>
|
||
<span class="stat-value" id="val-mood">50</span>
|
||
</div>
|
||
<div class="stat-bar" data-stat="hygiene">
|
||
<span class="stat-icon">🧼</span>
|
||
<span class="stat-label">Гигиена</span>
|
||
<div class="bar-bg"><div class="bar-fill hygiene" id="bar-hygiene"></div></div>
|
||
<span class="stat-value" id="val-hygiene">100</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Правый верхний блок -->
|
||
<div id="top-right-hud">
|
||
<div id="money-display">
|
||
<span class="money-icon">💰</span>
|
||
<span id="val-money">0</span>
|
||
<span class="money-currency">₽</span>
|
||
</div>
|
||
<div id="time-display">
|
||
<span id="val-weather">☀️</span>
|
||
<span id="val-time">08:00</span>
|
||
<span class="time-separator">|</span>
|
||
<span id="val-day">День 1</span>
|
||
</div>
|
||
<div id="temp-display">
|
||
<span id="val-temp">15°C</span>
|
||
<span id="val-season">🍂 Осень</span>
|
||
</div>
|
||
<div id="protection-display">
|
||
<span>🛡️</span> <span id="val-protection">0</span>%
|
||
<span class="sep">|</span>
|
||
<span>🔥</span> <span id="val-warmth-bonus">0</span>
|
||
</div>
|
||
<div id="reputation-display"></div>
|
||
</div>
|
||
|
||
<!-- Трекер квеста -->
|
||
<div id="quest-tracker">
|
||
<div id="tracker-title"></div>
|
||
<div id="tracker-progress"></div>
|
||
<div id="tracker-bar"><div id="tracker-fill"></div></div>
|
||
</div>
|
||
|
||
<!-- Миникарта -->
|
||
<div id="minimap-container">
|
||
<canvas id="minimap" width="180" height="180"></canvas>
|
||
<div id="minimap-label">Миникарта</div>
|
||
</div>
|
||
|
||
<div id="interaction-hint" class="hidden">
|
||
<kbd>E</kbd> <span id="hint-text">Взаимодействовать</span>
|
||
</div>
|
||
|
||
<!-- Компас -->
|
||
<div id="compass">
|
||
<div id="compass-ring">
|
||
<span id="compass-dir">С</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Быстрые кнопки -->
|
||
<div id="hotbar">
|
||
<div class="hotbar-item" title="Инвентарь (I)">🎒</div>
|
||
<div class="hotbar-item" title="Квесты (Q)">📋</div>
|
||
<div class="hotbar-item" title="Навыки (J)">⚡</div>
|
||
<div class="hotbar-item" title="Достижения (U)">🏆</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Тултип -->
|
||
<div id="tooltip" class="hidden">
|
||
<div id="tooltip-title"></div>
|
||
<div id="tooltip-desc"></div>
|
||
<div id="tooltip-stats"></div>
|
||
</div>
|
||
|
||
<!-- Диалоговое окно -->
|
||
<div id="dialog-box" class="hidden">
|
||
<div class="dialog-content">
|
||
<div id="dialog-speaker"></div>
|
||
<div id="dialog-text"></div>
|
||
<div id="dialog-choices"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Инвентарь -->
|
||
<div id="inventory-screen" class="hidden">
|
||
<div class="inventory-content">
|
||
<div class="panel-header">
|
||
<h2>🎒 Инвентарь</h2>
|
||
<span class="panel-close" id="btn-close-inv">×</span>
|
||
</div>
|
||
<div id="inventory-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Журнал квестов -->
|
||
<div id="quest-screen" class="hidden">
|
||
<div class="quest-content">
|
||
<div class="panel-header">
|
||
<h2>📋 Квесты</h2>
|
||
<span class="panel-close" id="btn-close-quest">×</span>
|
||
</div>
|
||
<div id="quest-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Навыки -->
|
||
<div id="skills-screen" class="hidden">
|
||
<div class="skills-content">
|
||
<div class="panel-header">
|
||
<h2>⚡ Навыки</h2>
|
||
<span class="panel-close" id="btn-close-skills">×</span>
|
||
</div>
|
||
<div id="skills-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Достижения -->
|
||
<div id="achievements-screen" class="hidden">
|
||
<div class="achievements-content">
|
||
<div class="panel-header">
|
||
<h2>🏆 Достижения</h2>
|
||
<span class="panel-close" id="btn-close-achievements">×</span>
|
||
</div>
|
||
<div id="achievements-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Интро -->
|
||
<div id="intro-overlay" class="hidden">
|
||
<div class="intro-content">
|
||
<div id="intro-text"></div>
|
||
<button id="btn-skip-intro" class="menu-btn">Пропустить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Уведомления -->
|
||
<div id="notifications"></div>
|
||
|
||
<!-- Экран смерти -->
|
||
<div id="death-screen" class="hidden">
|
||
<div class="death-content">
|
||
<div class="death-icon">💀</div>
|
||
<h1>Вы не выжили...</h1>
|
||
<p id="death-reason"></p>
|
||
<div id="death-stats"></div>
|
||
<button id="btn-restart" class="menu-btn">Начать заново</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|