paper-racing-gpi/map-editor

🗺️ Редактор карт для "Гонки на бумаге"

Веб-приложение для создания и редактирования карт для игры "Гонки на бумаге".

🚀 Быстрый старт

Просто откройте index.html в браузере. Никаких зависимостей или установки не требуется!

# Из папки map-editor
firefox index.html
# или
chrome index.html
# или просто откройте файл двойным кликом

📖 Инструкция

Типы ячеек

Тип	Код	Описание	Цвет
Дорога	0	Обычная дорога	Светло-серый
Камень	1	Препятствие (непроходимо)	Тёмно-серый
Снег	2	Замедление движения	Голубой
Лёд	3	Скользкая поверхность	Светло-голубой
Чекпоинт	4	Контрольная точка	Жёлтый с "C"
Старт	5	Точка старта	Зелёный с "S"

Использование

1. Изменение размеров:

   • Укажите ширину и высоту карты (5-100)
   • Нажмите "Применить"
   • Существующие данные сохранятся при изменении размера

2. Рисование:

   • Выберите тип ячейки из палитры
   • Кликните на ячейку для изменения типа
   • Удерживайте кнопку мыши для рисования

3. Экспорт:

   • Нажмите "Экспорт JSON"
   • Файл автоматически скачается
   • JSON также выводится в консоль браузера (F12)

4. Импорт:

   • Нажмите "Импорт JSON"
   • Выберите JSON файл
   • Карта загрузится автоматически

5. Визуализация решения:

   • Убедитесь, что на карте есть точка старта (тип 5)
   • Нажмите "Загрузить решение"
   • Выберите JSON файл с решением
   • Используйте кнопки управления:
     • ▶ Play - автоматическое воспроизведение
     • ⏸ Pause - пауза
     • ⏮ Reset - сброс к началу
     • ⏭ Step - шаг вперед
   • Регулируйте скорость воспроизведения (1x - 10x)

📄 Формат JSON

{
  "map": [
    [0, 0, 0, 1, 0],
    [5, 1, 0, 1, 0],
    [0, 0, 2, 2, 4],
    [1, 0, 3, 3, 0],
    [0, 0, 0, 0, 0]
  ]
}

Структура карты:

• map - двумерный массив целых чисел (int[][])
• Каждая строка массива = строка карты
• Каждый элемент = тип ячейки (0-5)
• Первая строка = верхняя строка карты
• Первый элемент в строке = левая ячейка

🎬 Формат решения

Решение представляет собой JSON файл с массивом векторов ускорений:

{
  "solution": [
    [1, 1],
    [1, 0],
    [0, 1],
    [-1, 0],
    [0, -1]
  ]
}

Структура решения:

• solution - массив векторов ускорения [[ax, ay], ...]
• Каждый элемент - вектор ускорения [ax, ay]
• ax, ay - целые числа (обычно от -1 до 1)
• Применяются последовательно от точки старта

Физика движения:

1. Начальная позиция - ячейка с типом 5 (старт)
2. Начальная скорость = (0, 0)
3. На каждом шаге:
   • velocity += acceleration
   • 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)

Визуализация показывает:

• 🔵 Синяя линия - пройденная траектория
• 🔴 Красный круг - текущая позиция
• ➡️ Красная стрелка - направление и скорость движения
• Информацию о шаге, позиции, скорости и ускорении

🎨 Особенности

Редактор карт:

• ✅ Современный красивый интерфейс
• ✅ Интуитивное рисование мышью
• ✅ Валидация данных при импорте
• ✅ Автоматическое сохранение с именем по размеру
• ✅ Вывод JSON в консоль для быстрого копирования
• ✅ Адаптивный дизайн
• ✅ Сохранение данных при изменении размера
• ✅ 6 типов ячеек (дорога, камень, снег, лёд, чекпоинт, старт)

Визуализация решений:

• ✅ Пошаговое воспроизведение траектории
• ✅ Регулируемая скорость воспроизведения (1x - 10x)
• ✅ Отображение вектора скорости в реальном времени
• ✅ Информация о позиции, скорости и ускорении на каждом шаге
• ✅ Плавная анимация движения
• ✅ Визуализация пройденного пути
• ✅ Управление: Play, Pause, Reset, Step

Технологии:

• ✅ Работает без сервера (pure HTML/JS/CSS)
• ✅ HTML5 Canvas для отрисовки
• ✅ Vanilla JavaScript (ES6+)
• ✅ FileReader API для импорта
• ✅ Blob API для экспорта

💡 Советы

Работа с картами:

• Используйте консоль браузера (F12) для просмотра экспортированного JSON
• При импорте проверяются все значения ячеек (только 0-5)
• Все строки карты должны иметь одинаковую длину
• Максимальный размер карты: 100×100
• Минимальный размер карты: 5×5
• Рекомендуется устанавливать одну точку старта (5) на карте

Работа с визуализацией:

• Сначала создайте или загрузите карту с точкой старта
• Решение загружайте из отдельного JSON файла
• Используйте Step для детального анализа каждого шага
• Регулируйте скорость для комфортного просмотра
• Красная стрелка показывает направление и скорость движения
• Точка старта должна совпадать с началом траектории решения
• Примеры решений: example-solution.json, complex-solution.json

🔗 Интеграция с игрой

Экспортированный JSON можно использовать в C# коде:

using System.Text.Json;

var json = File.ReadAllText("racing-map-15x15.json");
var mapData = JsonSerializer.Deserialize<MapData>(json);
int[][] map = mapData.map;

// Использование карты
for (int y = 0; y < map.Length; y++)
{
    for (int x = 0; x < map[y].Length; x++)
    {
        int cellType = map[y][x];
        // обработка...
    }
}

public class MapData
{
    public int[][] map { get; set; }
}

🛠️ Технологии

• HTML5 Canvas
• Vanilla JavaScript (ES6+)
• CSS3 с градиентами и анимациями
• FileReader API для импорта
• Blob API для экспорта

📝 Файлы примеров

Карты:

• simple-track.json - Простая трасса 10×10
• demo-with-start.json - Демонстрационная карта 15×15
• example-maps.json - Коллекция различных карт

Решения:

• example-solution.json - Простое решение на 10 шагов
• complex-solution.json - Сложное решение на 20 шагов

🎯 Быстрый старт с визуализацией

1. Откройте редактор:

   ./open-editor.sh
   # или просто откройте index.html в браузере
   

2. Загрузите карту с примером:

   • Нажмите "Импорт JSON"
   • Выберите demo-with-start.json

3. Загрузите решение:

   • Нажмите "Загрузить решение"
   • Выберите example-solution.json

4. Запустите визуализацию:

   • Нажмите ▶ Play
   • Наблюдайте за движением
   • Экспериментируйте со скоростью и пошаговым режимом

🔧 Создание собственного решения

Пример структуры файла решения:

{
  "solution": [
    [1, 0],   // ускорение вправо
    [1, 0],   // еще ускорение вправо (скорость нарастает)
    [0, 1],   // ускорение вниз
    [-1, 0],  // торможение по X
    [0, 0]    // без ускорения (движение по инерции)
  ]
}

---

Создано для проекта Racing