Играбельная 3D-игра в браузере в духе Rocket League на Three.js: машины, арена и мяч, запуск сразу с игры, код

Промпт

ПРОМПТ:
Создай отполированную браузерную 3D-игру в стиле Rocket League с использованием Three.js.
Цель: создать полностью играбельную локальную веб-игру, работающую в браузере. Первый экран должен сразу показывать саму игру, а не лендинг.
Технические требования:
Используй Three.js для рендеринга.
Используй настоящий физический движок, предпочтительно Rapier.js, для физики машины, мяча, арены, стен и ворот.

Используй TypeScript, если проект уже его поддерживает; в противном случае подойдёт современный JavaScript без TypeScript.
Используй Vite для dev-сервера, если только в проекте уже не используется другой стек.
Поддерживай чистую архитектуру: раздели рендеринг, физику, управление, состояние игры, UI/HUD и ресурсы.
Основной игровой процесс:
Управляемая ракетная машина с видом от третьего лица.

Большой футбольный мяч с реалистичной упругой физикой.

Закрытая арена с боковыми стенами, задними стенами, потолком или высокими невидимыми границами и двумя воротами.
Определение гола, когда мяч полностью пересекает линию ворот.
Сброс после каждого гола с обратным отсчётом.
Таймер матча и отображение счёта.
Система ускорения:Шкала ускорения от 0 до 100.
Удерживай клавишу ускорения, чтобы разгоняться с эффектом пламени/шлейфа.
Ускорение расходуется во время использования.
Расположенные по арене ускорительные площадки восполняют ускорение.

Система прыжка:Один прыжок.
Дополнительный второй прыжок / флип — если это возможно реализовать.
Управление в воздухе с помощью наклона вперёд, рыскания и крена.

Машина должна ощущаться отзывчивой и аркадной, а не медленной и похожей на симулятор.
Управление:
WASD или клавиши со стрелками: движение / поворот.
Пробел: прыжок.
Shift: ускорение.
R: сброс машины.
C: переключение режима камеры.
Esc или P: пауза.
Камера:
Плавная камера преследования позади машины.

Камера должна учитывать поворот и скорость машины, сохраняя при этом хорошую читаемость происходящего.

Дополнительно можно добавить переключение ball-cam, удерживающее мяч в поле зрения.
Визуальный дизайн:
Воссоздай атмосферу Rocket League, включая презентацию в фирменном стиле, если это уместно.
Добавь футуристический крытый стадион, цветные ворота, ускорительные площадки, элементы отделки арены и динамичный UI.
Добавь освещение, тени, bloom или лёгкую постобработку, если производительность позволяет.
Добавь чёткие цвета команд, цвета ворот, свечение ускорительных площадок, эффекты шлейфа, подсветку мяча и простые эффекты частиц.

Используй подходящие сгенерированные, процедурные или доступные ресурсы.

Добавь хорошо читаемый HUD со счётом, таймером, шкалой ускорения, обратным отсчётом и текстом празднования гола.
Убедись, что игра корректно работает на обычных экранах ноутбуков и правильно изменяет размер.
Ощущения от физики:

Ставь веселье выше реализма.

Мяч должен быть тяжёлым, но отзывчивым.
Машины должны обладать сильным ускорением, удобным для дрифта управлением и стабильным восстановлением положения.
Не допускай неконтролируемого переворачивания машин из-за лёгких столкновений.
Настраивай гравитацию, трение, упругость, угловое демпфирование и импульсы, пока игровой процесс не начнёт ощущаться хорошо.
ИИ / противник:
Если позволит время, добавь простого бота-противника:Бот преследует мяч.
Бот примерно направляет мяч к воротам игрока.
Бот может время от времени использовать ускорение.
Бот должен быть побеждаемым, а не идеальным.

Если бот слишком рискован в реализации, создай одиночный тренировочный режим с двумя воротами и работающим счётом.

Ожидания от реализации:

