Загрузка данных
У меня УЖЕ ЕСТЬ полностью работающая Crash-игра.
ВАЖНО:
НЕ создавай Crash заново.
НЕ меняй игровую механику.
НЕ переписывай существующую архитектуру без необходимости.
Сначала внимательно изучи существующий код Crash-игры и найди:
- компонент страницы Crash;
- текущую игровую область;
- существующий canvas/PixiJS;
- логику multiplier;
- start/crash состояния;
- обработку ставки;
- кнопку START;
- баланс Gold;
- историю коэффициентов;
- backend/API/WebSocket;
- существующие responsive стили.
После анализа измени ТОЛЬКО визуализацию игрового поля.
==================================================
ЧТО УЖЕ РАБОТАЕТ И ДОЛЖНО ОСТАТЬСЯ
==================================================
На странице уже есть:
- Header KICKXSUS;
- баланс Gold;
- "Назад к играм";
- название CRASH;
- история коэффициентов;
- поле ставки;
- быстрые ставки 10 / 50 / 100 / 500;
- кнопка START;
- существующая логика раунда;
- расчёт коэффициента;
- ставка и списание Gold;
- cashout, если он уже реализован;
- backend;
- API/WebSocket;
- мобильная адаптация.
ВСЁ ЭТО СОХРАНИТЬ.
Не менять бизнес-логику игры ради новой анимации.
Новая PixiJS-сцена должна лишь ВИЗУАЛИЗИРОВАТЬ уже существующее состояние игры.
==================================================
ГЛАВНАЯ ЗАДАЧА
==================================================
Сейчас игровое поле выглядит слишком просто:
- тёмный прямоугольник;
- обычная сетка;
- белые частицы;
- коэффициент по центру.
Нужно превратить именно эту существующую область в премиальную
анимированную Crash-сцену.
НЕ менять размеры всей страницы.
Новая сцена должна находиться ВНУТРИ существующей карточки игрового поля.
То есть структура страницы остаётся примерно:
CRASH
┌───────────────────────────────┐
│ │
│ НОВАЯ PIXI СЦЕНА │
│ │
│ 1.37x │
│ │
└───────────────────────────────┘
СТАВКА GOLD
[...........]
[10] [50] [100] [500]
[ START ]
==================================================
НИКАКИХ КАРТИНОК
==================================================
Не использовать:
PNG
JPG
WebP
SVG
base64
готовый background
готовую rocket texture
Всю графику сделать программно через PixiJS 8:
- Graphics
- Container
- Mesh, если действительно нужен
- runtime generated Texture
- alpha
- blendMode
- простые filters
==================================================
НОВЫЙ ВИЗУАЛ ИГРОВОГО ПОЛЯ
==================================================
Стиль должен быть похож на premium futuristic Crash game.
Основные цвета:
background:
#050812
#070914
#090A15
red:
#711027
#A51230
#D91D3D
#FF344E
#FF6872
rocket:
#08090E
#11121A
#22232D
#35343E
Игровое поле остаётся очень тёмным.
Не делать обычный космос.
Никаких:
- звёздного неба;
- планет;
- галактик;
- синего космоса;
- мультяшного оформления.
==================================================
ФОН
==================================================
Существующий фон поля заменить на глубокий navy/black.
Слева и сверху почти чёрный.
Справа, особенно возле ракеты,
добавить очень слабое красно-бордовое ambient glow.
Фон должен быть минималистичным.
Карточку и существующее border-radius игрового блока сохранить.
==================================================
СЕТКА
==================================================
Текущую слишком заметную обычную сетку переделать.
Новая сетка:
- тонкая;
- тёмно-красная;
- практически незаметная;
- основная видимость справа;
- постепенно исчезает влево.
Цвет:
#7A142B
alpha:
примерно 0.08–0.16.
Вертикальные и горизонтальные линии должны создавать ощущение графика.
==================================================
РАКЕТА
==================================================
В игровом поле должна появиться процедурно нарисованная ракета.
Не делай примитив:
rectangle + triangle + circle.
Нужен качественный стилизованный 2.5D объект.
Ракета:
- компактная;
- тёмная;
- металлическая;
- ретрофутуристическая;
- летит вверх-вправо примерно под 45°.
Форма корпуса:
вытянутая капля / капсула,
плавно заострённая к носу.
Использовать bezier curves.
Корпус почти чёрный:
#08090E
#11121A
#24232D
Добавить несколько отдельных shadow/highlight shapes,
чтобы корпус воспринимался объёмным.
==================================================
ОКНО РАКЕТЫ
==================================================
На корпусе одно круглое окно.
Окно почти чёрное.
Вокруг него толстое красное металлическое кольцо:
#C51E39
#E32B46
#FF495C
Добавить небольшой red glow.
Это важная визуальная деталь.
==================================================
ПЛАВНИКИ
==================================================
Сделать 3 небольших стабилизатора.
Они:
- тёмные;
- органично соединены с корпусом;
- имеют тонкий красный rim light.
Не делать огромные треугольные крылья.
==================================================
КРАСНЫЙ RIM LIGHT
==================================================
На освещённой стороне ракеты добавить красный edge highlight.
Не обводить всю ракету.
Красный свет должен присутствовать только:
- на носу;
- части корпуса;
- краях плавников;
- около двигателя.
==================================================
ДВИГАТЕЛЬ
==================================================
За ракетой отдельный EngineEffect.
Пламя не является частью корпуса.
Структура:
hot core:
светло-оранжево-красный
#FFD0B5
middle:
#FF354C
outer:
#9D092B
Пламя сильно вытянуто назад.
Это скорее энергетический реактивный след,
а не обычный огонь.
Использовать ADD blending.
Пламя слегка пульсирует.
==================================================
ДЛИННЫЙ СЛЕД РАКЕТЫ
==================================================
За двигателем должны оставаться примерно 5–7 красных speed trails.
Цвета:
#FF4055
#DA1E3D
#A20E2C
#61071D
Полосы:
- разной толщины;
- разной длины;
- почти параллельные;
- слегка искривлённые;
- постепенно исчезают.
При росте multiplier они становятся длиннее и ярче.
==================================================
CRASH ГРАФИК
==================================================
Вместо статической пустой сетки добавить красную растущую линию.
ВАЖНО:
Использовать существующий реальный progress/multiplier игры.
Не генерировать отдельный multiplier для анимации.
Линия начинает движение снизу-слева
и постепенно изгибается вверх-вправо.
В начале почти горизонтальная.
Чем дальше раунд,
тем круче идёт вверх.
Визуальная функция примерно:
y = 0.92 - 0.82 * pow(progress, 2.8)
Но привяжи progress к уже существующему раунду.
Рисовать 3 слоя линии:
outer glow:
ширина ~18px
#D7183B
alpha 0.10
inner glow:
~9px
#F32A47
alpha 0.25
main line:
~4px
#FF6872
alpha 1
==================================================
ТОЧКА ГРАФИКА
==================================================
На текущем конце линии находится маленькая красная светящаяся точка.
Несколько circles:
large glow
medium glow
bright core.
Очень мягкий pulse около 1 секунды.
==================================================
РАКЕТА И ЛИНИЯ
==================================================
Ракета летит рядом с текущей точкой графика.
Но не приклеена непосредственно к ней.
Пример:
rocketX = graphX - offsetX
rocketY = graphY + offsetY
Добавить небольшое естественное floating движение:
X ±2px
Y ±3px
и rotation ±0.5°.
==================================================
КАМНИ
==================================================
Убрать текущие случайные белые точки.
Вместо части из них сделать процедурные тёмные low-poly fragments.
Форма:
5–8 углов.
Цвет:
#100D17
#20101A
#39101E
Некоторые освещённые грани:
#78142A
#A51A34
Камней не должно быть слишком много.
Пример:
8–15 хорошо заметных + несколько мелких.
Разные размеры.
Они медленно вращаются.
Добавить параллакс:
ближние движутся быстрее дальних.
==================================================
МИКРОЧАСТИЦЫ
==================================================
Дополнительно можно оставить мелкие частицы,
но сделать их красными и очень деликатными.
Пример:
20–40 штук на mobile.
Размер:
1–3px.
Цвет:
#D61B3A
#FF3049
Никакой снежной россыпи белых точек.
==================================================
КОЭФФИЦИЕНТ
==================================================
Существующий multiplier обязательно сохранить.
Если сейчас в центре показывается:
1.00x
то этот же компонент/данные используются дальше.
НЕ создавай второй multiplier.
Изменить можно только визуальное оформление.
Текст должен находиться поверх Pixi-сцены.
Пример:
1.00x
1.37x
2.58x
Цвет:
#FFFFFF
Font weight:
700–800.
При больших коэффициентах можно постепенно переходить в:
#FF5363
Но без rainbow.
==================================================
ЗАВИСИМОСТЬ ЭФФЕКТОВ ОТ MULTIPLIER
==================================================
Используй уже существующий multiplier.
Создай visualIntensity 0..1.
Например:
1.00x = 0.05
1.50x = 0.15
2.00x = 0.25
3.00x = 0.40
5.00x = 0.60
10x = 0.80
20x+ = 1
От visualIntensity зависят:
- длина огня;
- яркость двигателя;
- длина trails;
- скорость частиц;
- скорость debris;
- red ambient glow;
- лёгкая вибрация ракеты.
Не менять сам multiplier.
Это ТОЛЬКО визуальная функция.
==================================================
START
==================================================
Когда пользователь нажимает уже существующую кнопку START:
НЕ создавать новую обработку ставки.
Использовать существующий процесс.
Когда существующий game state сообщает,
что раунд начался:
- очистить предыдущую линию;
- показать rocket;
- включить engine;
- начать прорисовку линии;
- запустить движение.
Если game state ещё находится в ожидании:
ракета может слегка idle-анимироваться
или быть скрыта — выбери вариант,
который лучше соответствует существующей логике.
==================================================
CRASH EVENT
==================================================
Использовать уже существующий crash event игры.
Когда настоящий текущий раунд переходит в CRASH:
НЕ вычислять crash самостоятельно.
Визуально:
0ms:
яркость двигателя растёт
100ms:
trail становится длиннее
100–450ms:
ракета резко улетает за верхний правый край
пример:
X +500..700
Y -350..500
easeInCubic
Никакого взрыва.
Затем rocket исчезает.
Линия остаётся на месте
до существующего reset следующего раунда.
==================================================
СУЩЕСТВУЮЩАЯ ЛОГИКА
==================================================
Критически важно.
Сначала найди существующие значения/props/state,
которые уже определяют:
- текущий multiplier;
- статус раунда;
- старт;
- crash;
- ставка;
- cashout;
- историю.
Подключи визуал непосредственно к ним.
НЕ создавать:
MockCrashProvider
новый backend
новый WebSocket
новую игровую state machine,
если аналогичная уже существует.
Ничего не дублировать.
==================================================
UI НЕ ПЕРЕДЕЛЫВАТЬ
==================================================
На этом этапе НЕ менять:
Header
Gold balance
Back button
CRASH title
Bet card
input ставки
10/50/100/500
START button
Bottom navigation
History UI
Только если Pixi canvas перекрывает существующие элементы,
исправь z-index/layout минимально.
Основная задача —
ТОЛЬКО игровая визуальная зона.
==================================================
MOBILE
==================================================
Главная платформа сейчас mobile.
Особенно проверить экран примерно 390×844 / 393×852.
Ракета не должна:
- вылезать за игровую карточку до crash;
- перекрывать коэффициент;
- закрывать историю;
- выглядеть слишком большой.
Canvas должен точно находиться внутри существующей игровой карточки.
Использовать overflow:hidden
или Pixi mask по rounded rectangle,
если это требуется.
==================================================
ПРОИЗВОДИТЕЛЬНОСТЬ
==================================================
Цель:
60 FPS на мобильном Safari.
Не создавать Graphics каждый frame.
Создать объекты один раз.
Обновлять:
- position;
- rotation;
- alpha;
- scale;
- существующие graph geometry.
Использовать object pooling для debris/particles.
Количество BlurFilter минимальное.
==================================================
ПОРЯДОК РАБОТЫ
==================================================
1. Сначала изучи существующий Crash.
2. Напиши кратко, какие файлы отвечают за Crash.
3. Найди источник existing multiplier и round state.
4. Найди существующее Pixi/canvas поле либо место для него.
5. НЕ меняя механику, реализуй новый visual renderer.
6. Подключи renderer к existing multiplier/state.
7. Проверь START.
8. Проверь crash.
9. Проверь следующий round/reset.
10. Проверь mobile.
11. Проверь отсутствие memory leaks.
12. В конце покажи конкретно изменённые файлы.
НЕ создавай новый проект.
НЕ переписывай Crash с нуля.
НЕ меняй серверную игровую механику.
НЕ меняй формулы результата раунда.
НЕ трогай ставки.
НЕ трогай баланс.
Нам нужен REDESIGN СУЩЕСТВУЮЩЕГО GAME CANVAS.