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

Веб-приложение для создания и редактирования карт. Работает без сервера, просто откройте в браузере.

Примечание: Для визуализации решений используйте Визуализатор решений.

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

# Запуск редактора
./open-editor.sh
# или
firefox index.html

Три простых шага:

Установите размеры (5-100), выберите тип ячейки из палитры
Рисуйте мышью на карте (обязательно добавьте точку старта)
Нажмите "Экспорт JSON" - файл скачается автоматически

🎨 Типы ячеек

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

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

Рисование:

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

Экспорт/Импорт:

Экспорт: нажмите "Экспорт JSON" (также выводится в консоль F12)
Импорт: нажмите "Импорт JSON" и выберите файл

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

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

📄 Формат 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 (типы ячеек)

🔗 Интеграция с C#

using System.Text.Json;

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

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

🎯 Файлы проекта

Файл	Описание
`index.html`	Главная страница редактора
`editor.js`	Логика редактора и визуализация
`open-editor.sh`	Скрипт для быстрого запуска
`demo-with-start.json`	Демонстрационная карта 15×15

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

✅ Современный интерфейс, работает без сервера
✅ Интуитивное рисование мышью
✅ Валидация данных при импорте
✅ Автоматическое сохранение с именем по размеру
✅ HTML5 Canvas, Vanilla JavaScript (ES6+)

🔗 Связанные проекты

Визуализатор решений - анимация решений
Основной проект - C# решатель на основе A*

Технологии: HTML5, CSS3, JavaScript ES6+, Canvas API

3.9 KiB Raw Blame History Unescape Escape