95 lines
2.9 KiB
Markdown
95 lines
2.9 KiB
Markdown
# 🎬 Визуализатор решений - Гонки на бумаге
|
||
|
||
Веб-приложение для визуализации и анимации решений. Работает без сервера, просто откройте в браузере.
|
||
|
||
## 🚀 Быстрый старт
|
||
|
||
```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
|