KANA: conejo arquero en pixel art

Prompt

Inicia sesión para copiar

Crea un único archivo HTML autónomo que dibuje un conejo arquero animado en pixel art usando JavaScript puro y Canvas 2D. Usa el conejo KANA adjunto como referencia visual: pelaje blanco; orejas grandes y erguidas con detalles interiores luminosos cian/azules; un ojo azul normal y otro mecánico cibernético rojo; sudadera amarilla con capucha y «KANA»; guantes y pantalones azul oscuro; armadura mecánica futurista amarilla/azul en las piernas; proporciones chibi adorables; arco y flecha futuristas; pequeño carcaj en la espalda. No uses recursos externos, bibliotecas, imágenes, fuentes ni solicitudes de red. Todo debe dibujarse de forma procedural mediante código. RENDERIZADO - Dibuja primero todo en un canvas fuera de pantalla con resolución lógica fija de 160x120. - Escálalo a un canvas de visualización a pantalla completa usando el mayor factor entero que quepa en la ventana del navegador y céntralo. - Configura imageSmoothingEnabled = false y CSS image-rendering: pixelated. - Ajusta todas las coordenadas a enteros. Sin degradados, desenfoque, suavizado de bordes, shadowBlur ni renderizado subpíxel. - Usa una paleta fija de unas 28 tonalidades: azul marino oscuro para el fondo, blanco/gris para el pelaje, amarillos para la sudadera, azules para la ropa, rojos para el ojo cibernético, cian para las luces de las orejas y amarillo/naranja para los efectos del arco y la flecha. PERSONAJE Construye el conejo de forma procedural con rectángulos de píxeles, filas de píxeles que formen figuras poligonales, círculos aproximados con píxeles y bloques simples. Tamaño aproximado: 28–34 píxeles de ancho y 40–48 de alto. Mantén una silueta claramente reconocible: orejas grandes, cabeza redonda y esponjosa, cuerpo pequeño, ojo cibernético rojo, sudadera amarilla, piernas mecánicas, arco, flecha y carcaj. Anima por separado orejas, cabeza, brazos, piernas, sudadera, arco, flecha y cuerpo. Cuantiza las poses para que, aunque el bucle principal renderice a 60 fps, el movimiento parezca una animación de sprites pulida a 8–12 fps. ACCIONES Crea una demostración en bucle con estas ocho acciones: 1. IDLE — Reposo - El conejo permanece preparado; el cuerpo oscila ligeramente, las orejas se mueven sutilmente y la sudadera y el carcaj se balancean. - El ojo cibernético pulsa suavemente y el arco se sostiene relajado a un lado. 2. RUN — Carrera - Carrera rápida hacia delante con un marcado movimiento alterno de las piernas; los brazos equilibran el movimiento. - Arco en una mano, carcaj que rebota, orejas ligeramente hacia atrás y pequeños píxeles de polvo bajo los pies. 3. AIM — Apuntar - Planta firmemente los pies, alza el arco, saca una flecha del carcaj, encájala en la cuerda y ténsala hacia atrás. - Un ojo enfoca el objetivo, el ojo cibernético brilla más y el cuerpo se inclina ligeramente hacia el disparo. 4. SHOOT — Disparar - Suelta la cuerda: la flecha cruza rápidamente la pantalla, el arco retrocede un poco y el brazo acompaña el gesto. - Estela de energía amarilla brillante tras la flecha, ligera sacudida de pantalla de 1–2 píxeles, destello rojo del ojo cibernético y breve fogonazo de luz en el arco. 5. JUMP — Saltar - El conejo se agacha, salta hacia arriba y recoge las piernas bajo el cuerpo. - Las orejas reaccionan con retraso, el arco permanece pegado al cuerpo y aparece una pequeña nube de polvo al despegar. - Ligera compresión y estiramiento con transformaciones enteras que respeten los píxeles. 6. DODGE / ROLL — Esquivar / Rodar - Se agacha rápidamente y rueda de lado, con el arco cerca del cuerpo y las orejas plegadas hacia atrás. - Pequeñas partículas de polvo y píxeles de movimiento; termina en una postura baja preparada para combatir. 7. HURT / HIT — Daño / Impacto - El conejo retrocede ligeramente por el golpe; la cabeza se echa bruscamente hacia atrás, las orejas reaccionan con fuerza y el ojo cibernético parpadea. - Aparecen pequeñas estrellas de píxeles o chispas de impacto; el arco baja o casi se cae. El personaje se recupera tras una breve pausa. 8. VICTORY — Victoria - Alza el arco sobre la cabeza con expresión alegre, una oreja inclinada juguetonamente y el ojo cibernético muy brillante. - Pequeñas partículas amarillas de celebración y un breve salto de victoria. La pose final debe resultar adorable y heroica. MÁQUINA DE ESTADOS Usa este bucle: IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE. Cada acción debe durar lo suficiente para entenderse visualmente. Usa funciones de suavizado para las transiciones de poses y animaciones cortas entre estados, de modo que el bucle sea continuo y no cambie bruscamente. ARCO Y FLECHA - Arco curvo futurista, cuerpo blanco/azul marino oscuro, articulaciones mecánicas amarillas luminosas y cuerda fina y brillante. - Punta de flecha amarilla brillante; la estela durante SHOOT dura brevemente. Varias flechas visibles en el carcaj. PARTÍCULAS Implementa un sistema de partículas con un pool sin asignaciones durante el bucle. Preasigna todas las partículas antes de la animación. Tipos: polvo de pisadas, estela de flecha, chispas de energía del arco, chispas del ojo cibernético, estrellas de impacto y partículas de victoria. Cada partícula cambia de color dentro de la paleta al envejecer. No asignes objetos nuevos dentro del bucle principal. ESCENA Crea un entorno mínimo en pixel art: cielo nocturno oscuro, algunas estrellas de 1 píxel, luna grande, plataforma sencilla de piedra o futurista y siluetas lejanas muy sutiles. Mantén sencillo el fondo para que la silueta del conejo siempre sea legible. Durante AIM y SHOOT añade una iluminación de contorno sutil cian/roja del ojo cibernético y amarilla del arco. REQUISITOS TÉCNICOS Un archivo HTML; solo JavaScript puro y Canvas 2D; sin bibliotecas, SVG, imágenes externas, recursos ni solicitudes de red. Paso de tiempo fijo de 60 Hz; requestAnimationFrame para renderizar; cero asignaciones de objetos en el bucle principal de animación; 60 fps estables; escalado adaptable a pantalla completa; píxeles nítidos con escala entera. NIVEL DE CALIDAD El resultado debe parecer una animación de sprites pulida del protagonista de un juego de acción de 16 bits. Evita el aspecto de formas geométricas simples. El conejo debe ser expresivo, adorable, rápido y capaz de combatir. Las ocho acciones deben tener siluetas claramente distintas. El diseño del personaje debe mantenerse coherente en todos los estados. El resultado final debe ser apropiado para un auténtico juego de acción en pixel art.