261 lines
9.8 KiB
Markdown
261 lines
9.8 KiB
Markdown
# 🗺️ Редактор карт для "Гонки на бумаге"
|
||
|
||
Веб-приложение для создания и редактирования карт для игры "Гонки на бумаге".
|
||
|
||
## 🚀 Быстрый старт
|
||
|
||
Просто откройте `index.html` в браузере. Никаких зависимостей или установки не требуется!
|
||
|
||
```bash
|
||
# Из папки 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
|
||
|
||
```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 файл с массивом векторов ускорений:
|
||
|
||
```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# коде:
|
||
|
||
```csharp
|
||
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. Откройте редактор:
|
||
```bash
|
||
./open-editor.sh
|
||
# или просто откройте index.html в браузере
|
||
```
|
||
|
||
2. Загрузите карту с примером:
|
||
- Нажмите "Импорт JSON"
|
||
- Выберите `demo-with-start.json`
|
||
|
||
3. Загрузите решение:
|
||
- Нажмите "Загрузить решение"
|
||
- Выберите `example-solution.json`
|
||
|
||
4. Запустите визуализацию:
|
||
- Нажмите ▶ Play
|
||
- Наблюдайте за движением
|
||
- Экспериментируйте со скоростью и пошаговым режимом
|
||
|
||
## 🔧 Создание собственного решения
|
||
|
||
Пример структуры файла решения:
|
||
|
||
```json
|
||
{
|
||
"solution": [
|
||
[1, 0], // ускорение вправо
|
||
[1, 0], // еще ускорение вправо (скорость нарастает)
|
||
[0, 1], // ускорение вниз
|
||
[-1, 0], // торможение по X
|
||
[0, 0] // без ускорения (движение по инерции)
|
||
]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
Создано для проекта [Racing](../README.md)
|
||
|