KANA: coniglio arciere in pixel art

Prompt

Accedi per copiare

Crea un unico file HTML autonomo che disegni un coniglio arciere animato in pixel art usando JavaScript puro e Canvas 2D. Usa il coniglio KANA allegato come riferimento visivo: pelo bianco; grandi orecchie dritte con dettagli interni luminosi ciano/blu; un occhio blu normale e uno meccanico cibernetico rosso; felpa gialla con cappuccio e scritta «KANA»; guanti e pantaloni blu scuro; armatura meccanica fantascientifica gialla/blu sulle gambe; proporzioni chibi adorabili; arco e freccia futuristici; piccola faretra sulla schiena. Non usare risorse esterne, librerie, immagini, font o richieste di rete. Tutto deve essere disegnato proceduralmente tramite codice. RENDERING - Disegna prima tutto su un canvas fuori schermo con risoluzione logica fissa di 160x120. - Ingrandiscilo su un canvas di visualizzazione a schermo intero usando il massimo fattore intero che entra nella finestra del browser e centralo. - Imposta imageSmoothingEnabled = false e CSS image-rendering: pixelated. - Allinea tutte le coordinate a numeri interi. Niente gradienti, sfocatura, antialiasing, shadowBlur o rendering subpixel. - Usa una tavolozza fissa di circa 28 colori: blu navy scuro per lo sfondo, bianco/grigio per il pelo, gialli per la felpa, blu per gli abiti, rossi per l'occhio cibernetico, ciano per le luci delle orecchie e giallo/arancione per gli effetti di arco e freccia. PERSONAGGIO Costruisci il coniglio proceduralmente con rettangoli di pixel, sequenze di pixel simili a poligoni, cerchi approssimati con pixel e semplici blocchi. Dimensioni indicative: 28–34 pixel di larghezza e 40–48 di altezza. Mantieni una sagoma chiaramente riconoscibile: grandi orecchie, testa rotonda e soffice, corpo piccolo, occhio cibernetico rosso, felpa gialla, gambe meccaniche, arco, freccia e faretra. Anima separatamente orecchie, testa, braccia, gambe, felpa, arco, freccia e corpo. Quantizza le pose affinché, pur renderizzando a 60 fps nel ciclo principale, il movimento ricordi un'animazione di sprite rifinita a 8–12 fps. AZIONI Crea una dimostrazione animata in ciclo con queste otto azioni: 1. IDLE — Attesa - Il coniglio è pronto; il corpo oscilla leggermente, le orecchie si muovono con discrezione e felpa e faretra ondeggiano. - L'occhio cibernetico pulsa dolcemente e l'arco è tenuto rilassato di lato. 2. RUN — Corsa - Corsa rapida in avanti con un forte movimento alternato delle gambe; le braccia bilanciano il movimento. - Arco in una mano, faretra che rimbalza, orecchie leggermente all'indietro e piccoli pixel di polvere sotto i piedi. 3. AIM — Mira - Pianta saldamente i piedi, solleva l'arco, prendi una freccia dalla faretra, incoccala e tendi la corda all'indietro. - Un occhio mette a fuoco il bersaglio, l'occhio cibernetico diventa più luminoso e il corpo si inclina leggermente verso il tiro. 4. SHOOT — Tiro - Rilascia la corda: la freccia attraversa rapidamente lo schermo, l'arco rincula leggermente e il braccio accompagna il gesto. - Scia energetica giallo brillante dietro la freccia, lieve scuotimento dello schermo di 1–2 pixel, lampo rosso dell'occhio cibernetico e breve bagliore simile a una fiammata di sparo dall'arco. 5. JUMP — Salto - Il coniglio si accovaccia, salta verso l'alto e raccoglie le gambe sotto il corpo. - Le orecchie reagiscono in ritardo, l'arco resta vicino al corpo e al decollo compare un piccolo sbuffo di polvere. - Leggero schiacciamento e allungamento con trasformazioni intere che rispettino i pixel. 6. DODGE / ROLL — Schivata / Rotolamento - Si abbassa rapidamente e rotola di lato, con l'arco vicino al corpo e le orecchie appiattite all'indietro. - Piccole particelle di polvere e pixel di movimento; termina in una posizione bassa pronta al combattimento. 7. HURT / HIT — Danno / Colpo - Il coniglio viene spinto leggermente indietro; la testa scatta all'indietro, le orecchie reagiscono vistosamente e l'occhio cibernetico sfarfalla. - Piccole stelle di pixel o scintille d'impatto; l'arco si abbassa o quasi cade. Il personaggio si riprende dopo un breve intervallo. 8. VICTORY — Vittoria - Solleva l'arco sopra la testa con espressione felice, un orecchio inclinato scherzosamente e l'occhio cibernetico molto luminoso. - Piccole particelle gialle di festa e un breve saltello di vittoria. La posa finale deve essere tenera ed eroica. MACCHINA A STATI Usa questo ciclo: IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE. Ogni azione deve durare abbastanza da essere visivamente chiara. Usa funzioni di easing per le transizioni tra pose e brevi animazioni tra stati, così che il ciclo risulti continuo senza cambi bruschi. ARCO E FRECCIA - Arco curvo futuristico, corpo bianco/blu navy scuro, giunti meccanici gialli luminosi e corda sottile e brillante. - Punta della freccia giallo brillante; la scia durante SHOOT persiste brevemente. Diverse frecce visibili nella faretra. PARTICELLE Implementa un sistema di particelle con pool, senza allocazioni nel ciclo. Prealloca tutte le particelle prima del ciclo di animazione. Tipi: polvere dei passi, scia della freccia, scintille energetiche dell'arco, scintille dell'occhio cibernetico, stelle d'impatto e particelle di vittoria. Ogni particella cambia colore nella tavolozza mentre invecchia. Non allocare nuovi oggetti nel ciclo principale. SCENA Crea un ambiente minimale in pixel art: cielo notturno scuro, alcune stelle di 1 pixel, grande luna, semplice piattaforma di pietra o futuristica e sagome lontane molto discrete. Mantieni semplice lo sfondo affinché la sagoma del coniglio resti sempre leggibile. Durante AIM e SHOOT, aggiungi una sottile luce di contorno ciano/rossa dall'occhio cibernetico e gialla dall'arco. REQUISITI TECNICI Un file HTML; solo JavaScript puro e Canvas 2D; nessuna libreria, SVG, immagine esterna, risorsa o richiesta di rete. Passo temporale fisso a 60 Hz; requestAnimationFrame per il rendering; zero allocazioni di oggetti nel ciclo principale di animazione; 60 fps stabili; ridimensionamento adattivo a schermo intero; pixel nitidi ingranditi con fattori interi. LIVELLO QUALITATIVO Il risultato deve sembrare l'animazione di sprite rifinita del protagonista di un gioco d'azione a 16 bit. Evita l'aspetto di semplici forme geometriche. Il coniglio deve essere espressivo, tenero, veloce e capace di combattere. Le otto azioni devono avere sagome chiaramente diverse. Il design del personaggio deve restare coerente in ogni stato. Il risultato finale deve essere adatto a un vero gioco d'azione in pixel art.