Создай полностью работающую игру, а не просто оболочку прототипа.
Добавь все исходные файлы.
Добавляй краткие комментарии только там, где логика неочевидна.
Избегай чрезмерного усложнения архитектуры.
Не создавай маркетинговую главную страницу.

Проверка:

Запусти dev-сервер.
Протестируй игру в браузере.
Убедись, что:Сцена отображается.
Машина движется, поворачивает, прыгает и ускоряется.
Мяч сталкивается с машиной и ареной.
Голы корректно определяются.
Счёт и таймер обновляются.
Сброс после гола работает.
Ускорительные площадки восполняют ускорение.
Камера не создаёт серьёзных клиппингов и не теряет машину.
В консоли отсутствуют серьёзные ошибки.

Сделай хотя бы один скриншот или используй автоматизацию браузера, чтобы подтвердить, что canvas не пустой.
Результат:
Локальная запускаемая браузерная игра.

Предоставь URL dev-сервера.

Кратко опиши управление и реализованные функции.
Планка качества: игра должна ощущаться как аркадная спортивная игра, в которую действительно хотелось бы играть пять минут. Удели дополнительное внимание настройке управления машиной, сглаживанию камеры, столкновениям с мячом, ощущениям от ускорения и обратной связи при голах. Технически завершённая, но скучная демонстрация физики недопустима.

Ещё несколько замечаний. Я хочу, чтобы ты протестировал игру и работал итеративно, пока не добьёшься очень сильного сходства с оригинальной Rocket League, включая дизайн машины Octane. Всё должно выглядеть почти идентично оригиналу. Мы не собираемся это продавать или распространять. Это всего лишь визуальный тест, поэтому допустимо сделать игру такой же, поскольку она никогда не будет распространяться.

Я хочу бесконечное ускорение при нажатии B, а UI должен выглядеть чрезвычайно отполированным, как в настоящей игре. Убедись, что сама карта также выглядит как Champions Field, максимально близко к оригиналу и очень качественно. Она должна выглядеть великолепно. Освещение и игровой процесс должны быть реалистичными. Физика должна ощущаться корректной в соответствии с оригинальной игрой. Всё должно работать точно так же, как в оригинале: от flip reset и подкатываний до взрывов при голе, дыма за быстро летящим мячом и всех мелких деталей, которые обычно упускают. Я действительно хочу, чтобы ты уделил внимание деталям.

Я действительно хочу, чтобы ты работал итеративно и тщательно сравнивал результат с оригинальной игрой; продолжай вносить изменения, пока ресурсы в игре не будут выглядеть убедительно и реалистично. У тебя столько токенов, сколько потребуется для выполнения этой задачи. Я никуда не тороплюсь. Я просто хочу, чтобы игра выглядела и игралась настолько хорошо, насколько это возможно. Поэтому продолжай итерации и не спеши.

У тебя столько токенов, сколько потребуется для выполнения этой задачи. Я никуда не тороплюсь. Я просто хочу, чтобы игра выглядела и игралась настолько хорошо, насколько это возможно. Поэтому продолжай итерации и не спеши.

Используй все доступные ресурсы, которые сможешь найти, чтобы повысить качество работы. Не упускай ни одной возможности. Ты буквально можешь работать столько, сколько потребуется, и создать нечто действительно выдающееся.

Build a polished browser-based 3D Rocket League-style game using Three.js.
Goal: Create a fully playable local web game that runs in the browser. The first screen should be the actual game, not a landing page.
Tech requirements:
Use Three.js for rendering.
Use a real physics engine, preferably Rapier.js, for car, ball, arena, wall, and goal physics.

Use TypeScript if the project already supports it, otherwise plain modern JavaScript is fine.
Use Vite for the dev server unless another stack already exists.
Keep the architecture clean: separate rendering, physics, controls, game state, UI/HUD, and assets.
Core gameplay:
Third-person controllable rocket car.

Large soccer ball with believable bouncy physics.

