init
This commit is contained in:
260
map-editor/README.md
Normal file
260
map-editor/README.md
Normal file
@@ -0,0 +1,260 @@
|
||||
# 🗺️ Редактор карт для "Гонки на бумаге"
|
||||
|
||||
Веб-приложение для создания и редактирования карт для игры "Гонки на бумаге".
|
||||
|
||||
## 🚀 Быстрый старт
|
||||
|
||||
Просто откройте `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)
|
||||
|
||||
Reference in New Issue
Block a user