106 lines
3.9 KiB
Markdown
106 lines
3.9 KiB
Markdown
# 🗺️ Редактор карт для "Гонки на бумаге"
|
||
|
||
Веб-приложение для создания и редактирования карт. Работает без сервера, просто откройте в браузере.
|
||
|
||
> **Примечание:** Для визуализации решений используйте [Визуализатор решений](../solution-player/).
|
||
|
||
## 🚀 Быстрый старт
|
||
|
||
```bash
|
||
# Запуск редактора
|
||
./open-editor.sh
|
||
# или
|
||
firefox index.html
|
||
```
|
||
|
||
**Три простых шага:**
|
||
1. Установите размеры (5-100), выберите тип ячейки из палитры
|
||
2. Рисуйте мышью на карте (обязательно добавьте точку старта)
|
||
3. Нажмите "Экспорт JSON" - файл скачается автоматически
|
||
|
||
## 🎨 Типы ячеек
|
||
|
||
| Код | Тип | Описание | Цвет | Маркер |
|
||
|-----|-----|----------|------|--------|
|
||
| 0 | Дорога | Обычная дорога | Светло-серый | - |
|
||
| 1 | Камень | Препятствие (непроходимо) | Тёмно-серый | - |
|
||
| 2 | Снег | Замедление движения | Голубой | - |
|
||
| 3 | Лёд | Скользкая поверхность | Светло-голубой | - |
|
||
| 4 | Чекпоинт | Контрольная точка | Жёлтый | C |
|
||
| 5 | Старт | Точка старта | Зелёный | S |
|
||
|
||
## 📖 Использование
|
||
|
||
**Рисование:**
|
||
- Выберите тип ячейки из палитры
|
||
- Кликните на ячейку или удерживайте мышь для быстрого рисования
|
||
|
||
**Экспорт/Импорт:**
|
||
- Экспорт: нажмите "Экспорт JSON" (также выводится в консоль F12)
|
||
- Импорт: нажмите "Импорт JSON" и выберите файл
|
||
|
||
**Изменение размеров:**
|
||
- Укажите ширину и высоту (5-100), нажмите "Применить"
|
||
- Существующие данные сохранятся при изменении размера
|
||
|
||
## 📄 Формат JSON
|
||
|
||
```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#
|
||
|
||
```csharp
|
||
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+)
|
||
|
||
## 🔗 Связанные проекты
|
||
|
||
- [Визуализатор решений](../solution-player/) - анимация решений
|
||
- [Основной проект](../README.md) - C# решатель на основе A*
|
||
|
||
---
|
||
|
||
**Технологии:** HTML5, CSS3, JavaScript ES6+, Canvas API
|