tactile/paper-racing-gpi

Fork 0

Files

tactile 023ccd03d8 init

2025-10-20 19:35:38 +05:00

9.8 KiB

Raw Blame History

🗺️ Редактор карт для "Гонки на бумаге"

Веб-приложение для создания и редактирования карт для игры "Гонки на бумаге".

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

Просто откройте index.html в браузере. Никаких зависимостей или установки не требуется!

# Из папки map-editor
firefox index.html
# или
chrome index.html
# или просто откройте файл двойным кликом

📖 Инструкция

Типы ячеек

Тип	Код	Описание	Цвет
Дорога	0	Обычная дорога	Светло-серый
Камень	1	Препятствие (непроходимо)	Тёмно-серый
Снег	2	Замедление движения	Голубой
Лёд	3	Скользкая поверхность	Светло-голубой
Чекпоинт	4	Контрольная точка	Жёлтый с "C"
Старт	5	Точка старта	Зелёный с "S"

Использование

Изменение размеров:
- Укажите ширину и высоту карты (5-100)
- Нажмите "Применить"
- Существующие данные сохранятся при изменении размера
Рисование:
- Выберите тип ячейки из палитры
- Кликните на ячейку для изменения типа
- Удерживайте кнопку мыши для рисования
Экспорт:
- Нажмите "Экспорт JSON"
- Файл автоматически скачается
- JSON также выводится в консоль браузера (F12)
Импорт:
- Нажмите "Импорт JSON"
- Выберите JSON файл
- Карта загрузится автоматически
Визуализация решения:
- Убедитесь, что на карте есть точка старта (тип 5)
- Нажмите "Загрузить решение"
- Выберите JSON файл с решением
- Используйте кнопки управления:
  - ▶ Play - автоматическое воспроизведение
  - ⏸ Pause - пауза
  - ⏮ Reset - сброс к началу
  - ⏭ Step - шаг вперед
- Регулируйте скорость воспроизведения (1x - 10x)

📄 Формат 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 файл с массивом векторов ускорений:

{
  "solution": [
    [1, 1],
    [1, 0],
    [0, 1],
    [-1, 0],
    [0, -1]
  ]
}

Структура решения:

solution - массив векторов ускорения [[ax, ay], ...]
Каждый элемент - вектор ускорения [ax, ay]
ax, ay - целые числа (обычно от -1 до 1)
Применяются последовательно от точки старта

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

Начальная позиция - ячейка с типом 5 (старт)
Начальная скорость = (0, 0)
На каждом шаге:
- 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# коде:

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 шагов

🎯 Быстрый старт с визуализацией

Откройте редактор:

./open-editor.sh
# или просто откройте index.html в браузере

Загрузите карту с примером:
- Нажмите "Импорт JSON"
- Выберите demo-with-start.json
Загрузите решение:
- Нажмите "Загрузить решение"
- Выберите example-solution.json
Запустите визуализацию:
- Нажмите ▶ Play
- Наблюдайте за движением
- Экспериментируйте со скоростью и пошаговым режимом

🔧 Создание собственного решения

Пример структуры файла решения:

{
  "solution": [
    [1, 0],   // ускорение вправо
    [1, 0],   // еще ускорение вправо (скорость нарастает)
    [0, 1],   // ускорение вниз
    [-1, 0],  // торможение по X
    [0, 0]    // без ускорения (движение по инерции)
  ]
}

Создано для проекта Racing

9.8 KiB Raw Blame History Unescape Escape