167 lines
7.7 KiB
Markdown
167 lines
7.7 KiB
Markdown
# 🎯 Возможности редактора карт
|
||
|
||
## 🗺️ Редактирование карт
|
||
|
||
### Интерфейс редактора
|
||
- **Современный дизайн** с градиентами и анимациями
|
||
- **Адаптивная сетка** для различных размеров экрана
|
||
- **Интуитивные элементы управления** с подсказками
|
||
- **Цветовая палитра** для быстрого выбора типов ячеек
|
||
|
||
### Типы поверхностей
|
||
1. **Дорога (0)** - Обычная поверхность
|
||
2. **Камень (1)** - Непроходимое препятствие
|
||
3. **Снег (2)** - Поверхность с замедлением
|
||
4. **Лёд (3)** - Скользкая поверхность
|
||
5. **Чекпоинт (4)** - Контрольная точка маршрута
|
||
6. **Старт (5)** - Начальная точка движения
|
||
|
||
### Инструменты рисования
|
||
- **Одиночный клик** - установка одной ячейки
|
||
- **Перетаскивание мыши** - непрерывное рисование
|
||
- **Переключение типов** - мгновенный выбор из палитры
|
||
- **Изменение размеров** - от 5×5 до 100×100
|
||
- **Очистка карты** - быстрый сброс
|
||
|
||
### Импорт/Экспорт
|
||
- **JSON формат** - стандартный формат данных
|
||
- **Валидация** - проверка корректности при импорте
|
||
- **Автоматическое именование** - файлы именуются по размеру
|
||
- **Консольный вывод** - JSON доступен в консоли браузера (F12)
|
||
|
||
## 🎬 Визуализация решений
|
||
|
||
### Загрузка и симуляция
|
||
- **Формат решения** - массив векторов ускорения `[[ax, ay], ...]`
|
||
- **Физика движения** - точная симуляция инерции и ускорения
|
||
- **Поиск старта** - автоматическое определение начальной позиции
|
||
- **Валидация** - проверка корректности формата решения
|
||
|
||
### Элементы визуализации
|
||
|
||
#### Траектория движения
|
||
- 🔵 **Синяя линия** - пройденный путь
|
||
- 🔵 **Синие точки** - позиции на каждом шаге
|
||
- 🔴 **Красный круг** - текущая позиция (10px)
|
||
- ➡️ **Красная стрелка** - вектор скорости
|
||
|
||
#### Информационная панель
|
||
Показывает в реальном времени:
|
||
- **Номер шага** - текущий/всего
|
||
- **Позиция (x, y)** - координаты на карте
|
||
- **Скорость (vx, vy)** - вектор скорости
|
||
- **Ускорение (ax, ay)** - текущий вектор ускорения
|
||
|
||
### Управление воспроизведением
|
||
|
||
#### Кнопки управления
|
||
- **▶ Play** - автоматическое воспроизведение
|
||
- **⏸ Pause** - остановка воспроизведения
|
||
- **⏮ Reset** - возврат к началу
|
||
- **⏭ Step** - пошаговое движение вперёд
|
||
|
||
#### Настройки скорости
|
||
- **Slider** - регулятор от 1x до 10x
|
||
- **Динамическое изменение** - применяется на лету
|
||
- **Индикатор** - отображение текущей скорости
|
||
|
||
### Физическая модель
|
||
|
||
```
|
||
Начальное состояние:
|
||
position = start_cell
|
||
velocity = (0, 0)
|
||
|
||
На каждом шаге:
|
||
1. velocity += acceleration
|
||
2. position += velocity
|
||
|
||
Пример:
|
||
Шаг 0: pos=(0,0), vel=(0,0), acc=(0,0)
|
||
Шаг 1: acc=(1,1) → vel=(1,1) → pos=(1,1)
|
||
Шаг 2: acc=(1,0) → vel=(2,1) → pos=(3,2)
|
||
Шаг 3: acc=(0,1) → vel=(2,2) → pos=(5,4)
|
||
```
|
||
|
||
## 🎨 Визуальные эффекты
|
||
|
||
### Анимации
|
||
- **Плавные переходы** - smooth transitions на всех элементах
|
||
- **Hover эффекты** - поднятие кнопок при наведении
|
||
- **Пульсация** - текущая позиция выделяется
|
||
- **Градиенты** - современные цветовые переходы
|
||
|
||
### Цветовая схема
|
||
- **Основной фон** - градиент фиолетовый → пурпурный
|
||
- **Карточки** - белый с тенями и скруглением
|
||
- **Акценты** - фиолетовый (#667eea)
|
||
- **Траектория** - синий с прозрачностью
|
||
- **Текущая позиция** - ярко-красный (#f5576c)
|
||
|
||
## 🔧 Технические детали
|
||
|
||
### Canvas отрисовка
|
||
- **Размер ячейки** - 30px
|
||
- **Сглаживание** - anti-aliasing включён
|
||
- **Слои** - карта → траектория → маркеры
|
||
- **Обновление** - перерисовка только при изменении
|
||
|
||
### Производительность
|
||
- **Vanilla JS** - без тяжёлых фреймворков
|
||
- **Оптимизация** - минимум перерисовок
|
||
- **Память** - эффективное использование
|
||
- **Масштабируемость** - работает до 100×100
|
||
|
||
### Совместимость
|
||
- ✅ Chrome/Chromium
|
||
- ✅ Firefox
|
||
- ✅ Safari
|
||
- ✅ Edge
|
||
- ✅ Любой современный браузер с Canvas API
|
||
|
||
## 📊 Варианты использования
|
||
|
||
### Для разработчиков
|
||
1. Создание тестовых карт
|
||
2. Отладка алгоритмов поиска пути
|
||
3. Визуализация результатов решения
|
||
4. Демонстрация работы алгоритмов
|
||
|
||
### Для преподавателей
|
||
1. Демонстрация алгоритмов на лекциях
|
||
2. Создание заданий для студентов
|
||
3. Визуализация различных стратегий
|
||
4. Анализ оптимальности решений
|
||
|
||
### Для студентов
|
||
1. Понимание физики движения
|
||
2. Анализ работы алгоритмов
|
||
3. Сравнение различных решений
|
||
4. Отладка собственных реализаций
|
||
|
||
## 🚀 Преимущества
|
||
|
||
### Простота использования
|
||
- **Без установки** - работает в браузере
|
||
- **Без зависимостей** - pure HTML/CSS/JS
|
||
- **Интуитивный UI** - понятен с первого взгляда
|
||
- **Примеры** - готовые карты и решения
|
||
|
||
### Функциональность
|
||
- **Полный цикл** - от создания до визуализации
|
||
- **Гибкость** - настройка всех параметров
|
||
- **Точность** - корректная физическая модель
|
||
- **Наглядность** - понятное отображение данных
|
||
|
||
### Расширяемость
|
||
- **Открытый код** - легко модифицировать
|
||
- **Модульность** - чёткая структура функций
|
||
- **Документация** - подробные комментарии
|
||
- **Примеры** - образцы для кастомизации
|
||
|
||
---
|
||
|
||
🎯 **Итог**: Мощный и удобный инструмент для работы с картами гонок и визуализации решений!
|
||
|
||
|