🗺️ Редактор карт для "Гонки на бумаге"
Веб-приложение для создания и редактирования карт. Работает без сервера, просто откройте в браузере.
Примечание: Для визуализации решений используйте Визуализатор решений.
🚀 Быстрый старт
# Запуск редактора
./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