KANA: coelho arqueiro em pixel art

Prompt

Inicie sessão para copiar

Crie um único arquivo HTML autossuficiente que desenhe um coelho arqueiro animado em pixel art usando JavaScript puro e Canvas 2D. Use o coelho KANA anexado como referência visual: pelagem branca; orelhas grandes e eretas com detalhes internos luminosos ciano/azuis; um olho azul normal e um olho mecânico cibernético vermelho; moletom amarelo com capuz e “KANA”; luvas e calça azul-escuras; armadura mecânica futurista amarela/azul nas pernas; proporções chibi fofas; arco e flecha futuristas; pequena aljava nas costas. Não use recursos externos, bibliotecas, imagens, fontes nem requisições de rede. Tudo deve ser desenhado proceduralmente por código. RENDERIZAÇÃO - Renderize tudo primeiro em um canvas fora da tela com resolução lógica fixa de 160x120. - Amplie para um canvas de exibição em tela cheia usando o maior fator inteiro que caiba na janela do navegador e centralize-o. - Defina imageSmoothingEnabled = false e CSS image-rendering: pixelated. - Ajuste todas as coordenadas para inteiros. Sem gradientes, desfoque, antialiasing, shadowBlur ou renderização subpixel. - Use uma paleta fixa de aproximadamente 28 cores: azul-marinho escuro para o fundo, branco/cinza para a pelagem, amarelos para o moletom, azuis para a roupa, vermelhos para o olho cibernético, ciano para a iluminação das orelhas e amarelo/laranja para os efeitos do arco e da flecha. PERSONAGEM Construa o coelho proceduralmente com retângulos de pixels, sequências de pixels semelhantes a polígonos, círculos aproximados com pixels e blocos simples. Tamanho aproximado: 28–34 pixels de largura e 40–48 de altura. Mantenha a silhueta claramente reconhecível: orelhas grandes, cabeça redonda e felpuda, corpo pequeno, olho cibernético vermelho, moletom amarelo, pernas mecânicas, arco, flecha e aljava. Anime orelhas, cabeça, braços, pernas, moletom, arco, flecha e corpo separadamente. Quantize as poses para que, embora o loop principal renderize a 60 fps, o movimento pareça uma animação de sprites refinada a 8–12 fps. AÇÕES Crie uma demonstração em loop com estas oito ações: 1. IDLE — Repouso - O coelho fica pronto para agir; o corpo oscila levemente, as orelhas se movem sutilmente e o moletom e a aljava balançam. - O olho cibernético pulsa suavemente e o arco é segurado relaxadamente ao lado. 2. RUN — Corrida - Corrida rápida para a frente, com forte alternância das pernas e braços que equilibram o movimento. - Arco em uma mão, aljava saltando, orelhas ligeiramente voltadas para trás e pequenos pixels de poeira sob os pés. 3. AIM — Mira - Firme os pés no chão, levante o arco, tire uma flecha da aljava, encaixe-a na corda e puxe a corda para trás. - Um olho foca o alvo, o olho cibernético fica mais brilhante e o corpo se inclina levemente na direção do disparo. 4. SHOOT — Disparo - Solte a corda: a flecha cruza rapidamente a tela, o arco recua um pouco e o braço acompanha o movimento. - Rastro de energia amarelo brilhante atrás da flecha, leve tremor de tela de 1–2 pixels, clarão vermelho no olho cibernético e um breve clarão semelhante ao de um disparo no arco. 5. JUMP — Salto - O coelho se agacha, salta para cima e recolhe as pernas sob o corpo. - As orelhas reagem com atraso, o arco fica próximo ao corpo e uma pequena nuvem de poeira aparece na decolagem. - Leve compressão e alongamento com transformações inteiras que preservem os pixels. 6. DODGE / ROLL — Esquiva / Rolamento - Abaixe-se rapidamente e role para o lado, com o arco junto ao corpo e as orelhas dobradas para trás. - Pequenas partículas de poeira e pixels de movimento; termine numa postura baixa, pronta para combate. 7. HURT / HIT — Dano / Impacto - O coelho é empurrado um pouco para trás; a cabeça recua bruscamente, as orelhas reagem de forma intensa e o olho cibernético pisca de modo irregular. - Pequenas estrelas de pixels ou faíscas de impacto; o arco abaixa ou quase cai. O personagem se recupera após um pequeno intervalo. 8. VICTORY — Vitória - Erga o arco sobre a cabeça com expressão feliz, uma orelha inclinada de forma brincalhona e o olho cibernético brilhando intensamente. - Pequenas partículas amarelas de comemoração e um breve pulinho de vitória. A pose final deve ser fofa e heroica. MÁQUINA DE ESTADOS Use este loop: IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE. Cada ação deve durar o suficiente para ser entendida visualmente. Use funções de suavização nas transições de poses e pequenas animações entre estados, para que o loop seja contínuo em vez de trocar de pose abruptamente. ARCO E FLECHA - Arco curvo futurista, corpo branco/azul-marinho escuro, articulações mecânicas amarelas luminosas e corda fina e brilhante. - Ponta de flecha amarelo brilhante; o rastro durante SHOOT permanece por pouco tempo. Várias flechas visíveis na aljava. PARTÍCULAS Implemente um sistema de partículas com pool, sem alocações durante o loop. Pré-aloque todas as partículas antes do loop de animação. Tipos: poeira dos passos, rastro da flecha, faíscas de energia do arco, faíscas do olho cibernético, estrelas de impacto e partículas de vitória. Cada partícula muda de cor na paleta conforme envelhece. Não aloque novos objetos dentro do loop principal. CENA Crie um ambiente mínimo em pixel art: céu noturno escuro, algumas estrelas de 1 pixel, lua grande, plataforma simples de pedra ou futurista e silhuetas distantes muito sutis. Mantenha o fundo simples para que a silhueta do coelho sempre seja legível. Durante AIM e SHOOT, acrescente uma iluminação de contorno sutil ciano/vermelha vinda do olho cibernético e amarela vinda do arco. REQUISITOS TÉCNICOS Um arquivo HTML; somente JavaScript puro e Canvas 2D; sem bibliotecas, SVG, imagens externas, recursos ou requisições de rede. Passo de tempo fixo de 60 Hz; requestAnimationFrame para renderização; nenhuma alocação de objetos no loop principal de animação; 60 fps estáveis; escala responsiva em tela cheia; pixels nítidos ampliados por fator inteiro. PADRÃO DE QUALIDADE O resultado deve parecer uma animação de sprites refinada do protagonista de um jogo de ação de 16 bits. Evite a aparência de formas geométricas simples. O coelho deve ser expressivo, fofo, rápido e capaz de lutar. As oito ações devem apresentar silhuetas claramente diferentes. O design do personagem deve permanecer consistente em todos os estados. O resultado final deve ser adequado para um jogo de ação real em pixel art.