139 lines
4.9 KiB
Markdown
139 lines
4.9 KiB
Markdown
# Isometric RPG 2.5D на HTML5 Canvas
|
||
|
||
## 📋 Описание проекта
|
||
|
||
Полноценная изометрическая RPG-игра в 2.5D стиле, созданная на чистом JavaScript с использованием HTML5 Canvas. Игра включает систему классов, инвентарь, экипировку, боевую систему, квесты и несколько локаций.
|
||
|
||
---
|
||
|
||
## 🎮 Особенности игры
|
||
|
||
### Изометрическая графика
|
||
- Псевдо-3D (2.5D) изометрическая проекция
|
||
- Текстуры для тайлов и объектов
|
||
- Система освещения (день/ночь)
|
||
- Погодные эффекты (дождь, снег)
|
||
|
||
### Система классов
|
||
6 уникальных классов с разным стартовым снаряжением:
|
||
|
||
| Класс | Оружие | Стартовые статы |
|
||
|-------|--------|-----------------|
|
||
| Воин (Warrior) | Меч | STR:15, DEF:10 |
|
||
| Маг (Mage) | Посох | INT:15, DEF:5 |
|
||
| Лучник (Archer) | Лук | DEX:15, DEF:5 |
|
||
| Плут (Thief) | Кинжал | DEX:12, SPD:12 |
|
||
| Паладин (Paladin) | Булава | STR:12, DEF:12 |
|
||
| Некромант (Necromancer) | Посох | INT:12, DEF:8 |
|
||
|
||
### Инвентарь и экипировка
|
||
- 20 слотов в инвентаре
|
||
- 2 слота экипировки (оружие, щит)
|
||
- Цветовая кодировка редкости предметов (обычный → легендарный)
|
||
- Статы от экипировки добавляются к персонажу
|
||
- Клик для экипировки/снятия
|
||
|
||
### Боевая система
|
||
- Пошаговые бои
|
||
- Физический и магический урон
|
||
- Защита и сопротивление
|
||
- Заклинания для каждого класса
|
||
- Отображение HP с анимацией
|
||
|
||
### Квесты и локации
|
||
- 4 локации: Деревня, Лес, Подземелье, Пещера
|
||
- Порталы для быстрого перемещения (клавиша M)
|
||
- Система квестов с наградами
|
||
|
||
---
|
||
|
||
## 🎛 Управление
|
||
|
||
| Клавиша | Действие |
|
||
|---------|----------|
|
||
| **WASD / Стрелки** | Движение персонажа |
|
||
| **I** | Открыть инвентарь |
|
||
| **M** | Меню перемещения |
|
||
| **E** | Взаимодействие |
|
||
| **Пробел** | Атака / Пропустить |
|
||
| **ESC** | Закрыть меню |
|
||
|
||
---
|
||
|
||
## 🏗 Архитектура проекта
|
||
|
||
```
|
||
Рпг/
|
||
├── index.html # HTML с Canvas и UI
|
||
├── renderer.js # Изометрический рендерер
|
||
├── rpg.js # RPG-механики (классы, предметы, статы)
|
||
└── game.js # Основная логика игры
|
||
```
|
||
|
||
### Основные модули:
|
||
|
||
**renderer.js**
|
||
- Изометрическая проекция (2:1 соотношение)
|
||
- Текстуры тайлов
|
||
- Рендеринг персонажей и объектов
|
||
- День/ночь, погода
|
||
|
||
**rpg.js**
|
||
- `Character` - класс персонажа
|
||
- `Item` - система предметов
|
||
- `RPG` - основной класс с getTotalStats()
|
||
|
||
**game.js**
|
||
- Игровой цикл
|
||
- Обработка ввода
|
||
- UI (меню, диалоги, инвентарь)
|
||
- Локации и переходы
|
||
|
||
---
|
||
|
||
## 🎨 UI/UX
|
||
|
||
### Стартовое меню
|
||
- Сетка 3x2 с выбором класса
|
||
- Иконки классов
|
||
- Информация о стартовом оружии
|
||
- Кнопка продолжения игры
|
||
|
||
### Инвентарь
|
||
- Сетка предметов
|
||
- Слоты экипировки (крупные, справа)
|
||
- Подсказки при наведении
|
||
- Клик для экипировки
|
||
|
||
### Боевая система
|
||
- Кнопки действий
|
||
- Полосы HP
|
||
- Отображение урона
|
||
|
||
---
|
||
|
||
## 🔧 Технические детали
|
||
|
||
- **Canvas API** для рендеринга
|
||
- **requestAnimationFrame** для игрового цикла
|
||
- **localStorage** для сохранений
|
||
- **JSON** для данных предметов и квестов
|
||
|
||
---
|
||
|
||
## 🚀 Запуск
|
||
|
||
Просто откройте `index.html` в браузере. Никаких зависимостей не требуется.
|
||
|
||
---
|
||
|
||
## 📝 To-Do / Возможности для расширения
|
||
|
||
- [ ] Сохранение в localStorage
|
||
- [ ] Больше врагов и боссов
|
||
- [ ] Звуковые эффекты
|
||
- [ ] Анимации
|
||
- [ ] Система навыков
|
||
- [ ] Торговцы
|
||
- [ ] Крафтинг
|