KANA : lapin archer en pixel art

Prompt

Connectez-vous pour copier

Créez un fichier HTML unique et autonome qui affiche un lapin archer animé en pixel art avec du JavaScript natif et Canvas 2D. Utilisez le lapin KANA joint comme référence visuelle : pelage blanc ; grandes oreilles dressées avec des détails intérieurs lumineux cyan/bleus ; un œil bleu normal et un œil mécanique cybernétique rouge ; sweat à capuche jaune portant « KANA » ; gants et pantalon bleu foncé ; armure mécanique de jambes futuriste jaune/bleue ; proportions chibi mignonnes ; arc et flèche futuristes ; petit carquois dans le dos. N'utilisez aucune ressource externe, bibliothèque, image, police ou requête réseau. Tout doit être dessiné de manière procédurale par le code. RENDU - Dessinez d'abord tout sur un canvas hors écran à une résolution logique fixe de 160x120. - Agrandissez-le sur un canvas d'affichage plein écran avec le plus grand facteur entier tenant dans la fenêtre du navigateur, puis centrez-le. - Définissez imageSmoothingEnabled = false et la propriété CSS image-rendering: pixelated. - Toutes les coordonnées doivent être entières. Aucun dégradé, flou, anticrénelage, shadowBlur ou rendu sous-pixel. - Utilisez une palette fixe d'environ 28 couleurs : bleu marine sombre pour le fond, blanc/gris pour le pelage, jaunes pour le sweat, bleus pour les vêtements, rouges pour l'œil cybernétique, cyan pour les oreilles et jaune/orange pour les effets d'arc et de flèche. PERSONNAGE Construisez le lapin de manière procédurale avec des rectangles de pixels, des rangées de pixels évoquant des polygones, des cercles approximés en pixels et des blocs simples. Taille approximative : 28–34 pixels de large et 40–48 pixels de haut. Gardez une silhouette clairement reconnaissable : grandes oreilles de lapin, tête ronde et duveteuse, petit corps, œil cybernétique rouge, sweat jaune, jambes mécaniques, arc, flèche et carquois. Animez séparément les oreilles, la tête, les bras, les jambes, le sweat, l'arc, la flèche et le corps. Quantifiez les poses pour que, malgré un rendu à 60 images/s, l'animation visuelle évoque une animation de sprites soignée à 8–12 images/s. ACTIONS Créez une présentation animée en boucle comprenant ces huit actions : 1. IDLE — Attente - Le lapin se tient prêt, le corps oscille légèrement et les oreilles bougent discrètement. - Le sweat et le carquois se balancent, l'œil cybernétique pulse doucement et l'arc est tenu sans tension sur le côté. 2. RUN — Course - Course rapide vers l'avant, avec une alternance marquée des jambes et des bras qui équilibrent le mouvement. - Arc tenu d'une main, carquois qui rebondit, oreilles légèrement rejetées en arrière et petits pixels de poussière sous les pieds. 3. AIM — Visée - Le lapin plante fermement ses pieds, lève l'arc, prend une flèche dans le carquois, l'encoche et tire la corde vers l'arrière. - Un œil se concentre sur la cible, l'œil cybernétique devient plus lumineux et le corps se penche légèrement dans la direction du tir. 4. SHOOT — Tir - Relâchez la corde : la flèche traverse rapidement l'écran, l'arc recule légèrement et le bras accompagne le geste. - Une traînée d'énergie jaune vif suit la flèche ; léger tremblement d'écran de 1–2 pixels ; l'œil cybernétique clignote en rouge ; bref éclat lumineux à l'arc, semblable à une flamme de bouche. 5. JUMP — Saut - Le lapin s'accroupit, saute vers le haut et replie les jambes sous le corps. - Les oreilles réagissent avec retard, l'arc reste près du corps et un petit nuage de poussière apparaît au décollage. - Ajoutez un léger écrasement et étirement avec des transformations entières respectant les pixels. 6. DODGE / ROLL — Esquive / Roulade - Le lapin se baisse rapidement et roule sur le côté, arc près du corps et oreilles rabattues vers l'arrière. - Petites particules de poussière et pixels de mouvement ; terminez dans une posture basse prête au combat. 7. HURT / HIT — Blessure / Impact - Le lapin est légèrement repoussé ; sa tête part brusquement en arrière, ses oreilles réagissent fortement et son œil cybernétique vacille. - Petites étoiles de pixels ou étincelles d'impact ; l'arc s'abaisse ou manque de tomber. Le personnage se rétablit après un court délai. 8. VICTORY — Victoire - Le lapin lève l'arc au-dessus de la tête avec une expression joyeuse, une oreille inclinée malicieusement et l'œil cybernétique brillant. - Petites particules jaunes de célébration et bref bond de victoire. La pose finale doit être mignonne et héroïque. MACHINE À ÉTATS Utilisez la boucle : IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE. Chaque action doit durer assez longtemps pour être clairement lisible. Utilisez des fonctions d'interpolation pour les transitions de poses et de courtes animations entre états afin que la boucle soit continue, sans changements brusques. ARC ET FLÈCHE - Arc courbe futuriste, corps blanc/bleu marine foncé, articulations mécaniques lumineuses jaunes et corde fine et brillante. - Pointe de flèche jaune vif ; la traînée de SHOOT persiste brièvement. Plusieurs flèches doivent être visibles dans le carquois. PARTICULES Implémentez un système de particules avec pool, sans allocation dans la boucle. Préallouez toutes les particules avant la boucle d'animation. Types : poussière des pas, traînée de flèche, étincelles d'énergie de l'arc, étincelles de l'œil cybernétique, étoiles d'impact et particules de victoire. Chaque particule change de couleur dans la palette en vieillissant. N'allouez aucun nouvel objet dans la boucle principale. SCÈNE Créez un environnement minimal en pixel art : ciel nocturne sombre, quelques étoiles de 1 pixel, grande lune, plateforme simple en pierre ou futuriste et silhouettes lointaines très discrètes. Le fond doit rester simple pour que la silhouette du lapin soit toujours lisible. Pendant AIM et SHOOT, ajoutez un subtil éclairage de contour cyan/rouge venant de l'œil cybernétique et jaune venant de l'arc. EXIGENCES TECHNIQUES Un seul fichier HTML ; uniquement JavaScript natif et Canvas 2D ; aucune bibliothèque, aucun SVG, aucune image externe, ressource ou requête réseau. Pas de temps fixe à 60 Hz ; requestAnimationFrame pour le rendu ; aucune allocation d'objet dans la boucle d'animation principale ; 60 images/s stables ; mise à l'échelle plein écran adaptative ; pixels nets agrandis par un facteur entier. NIVEAU DE QUALITÉ Le résultat doit évoquer une animation de sprites soignée du protagoniste d'un jeu d'action 16 bits. Évitez l'aspect de simples formes géométriques. Le lapin doit être expressif, mignon, rapide et apte au combat. Les huit actions doivent présenter des silhouettes nettement différentes. Le design du personnage reste cohérent dans tous les états. Le résultat final doit convenir à un véritable jeu d'action en pixel art.