4.9 KiB
4.9 KiB
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
- Больше врагов и боссов
- Звуковые эффекты
- Анимации
- Система навыков
- Торговцы
- Крафтинг