Enclosed arena with side walls, back walls, ceiling or high invisible bounds, and two goals.
Score detection when the ball crosses fully into a goal.
Reset after each goal with a countdown.
Match timer and score display.
Boost system:Boost meter from 0-100.
Hold boost key to accelerate with flame/trail effect.
Boost drains while active.
Boost pads around the arena refill boost.

Jump system:Single jump.
Optional second jump / flip if feasible.
Air control with pitch, yaw, and roll.

Car should feel responsive and arcade-like, not like a slow simulator.
Controls:
WASD or arrow keys: drive / steer.
Space: jump.
Shift: boost.
R: reset car.
C: toggle camera mode.
Esc or P: pause.
Camera:
Smooth chase camera behind the car.

Camera should follow car rotation and velocity while remaining readable.

Optional ball-cam toggle that keeps the ball in view.
Visual design:
Recreate a Rocket League-inspired feel, including branded-style presentation if desired.
Add a futuristic indoor stadium, colored goals, boost pads, arena trim, and energetic UI.
Add lighting, shadows, bloom or subtle postprocessing if performance allows.
Add clear team colors, goal colors, boost pad glow, trail effects, ball highlight, and simple particle effects.

Use generated, procedural, or available assets as appropriate.

Add a readable HUD with score, timer, boost meter, countdown, and goal celebration text.
Ensure the game works on common laptop screens and resizes correctly.
Physics feel:

Prioritize fun over realism.

The ball should be heavy but responsive.
Cars should have strong acceleration, drift-friendly turning, and stable recovery.
Avoid cars flipping uncontrollably from minor bumps.
Tune gravity, friction, restitution, angular damping, and impulses until gameplay feels good.
AI / opponent:
If time permits, add a simple bot opponent:Bot chases the ball.
Bot aims roughly toward the player goal.
Bot can boost occasionally.
Bot should be beatable, not perfect.

If bot is too risky, create a solo practice mode with two goals and a working scoreboard.

Implementation expectations:

Build the complete working game, not just a prototype shell.
Include all source files.
Add brief comments only where the logic is non-obvious.
Avoid overengineering.
Do not create a marketing homepage.

Verification:

Start the dev server.
Test the game in the browser.
Verify:The scene renders.
The car moves, turns, jumps, and boosts.
The ball collides with the car and arena.
Goals are detected correctly.
Score and timer update.
Reset after goal works.
Boost pads refill boost.
The camera does not clip badly or lose the car.
No major console errors.

Take at least one screenshot or use browser automation to confirm the canvas is nonblank.
Deliverable:
A local runnable browser game.

Provide the dev server URL.

Summarize controls and what was implemented.
Quality bar: Make it feel like an arcade sports game people would actually want to play for five minutes. Spend extra effort tuning car handling, camera smoothing, ball impact, boost feel, and goal feedback. A technically complete but boring physics demo is not acceptable.

A few more bits of feedback. I would like for you to test the game and work back and forth until you have a very strong match to the original Rocket League, including the car design for the Octane. It all should look nearly identical to the original. We are not going to sell or reproduce this. It's just for a visual test, so it is okay to make it look the same, as it will never be distributed.

I want there to be infinite boosts by pressing B, and I want the UI to look extremely polished, like a real game. Make sure that the actual map also looks like Champions Field and is a strong match for the original and very polished. It should look very good. The lighting and the gameplay should be true to life. The physics should feel correct according to the original game. Everything should work exactly the same as it did, from the flip resets to the tackles, to the goal explosions, to the smoke behind the ball when it goes fast, to all of the little small details that generally get missed. I really want you to pay attention to the details.

I really want you to work in a loop and make sure that you are really comparing it to the original game, and I want you to keep iterating until the assets in the game look legitimate and real. You have as many tokens as you want to complete this task. I'm not in a rush at all. I think I just want it to look and play as best as possible. So iterate and take your time.

You have as many tokens as you want to complete this task. I'm not in a rush at all. I think I just want it to look and play as best as possible. So iterate and take your time.

Use every available asset that you can find to improve the quality of your work. Leave no stone unturned. You literally can work for as long as you want and build something truly exceptional.