# 🎬 Визуализатор решений - Гонки на бумаге

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

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

```bash
# Запуск визуализатора
./open-player.sh
# или
firefox index.html
```

**Три простых шага:**
1. Загрузите карту (📂 Загрузить карту) - файл с полем
2. Загрузите решение (🎬 Загрузить решение) - файл с траекторией
3. Нажмите ▶ Play и наблюдайте за движением

## 🎮 Управление

| Кнопка | Действие |
|--------|----------|
| ▶ Play | Автоматическое воспроизведение |
| ⏸ Pause | Пауза |
| ⏮ Reset | Сброс к началу |
| ⏪ Back | Шаг назад |
| ⏩ Forward | Шаг вперед |
| Слайдер | Скорость 1x - 10x |

## 📊 Визуализация

- 🔵 **Синяя линия и точки** - пройденная траектория
- 🔴 **Красный круг** - текущая позиция
- ➡️ **Красная стрелка** - вектор скорости (направление и величина)
- **Панель информации** - шаг, позиция (x, y), скорость (vx, vy), ускорение (ax, ay)

## 📄 Форматы файлов

### Формат карты
```json
{
  "map": [
    [5, 0, 0, 1, 0],
    [0, 1, 0, 1, 0],
    [0, 0, 2, 2, 4]
  ]
}
```

**Типы ячеек:** 0-Дорога, 1-Камень, 2-Снег, 3-Лёд, 4-Чекпоинт, 5-Старт (обязательно!)

### Формат решения
```json
{
  "solution": [
    [1, 1],
    [1, 0],
    [0, 1]
  ]
}
```

**Структура:** массив векторов ускорения `[[ax, ay], ...]` где `ax`, `ay` - целые числа (обычно от -1 до 1)

### Физика движения

На каждом шаге:
```
velocity += acceleration
position += velocity
```

**Пример:**
```
Шаг 0: pos=(0,0), vel=(0,0)
Шаг 1: acc=(1,1) → vel=(1,1) → pos=(1,1)
Шаг 2: acc=(1,0) → vel=(2,1) → pos=(3,2)
```

## 🎯 Быстрый тест

1. Откройте `./open-player.sh`
2. Загрузите карту `demo-with-start.json`
3. Загрузите решение `demo-with-start-solution.json`
4. Нажмите ▶ Play и экспериментируйте со скоростью

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

- [Редактор карт](../map-editor/) - для создания карт
- [Основной проект](../README.md) - C# решатель на основе A*

---

**Технологии:** HTML5 Canvas, Vanilla JavaScript (ES6+), CSS3