KANA: пиксельный кролик-лучник

Prompt

Войдите, чтобы скопировать

Создай один самодостаточный HTML-файл, который рисует анимированного кролика-лучника в пиксельной графике с помощью чистого JavaScript и Canvas 2D. Используй приложенного кролика KANA как визуальный образец: белая шерсть; большие стоячие уши с голубыми/синими светящимися деталями внутри; один обычный синий глаз и один красный кибернетический механический глаз; жёлтая толстовка с капюшоном и надписью «KANA»; тёмно-синие перчатки и брюки; жёлто-синяя фантастическая механическая броня на ногах; милые пропорции чиби; футуристические лук и стрела; небольшой колчан за спиной. Не используй внешние ресурсы, библиотеки, изображения, шрифты или сетевые запросы. Всё должно рисоваться процедурно кодом. ОТРИСОВКА - Сначала рисуй всё на внеэкранном canvas с фиксированным логическим разрешением 160x120. - Масштабируй на полноэкранный canvas отображения с максимальным целочисленным коэффициентом, помещающимся в окно браузера, и центрируй его. - Установи imageSmoothingEnabled = false и CSS image-rendering: pixelated. - Привязывай все координаты к целым числам. Никаких градиентов, размытия, сглаживания, shadowBlur или субпиксельной отрисовки. - Используй фиксированную палитру примерно из 28 цветов: тёмные сине-морские оттенки фона, белый/серый для шерсти, жёлтые для толстовки, синие для одежды, красные для киберглаза, голубые для подсветки ушей и жёлтые/оранжевые для эффектов лука и стрелы. ПЕРСОНАЖ Собери кролика процедурно из пиксельных прямоугольников, рядов пикселей, образующих подобия многоугольников, окружностей, приближённо нарисованных пикселями, и простых блочных форм. Примерный размер: 28–34 пикселя в ширину и 40–48 в высоту. Силуэт должен оставаться узнаваемым: большие кроличьи уши, круглая пушистая голова, маленькое тело, красный киберглаз, жёлтая толстовка, механические ноги, лук, стрела и колчан. Анимируй уши, голову, руки, ноги, толстовку, лук, стрелу и тело отдельно. Квантуй позы так, чтобы при отрисовке главного цикла в 60 кадров/с визуальная анимация напоминала качественную спрайтовую анимацию в 8–12 кадров/с. ДЕЙСТВИЯ Создай зацикленную демонстрацию восьми действий: 1. IDLE — Ожидание - Кролик стоит наготове; тело слегка покачивается, уши едва заметно двигаются, толстовка и колчан раскачиваются. - Киберглаз мягко пульсирует; лук свободно удерживается сбоку. 2. RUN — Бег - Быстрый бег вперёд с сильными попеременными движениями ног; руки уравновешивают движение. - Лук в одной руке, колчан подпрыгивает, уши немного отклонены назад, под ногами появляются маленькие пиксели пыли. 3. AIM — Прицеливание - Кролик твёрдо ставит ноги, поднимает лук, достаёт стрелу из колчана, накладывает её и оттягивает тетиву. - Один глаз сосредоточен на цели, киберглаз становится ярче, тело слегка наклоняется в сторону выстрела. 4. SHOOT — Выстрел - Отпусти тетиву: стрела быстро летит через экран, лук слегка отскакивает, рука завершает движение. - За стрелой тянется ярко-жёлтый энергетический след; лёгкая тряска экрана на 1–2 пикселя; киберглаз вспыхивает красным; у лука короткая вспышка, похожая на дульную. 5. JUMP — Прыжок - Кролик приседает, прыгает вверх и поджимает ноги под тело. - Уши реагируют с запаздыванием, лук держится близко к телу, при отрыве от земли появляется небольшой выброс пыли. - Лёгкое сжатие и растяжение с целочисленными преобразованиями, сохраняющими пиксельную сетку. 6. DODGE / ROLL — Уклонение / Перекат - Кролик быстро пригибается и перекатывается вбок, удерживая лук близко к телу и прижимая уши назад. - Небольшие частицы пыли и пиксели движения; завершение в низкой боевой стойке. 7. HURT / HIT — Ранение / Попадание - Кролика слегка отбрасывает назад; голова резко отклоняется, уши выразительно реагируют, киберглаз мерцает. - Появляются маленькие пиксельные звёздочки или искры удара; лук опускается или почти выпадает. Через короткую паузу персонаж восстанавливается. 8. VICTORY — Победа - Кролик поднимает лук над головой; счастливое выражение, одно игриво наклонённое ухо и ярко светящийся киберглаз. - Небольшие жёлтые праздничные частицы и короткий победный подскок. Финальная поза должна быть милой и героической. МАШИНА СОСТОЯНИЙ Используй цикл: IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE. Каждое действие должно длиться достаточно долго, чтобы легко считываться. Используй функции плавности для смены поз и короткие переходные анимации между состояниями, чтобы цикл был непрерывным, без резких переключений. ЛУК И СТРЕЛА - Футуристический изогнутый лук, белый/тёмно-синий корпус, жёлтые светящиеся механические сочленения и тонкая яркая тетива. - Ярко-жёлтый наконечник стрелы; след при SHOOT сохраняется недолго. В колчане видно несколько стрел. ЧАСТИЦЫ Реализуй систему частиц с пулом, без выделения памяти в цикле. Заранее выдели все частицы до начала анимационного цикла. Типы: пыль от шагов, след стрелы, энергетические искры лука, искры киберглаза, звёздочки попадания и победные частицы. С возрастом каждая частица меняет цвет в пределах палитры. Не создавай новые объекты внутри главного цикла. СЦЕНА Создай минимальное пиксельное окружение: тёмное ночное небо, несколько звёзд размером в 1 пиксель, большая луна, простая каменная или футуристическая платформа и очень ненавязчивые далёкие силуэты. Фон должен оставаться простым, чтобы силуэт кролика всегда читался. Во время AIM и SHOOT добавь слабую голубую/красную контровую подсветку от киберглаза и жёлтую от лука. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ Один HTML-файл; только чистый JavaScript и Canvas 2D; без библиотек, SVG, внешних изображений, ресурсов и сетевых запросов. Фиксированный шаг времени 60 Гц; requestAnimationFrame для отрисовки; нулевое выделение объектов в главном анимационном цикле; стабильные 60 кадров/с; адаптивное полноэкранное масштабирование; чёткие пиксели с целочисленным масштабом. УРОВЕНЬ КАЧЕСТВА Результат должен выглядеть как тщательно сделанная спрайтовая анимация главного героя 16-битной экшен-игры. Избегай вида простых геометрических фигур. Кролик должен быть выразительным, милым, быстрым и боеспособным. У всех восьми действий должны быть явно разные силуэты. Дизайн персонажа остаётся согласованным во всех состояниях анимации. Итог должен подходить для настоящей экшен-игры в пиксельной графике.