7.7 KiB
7.7 KiB
🎯 Возможности редактора карт
🗺️ Редактирование карт
Интерфейс редактора
- Современный дизайн с градиентами и анимациями
- Адаптивная сетка для различных размеров экрана
- Интуитивные элементы управления с подсказками
- Цветовая палитра для быстрого выбора типов ячеек
Типы поверхностей
- Дорога (0) - Обычная поверхность
- Камень (1) - Непроходимое препятствие
- Снег (2) - Поверхность с замедлением
- Лёд (3) - Скользкая поверхность
- Чекпоинт (4) - Контрольная точка маршрута
- Старт (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
📊 Варианты использования
Для разработчиков
- Создание тестовых карт
- Отладка алгоритмов поиска пути
- Визуализация результатов решения
- Демонстрация работы алгоритмов
Для преподавателей
- Демонстрация алгоритмов на лекциях
- Создание заданий для студентов
- Визуализация различных стратегий
- Анализ оптимальности решений
Для студентов
- Понимание физики движения
- Анализ работы алгоритмов
- Сравнение различных решений
- Отладка собственных реализаций
🚀 Преимущества
Простота использования
- Без установки - работает в браузере
- Без зависимостей - pure HTML/CSS/JS
- Интуитивный UI - понятен с первого взгляда
- Примеры - готовые карты и решения
Функциональность
- Полный цикл - от создания до визуализации
- Гибкость - настройка всех параметров
- Точность - корректная физическая модель
- Наглядность - понятное отображение данных
Расширяемость
- Открытый код - легко модифицировать
- Модульность - чёткая структура функций
- Документация - подробные комментарии
- Примеры - образцы для кастомизации
🎯 Итог: Мощный и удобный инструмент для работы с картами гонок и визуализации решений!