ROBOT-7 · pixel pet

El usuario quiere una animación pixel art de un robot en JavaScript. La respuesta debe estar en español (el usuario escribió en español), y debe ser un solo archivo HTML autocontenido que se renderice en un iframe. Voy a crear algo memorable: un robot pixel art animado con canvas. Quiero que sea más que un simple sprite estático con dos frames — quiero que se sienta vivo y con carácter. Ideas de diseño: 1. Un robot pixel art dibujado con una matriz de píxeles en canvas, escalado con nitidez (image-rendering: pixelated). 2. Animaciones: respiración (bobbing), antena parpadeando, ojos que parpadean, brazos que se mueven, quizás el robot caminando o flotando. 3. Interactividad: que reaccione al mouse — los ojos siguen el cursor, o el robot se gira hacia donde está el mouse. Esto sería el "momento firma". 4. Escena: fondo nocturno con estrellas, quizás una plataforma/superficie, partículas de vapor saliendo del robot. Voy a hacer un robot flotante (tipo drone/robot de laboratorio) con: - Cuerpo principal con detalles - Antena con luz parpadeante - Ojos grandes que parpadean y siguen el cursor - Propulsores/thrusters debajo con llamas de partículas animadas - Vapor/humo ocasional - Estrellas de fondo titilando - Bobbing suave (flotación) Interactividad: - Los ojos siguen el mouse - Click: el robot hace una animación feliz (salta, eyes become ^^, suelta partículas de corazón... no, corazones quizás demasiado cliché — mejor destellos/estrellitas o chispas) - El robot se inclina ligeramente hacia la dirección del mouse Paleta de colores: evitaré azul/púrpura genérico. Pensemos en algo con carácter: un robot color crema/mostaza con detalles rojo óxido sobre fondo verde bosque nocturno profundo... o mejor: fondo verde oscuro tipo "pantalla de fósforo" no... Hagamos algo cálido: fondo azul noche muy oscuro está bien para estrellas pero quiero evitar azul genérico como color primario del robot. Robot: paleta crema/beige (#E8DCC0), acentos rojo óxido (#C4553B), detalles gris oscuro. Fondo: verde muy oscuro casi negro (#0D1B12) con estrellas crema. Hmm, verde oscuro nocturno con estrellas crema y robot crema/óxido — eso tiene una paleta distintiva, tipo Game Boy Color nocturno. Me gusta. Alternativa: fondo marrón oscuro/berenjena... Voy con verde nocturno profundo (#0A1410 aprox), estrellas en crema tenue, luna quizás, suelo/césped pixelado en verde más claro, robot crema con óxido y ojos oscuros con brillo. Estructura del robot en píxeles. Voy a definir sprites como arrays de strings donde cada carácter mapea a un color. Eso hace el código legible y el pixel art real. Diseño del sprite del robot (uns 20x22 píxeles aproximadamente): ``` .......AA....... .......AA....... ......A..A...... <- antena .......LL....... <- luz ....RRRRRRRR.... ...RCCCCCCCCR... ...RCCCWWCCCCR.. ...RCCEECEECC... <- ojos ...RCCCCCCCCR... ....RRRRRRRR.... ...DCCCCCCCCD... ..BCCCCCCCCCCB.. ..BCRRRRRRRRCB.. ..BCCCCCCCCCCB.. ...DCCCCCCCCD... ....RRRRRRRR.... .....D....D..... ....T......T.... <- thrusters ``` Voy a diseñarlo con más cuidado. Hagamos un robot cuadrado amigable tipo "Rustbot" con: - Antena con bola que parpadea - Cabeza grande con ojos LED (2-3 px cada uno) que pueden expresar: normal, parpadeo, feliz (^ ^), sorpresa (O O) - Cuerpo con panel y botón de corazón... no, mejor un pequeño medidor/pantalla en el pecho que parpadea - Brazos cortos a los lados que se balancean - Sin piernas — flota sobre propulsores con llama animada de 2 frames Sprites como strings. Definamos paleta: ``` . = transparente O = outline oscuro (#1A1E1A o casi negro) C = crema claro (#EFE3C8) c = crema sombra (#D4B896) -- hmm M = metal medio (#B8A98A) R = óxido (#C4553B) r = óxido oscuro (#8F3B2A) Y = amarillo luz (#FFD95E) para la luz de antena W = blanco brillo D = gris oscuro (#3A3F38) E = ojo oscuro (#22301F) o pantalla G = verde pantalla (#7BC96F) para el monitor del pecho ``` Fondo: gradiente... no, sin gradientes decorativos. Fondo plano verde muy oscuro con dithering pixel quizás — puedo hacer un cielo nocturno con estrellas dibujadas como píxeles y una luna pixel art. El dithering en el cielo con dos tonos muy cercanos puede dar textura pixel-art auténtica sin ser "gradiente decorativo" — es técnica legítima de pixel art. Lo haré con bandas de dithering sutiles o simplemente cielo plano + estrellas + luna. Mejor: cielo plano oscuro, estrellas titilantes (algunas de 1px, algunas de 4px en cruz), luna pixel art en una esquina, montañas/siluetas de colinas pixeladas en la parte baja, suelo con césped pixelado. Y quizás hierba que se mueve... puede ser demasiado. Hierba estática con algunas variaciones está bien, o hierba con sway sutil. El robot flota con bobbing sin() y las llamas de los thrusters parpadean (2-3 frames de formas diferentes). Partículas de chispas pequeñas bajo los thrusters. Ojos siguen el mouse: los píxeles de los ojos se desplazan 1px hacia el cursor según ángulo. Parpadeo aleatorio cada 3-5 s (frame de ojos cerrados durante ~150ms). Click/tap en el robot: animación "happy" — salto con squash & stretch, ojos ^^, chispas salen, la luz de la antena destella. Después vuelve a normal. También: al pasar el mouse rápido cerca, ¿reacción? Mantengámoslo enfocado: seguir con los ojos + click para celebrar. Y quizás el robot se inclina (tilt) 1px hacia el lado del mouse — un desplazamiento horizontal sutil de la parte superior... complicado con sprites. Puedo hacer que la cabeza se desplace 1px respecto al cuerpo hacia el mouse. Sí, eso es factible: dibujo cabeza y cuerpo con offset separados. Sonido: podría añadir bleeps con WebAudio al hacer click — un pequeño "boop" sintetizado. Eso es un buen toque y no requiere archivos externos. Lo haré opcional/automático al click (con AudioContext creado en el primer gesto del usuario). Sí, un "boop" pixel es encantador. UI: título pixel art en la esquina con fuente pixel — usaré una fuente de Google Fonts tipo "Press Start 2P" o mejor dibujo el texto con la misma fuente CDN... "Press Start 2P" vía Google Fonts CDN está permitido (CDN externo ok). Esa fuente es muy apropiada para pixel art y no es Inter/Roboto. También texto de instrucciones pequeño: "haz click en el robot". En español. Layout: canvas a pantalla completa, pixelado. Usaré un canvas de baja resolución interna (p.ej. 160x120 o 192x120) escalado a la ventana con image-rendering: pixelated. Eso da auténtico look pixel. Cálculo: escala entera = floor(min(w/192...)) para pixel-perfect. Mejor: resolución interna basada en el tamaño de la ventana dividida por un factor de escala entero, para que llene la pantalla con píxeles grandes. Plan técnico: - Canvas oculto de bajo nivel ("backbuffer") con dimensiones W = ceil(vw/SCALE), H = ceil(vh/SCALE), SCALE calculado para que queden ~3-5 px de "píxel grande"... Ajustemos: quiero que el pixel art se vea chunky. Elegir SCALE tal que la resolución interna sea ~mínimo 160 de ancho. SCALE = max(3, floor(vw/240))? Probemos: para 1440px de ancho, SCALE=6 → 240px interno. Para móvil 390px, SCALE=2 → 195. Ok, SCALE = Math.max(2, Math.round(vw/240)). - Dibujo todo en el backbuffer con ctx.imageSmoothingEnabled=false, y luego drawImage al canvas visible escalado, o uso CSS: canvas con width:100%; height:100%; image-rendering:pixelated y el canvas interno tiene la resolución baja. Lo más simple: un solo canvas con resolución interna baja y CSS que lo estire a 100vw/100vh con image-rendering: pixelated. Sí. Sprite rendering: función drawSprite(ctx, sprite, x, y, palette, flip?) que itera filas/chars y fillRect de 1px. Para rendimiento, podría pre-renderizar sprites a offscreen canvases. Con un robot y fondo, el redibujado por frame de ~ unos miles de fillRect está bien a baja resolución, pero pre-render es más limpio: cache de sprites en mini-canvases. Haré un cache con Map. Definición del robot — diseñemos el pixel art con cuidado. Robot flotante redondo-cuadrado, ~24 ancho x 26 alto. Voy a diseñar con strings. Paleta mapa: ``` '.' transparente 'O' #26221C outline oscuro (marrón-negro) 'C' #F2E4C4 crema claro 'S' #D9BF9B crema sombra 'M' #A8987D metal medio (uniones) 'R' #D96B45 óxido claro 'r' #A64B32 óxido oscuro 'Y' #FFD95E amarillo 'y' #B98A2E amarillo oscuro 'W' #FFFDF2 blanco 'D' #4A4640 gris oscuro 'E' #2C3A2B ojo/pantalla oscura 'G' #8FD66B verde pantalla 'g' #5FA347 verde pantalla oscuro ``` Cabeza (22 ancho x 14 alto): ``` fila0: ......OOOOOOOOOO...... (con orejas/antenas laterales?) ``` Déjame diseñar de verdad, contando caracteres. Ancho 22. Cabeza con "orejas" (vueltos laterales como tornillos): ``` 0: ..OO............OO.. -> hmm orejas fuera ``` Simplifico: cabeza redondeada con antena arriba. Antena (centrada): ``` . ..YY.. . ..yy.. (bola de luz 2x2) . ...OO... . ..OO.. (tallo) ``` Voy a hacer el diseño completo coordenada por coordenada. Ancho total del robot: 22 px. Definiré: ANTENA (parte del sprite de cabeza, filas -4..-1): ``` row -4: ..........YY.......... row -3: ..........Yy.......... row -2: ............O............ -> tallo 1px? mejor 2px: .........OO.......... row -1: .........OO.......... ``` Cuento: 22 chars. ".........." son 10, luego "YY" en cols 10-11, luego 10 más = 22. ✓ CABEZA filas 0-13: ``` row 0: ....OOOOOOOOOOOOOO.... -> 4 puntos, 14 O, 4 puntos = 22 ✓ (bordes redondeados: mejor esquinas vacías) ``` Hmm, para esquinas redondeadas: ``` row 0: .....OOOOOOOOOOOO..... 5+12+5=22 row 1: ...OOCSCCCCCCCCCSCO... hmm ``` Diseñemos con valores: ``` row 0: .....OOOOOOOOOOOO..... (5 dots, 12 O, 5 dots) row 1: ...OOC CCCCCCCCCC COO... ``` Mejor lo hago simple y legible: ``` row 0: ....OOOOOOOOOOOOOO.... 4+14+4=22 row 1: ...OCCCCCCCCCCCCCCO... 3+1+14+1+3=22 row 2: ..OCCCCCCCCCCCCCCCCO.. 2+1+16+1+2=22 row 3: ..OCSCCCCCCCCCCCCCSCO.. no, 23. ``` Esto se vuelve tedioso; en vez de contar a mano cada fila en el pensamiento, escribiré el array con cuidado en el código final y verificaré longitudes mentalmente al escribir. Estrategia: usar ancho fijo y escribir cadenas contando en grupos. Como es código que debo escribir bien, adoptaré un enfoque donde la función tolera filas de distinta longitud (itera hasta row.length), así pequeñas discrepancias no rompen nada — pero centrado podría variar. Aun así, escribiré con cuidado. Déjame diseñar el robot definitivo. Lo haré componiendo partes: cabeza, cuerpo, brazos, thruster — dibujadas por separado con offsets, lo que permite animar cada parte (bob de cabeza, brazos que rotan/balancean con frames, llama de thruster con frames). PARTE: cabeza (incluye antena), 22 ancho: ``` const HEAD = [ "..........YY..........", "..........Yy..........", "..........OO..........", "..........OO..........", ".....OOOOOOOOOOOO.....", "...OOCCCCCCCCCCCCOO...", "..OCCCCCCCCCCCCCCCCO..", "..OCWCCCCCCCCCCCCSCO..", // brillo W arriba-izq, sombra S derecha "..OCCCCCCCCCCCCCCCCO..", "..OCEEEOCCCCCCEEEOCO..", // ojos (frames aparte) -> mejor ojos dibujados dinámicamente "..OCCCCCCCCCCCCCCCCO..", "..OSCCCCCCCCCCCCCCSO..", "...OSCCCCCCCCCCCCSO...", "....OOOOOOOOOOOOOO....", ] ``` Espera — los ojos deben ser dinámicos (mirar, parpadear, expresiones). Mejor: la cara de la cabeza tiene una "pantalla" oscura donde dibujo los ojos como píxeles con código (posiciones variables). Diseño: cabeza crema con una visera/pantalla oscura insertada: ``` row: "..OCOOOOOOOOOOOOOOCO.." <- banda de pantalla O... ``` Mejor con marco: pantalla E de 14x4 dentro de la cabeza: ``` "..OCEEEEEEEEEEEEEECO..", 2+1+1+14+1+1+2 = 22 ✓ "..OCEEEEEEEEEEEEEECO..", "..OCEEEEEEEEEEEEEECO..", "..OCEEEEEEEEEEEEEECO..", ``` Y ojos dibujados encima de la pantalla E en coordenadas relativas. Ojos: rects de 3x3 con color G (verde fósforo) o W... Ojos verdes sobre pantalla oscura verde-grisácea — cohesivo con estética. Uso G #8FD66B para ojos brillantes. Cuando mira: pupila desplazada. Diseño de ojo: rect 2x3 redondeado... a 1px de escala, ojos de 2x3 px verticales u 3x2... Hagamos ojos 2x3 (alto) con 1px de separación... Con pantalla de 14 de ancho, ojos en cols relativas 2-3 y 8-9, filas 1-2, y cuando parpadea, fila 2 como línea de 2x1. Ojos felices: "^^" — arcos: píxel arriba-izq, arriba-der... a esta escala: happy = dos píxeles diagonales formando ∧: (x, y+1),(x+1,y),(x+2,y+1). Ok. Sorpresa al mover mouse rápido quizá no; mantengo: normal, blink, happy (post-click durante 1.2s). CUERPO (16-18 ancho x 12 alto): ``` "...OOOOOOOOOOOOOO...", ancho 19? ``` Hagamos cuerpo de 18: ``` "..OOOOOOOOOOOOOOOO..", ".OCCCCCCCCCCCCCCCCO.", wait brillo ".OCSCCCCCCCCCCCCSKO." ... ``` Simplifico cuerpo: ``` BODY = [ "..OOOOOOOOOOOOOOOO..", 2+16+2=20? Eso es ancho 20. ok cuerpo 20. ".OCCCCCCCCCCCCCCCCCO.", 21? no... ] ``` Debo ser consistente: ancho 20: - row: ".OCCCCCCCCCCCCCCCCCO." = 1+1+17+1+1 = 21. Uf. 17 C's. Contemos: "." 1, "O" 1 → 2; 17 C → 19; "O" → 20; "." → 21. No. Para ancho 20: ".O" + 16C + "O." = 2+16+2=20. ✓ BODY (20 ancho): ``` "..OOOOOOOOOOOOOOOO..", 2+16+2 ✓ ".OCCCCCCCCCCCCCCCCO.", 1+1+16+1+1 ✓ ".OCSCCCCCCCCCCCCCSCO", hmm 1+1+1+... : ".OC" =3, "SCCCCCCCCCCCC"=13 →16, "SO"=18, "." no. Escribiré: ".OCSCCCCCCCCCCCCSCO." = 1+1+1+1+12+1+1+1+1 = 20 ✓ (C S luego 12 C, S C O .) → "." O C S [12C] S C O "." = 1+1+1+1+12+1+1+1+1=20 ✓ ".OCCCCCCCCCCCCCCCCO.", ".OCCRRRRRRRRRRRRCCO.", banda óxido? mejor panel: ``` Panel del pecho: pequeña pantalla G con marco, y un botón R: ``` ".OCCOOOOOOOOOOOOCCO.", marco pantalla? La pantalla pequeña 8x5: ".OCCOEEEEEEEEEOGCCO." ... ``` Simplifico: en el cuerpo, panel E de 8x4 centrado con G parpadeando (dibujado dinámicamente como "latido" o barra de energía animada). Y un botón R circular a la derecha. Voy a definir el cuerpo base sin panel y dibujar el panel dinámicamente: ``` BODY = [ "..OOOOOOOOOOOOOOOO..", ".OCCCCCCCCCCCCCCCCO.", ".OCSCCCCCCCCCCCCCSCO", → mejor mantener simetría: ".OCSCCCCCCCCCCCCSCO." = 1+1+1+1+12+1+1+1+1=20 ✓ ".OCCCCCCCCCCCCCCCCO.", ".OCCCCCCCCCCCCCCCCO.", ".OCCCCCCCCCCCCCCCCO.", ".OCCCCCCCCCCCCCCCCO.", ".OCCCCCCCCCCCCCCCCO.", ".OCSCCCCCCCCCCCCSCO.", ".OOCCCCCCCCCCCCCCOO.", hmm "..OOOOOOOOOOOOOOOO..", ] ``` Mejor con base más estrecha y "faldón": ``` row 8: ".OCCCCCCCCCCCCCCCCO.", row 9: "..OCSCCCCCCCCCCCSCO..", → 21. Ajusto: "...OCSCCCCCCCCCSCO..." ``` Hagamos el cuerpo con forma trapecio invertido ligero (más estrecho abajo): ``` BODY: r0: "..OOOOOOOOOOOOOOOO..", (20) r1: ".OCCCCCCCCCCCCCCCCO.", r2: ".OCSCCCCCCCCCCCCSCO.", r3: ".OCCCCCCCCCCCCCCCCO.", r4: ".OCCCCCCCCCCCCCCCCO.", r5: ".OCCCCCCCCCCCCCCCCO.", r6: ".OCCCCCCCCCCCCCCCCO.", r7: ".OCSCCCCCCCCCCCCCSO.", wait simetría: ".OCSCCCCCCCCCCCCCSO." cuenta: 1+1+1+1+13? ".OCSCCCCCCCCCCCCCSO." = . O C S CCCCCCCCCCCCC (13) S O . → 1+1+1+1+13+1+1+1 = 20 ✓ (13 C en medio con S a cada lado asimétrico... da igual, es sombreado) r8: "..OCSCCCCCCCCCCCSCO.", hmm ancho: 2+1+1+1+12+1+1+1+? "..OCSCCCCCCCCCCCSCO." = 2 +1+1+1+12+1+1+1+1 = 21. No. ``` Me está tomando mucho contar. Alternativa más robusta: construir los sprites programáticamente no es tan bonito. Mejor: acepto que la función drawSprite maneje filas de longitud variable y yo diseño visualmente, aceptando pequeñas asimetrías que incluso pueden dar encanto pixel-art. Pero un robot desalineado se ve mal... Solución práctica: escribiré los sprites y luego en el código no dependo del centrado por longitud — el dibujo es píxel a píxel desde la esquina superior izquierda del sprite. Si una fila tiene 19 en vez de 20, simplemente falta un píxel al final derecho. Mientras yo cuente bien al escribir el código final, estará bien. Voy a contar cuidadosamente al escribir el código, usando grupos de 5. Para reducir riesgo, uso anchos menores y simétricos, y escribo cada fila verificando: patrón = padding izq + contenido + padding der con contenido par. Decisiones finales de sprites (los escribiré con máximo cuidado en el código): HEAD (22 ancho × 14 alto), antena incluida arriba: ``` "..........YY..........", → 10+2+10=22 ✓ "..........Yy..........", ✓ "..........OO..........", ✓ "..........OO..........", ✓ "....OOOOOOOOOOOOOO....", → 4+14+4=22 ✓ "...OCCCCCCCCCCCCCCO...", → 3+1+14+1+3=22 ✓ "..OCCCCCCCCCCCCCCCCO..", → 2+1+16+1+2=22 ✓ "..OCSCCCCCCCCCCCCCSCO..", → 2+1+1+14+1+1+2=22 ✓ ("OCSCCCCCCCCCCCCCSCO" = O C S +14C+ S C O = 1+1+1+14+1+1+1=20, +2+2=24?) ``` Cuidado: "..OCSCCCCCCCCCCCCCSCO.." → 2 puntos + O C S C(14) S C O + 2 puntos = 2+ (1+1+1+14+1+1+1=20) +2 = 24 ✗. Correcto para 22: 2 puntos + [20 chars] + ... no: 2+20+2=24. Necesito 18 chars internos: O C S C(12) S C O = 1+1+1+12+1+1+1=18 → ".." + 18 + ".." = 22 ✓ → "..OCSCCCCCCCCCCCCSCO.." con 12 C. Regla: en filas de ancho 22 con 2 px de padding: interior = 18 chars = O + 16 contenido + O. Con S de sombra: O C S [12C] S C O? eso es 18 ✓ si 12C. Pero O C S ... S C O: interior cream = C S 12C S C = 16 ✓. Bien, regla clara. Ahora fila de pantalla (visera): quiero pantalla de 14 ancho dentro: interior 18 = O + C + E(14) + C + O → "..OCEEEEEEEEEEEEEECO.." = 2 + O C + 14E + C O + 2 = 2+1+1+14+1+1+2=22 ✓. HEAD completo: ``` r0 "..........YY.........." bola luz r1 "..........Yy.........." r2 "..........OO.........." tallo r3 "..........OO.........." r4 "....OOOOOOOOOOOOOO...." top cabeza (14 de ancho, redondeada) r5 "...OCCCCCCCCCCCCCCO..." 3 + O+14C+O +3 = 22 ✓ r6 "..OCCCCCCCCCCCCCCCCO.." 2 + O+16C+O +2 = 22 ✓ r7 "..OCWCCCCCCCCCCCCCSO.." brillo W izquierda, sombra S derecha: O C W +13C? O C W(13C) S O = 1+1+1+13+1+1=18 ✓ → "..OCWCCCCCCCCCCCCCSO.." con 13 C: 2+18+2=22 ✓ r8 "..OCEEEEEEEEEEEEEECO.." pantalla fila 1 r9 "..OCEEEEEEEEEEEEEECO.." pantalla fila 2 (ojos fila sup) r10 "..OCEEEEEEEEEEEEEECO.." pantalla fila 3 (ojos fila inf) r11 "..OCEEEEEEEEEEEEEECO.." pantalla fila 4 — ¿4 filas de pantalla? La cabeza r4-r13 son 10 filas; pantalla 4 filas está bien, pero hagamos 3 filas de pantalla y borde inferior: r11 "..OCCCCCCCCCCCCCCCCO.." r12 "..OSCCCCCCCCCCCCCCSO.." → O S +14C? O S C(14) C S O? mejor: O S C(13) C S O... simple: O S [14C] S O = 18? 1+1+14+1+1=18 ✓ → "..OSCCCCCCCCCCCCCCSO.." con 14 C. Hmm la simetría S...S con C puro en medio — bien. r13 "...OOOOOOOOOOOOOOOO..." bottom: 3+16+3=22 ✓ ``` Espera, r13 debería coincidir con r6 (16 de ancho interior): "...O" + ... bottom redondeado: r13 = "...OOOOOOOOOOOOOOOO..." = 3+16+3=22 ✓. Y quizá r12.5... está bien. Pantalla en filas r8-r10 (3 filas), cols 5-18 (14 de ancho). Ojos dibujados dinámicamente sobre la pantalla. Ojos: base en pantalla. Pantalla rect: x=5..18, y=8..10 (relativo a sprite head). Ojos normales: rect 2 ancho × 2 alto en y=9..10? Con 3 filas de pantalla, ojos 2x2 centrados verticalmente: y=9 (filas 9-10 → ocuparía hasta 10 inclusive = 2 filas: 9 y 10 ✓ dentro de 8-10). Ojos en x: izquierdo x=7-8, derecho x=14-15 (pantalla centro 11.5; separación simétrica ✓). Brillo W en esquina de cada ojo (píxel superior izquierdo blanco? mejor ojo G con píxel W arriba... a 2x2 no cabe. Ok, ojos G sólidos 2x2, con píxel W opcional arriba-izquierda en frame normal? En 2x2, sustituir (0,0) por W queda mono. Sí. Mirada: offset ±1 en x y ±1 en y dentro de la pantalla (clamp). Parpadeo: en lugar de 2x2, línea 2x1 en y=10. Happy: forma ∧ de 3 ancho: píxeles (x,y+1),(x+1,y),(x+2,y+1) en G por cada ojo, y quizá boca... no hay boca. Ok. CUERPO (18 ancho × 10 alto), con panel: ``` r0 "...OOOOOOOOOOOOOO...", 3+14+3=20? cuerpo ancho 18: 2+14+2=18 → "..OOOOOOOOOOOOOO..". Reconsidero: cabeza 22, cuerpo 18 (más estrecho) ✓. r0 "..OOOOOOOOOOOOOO..", 2+14+2=18 ✓ r1 ".OCCCCCCCCCCCCCCO.", 1+1+14+1+1=18 ✓ r2 ".OCSCCCCCCCCCCCCO.", hmm sombra: O C S +12C? O C S C C ... C O: ".OCSCCCCCCCCCCCCO." = 1+1+1+1+12+1+1+... cuenta: . O C S [12C] C O . no. Escribo: "." (1) "O"(1) "C"(1) "S"(1) "CCCCCCCCCCCC"(12) "O"(1) "."(1) = 18 ✓ r3 ".OCCCCCCCCCCCCCCO.", r4 ".OCOOOOOOOOOOOOCO.", marco panel: interior O... panel: fila marco sup: O + EEEEEE + O dentro: ".OCOEEEEEEEEEEOCO." = 1+1+1+1+10E+1+1+1+1=18 ✓ r5 ".OCOEgGGGGggEEOCO." dinámico... ``` El panel lo dibujo dinámico mejor: cuerpo base limpio, y encima dibujo rect E de 10x3 con barra G animada. Filas del cuerpo: ``` r0 "..OOOOOOOOOOOOOO..", r1 ".OCCCCCCCCCCCCCCO.", r2 ".OCSCCCCCCCCCCCCO.", → asimétrico; hago ".OCSCCCCCCCCCCCSCO."? =1+1+1+1+10+1+1+1+1=18 ✓ (C S 10C S C) r3 ".OCCCCCCCCCCCCCCO.", r4 ".OCCCCCCCCCCCCCCO.", r5 ".OCCCCCCCCCCCCCCO.", r6 ".OCCCCCCCCCCCCCCO.", r7 ".OCSCCCCCCCCCCCCO.", → ".OCSCCCCCCCCCCCSCO." ✓ r8 ".OCCCCCCCCCCCCCCO.", r9 "..OOOOOOOOOOOOOO..", ``` 10 filas ✓. Panel pecho: x=4..13 (10 ancho), y=3..6 (4 alto): marco O alrededor de pantalla E de 8x2 con barras G animadas (medidor de energía que sube/baja). Detalles: tornillo R en esquinas? Pequeño botón R 2x2 a la derecha del panel... espacio justo. Panel centrado: cuerpo interior x=2..15 (14 ancho). Panel x=4..13. Bien. Además, un cinturón/línea R en la parte baja del cuerpo: fila r8 con R en algunas posiciones? Podría ensuciar. Mejor: dos "remaches" R en r1 esquinas. Simple. BRAZOS (a los lados, 4 ancho × 8 alto cada uno), con 2 frames de balanceo: Izquierdo: ``` frame A: "OO..", "OCO.", "OCCO", "OCCO", "OCCO", "OCCO", "OCO.", ".OO.", ``` Brazos redondeados 4x8... Los brazos se colocan pegados a los lados del cuerpo (x del cuerpo - 3). Animación: balanceo vertical ±1px alternando con el bob, o frames de rotación simples. Con bobbing del cuerpo los brazos pueden quedarse pegados y balancear 1px. Haré: brazo dibujado con offset vertical = round(sin(t*algo + phase)*1). Dos frames es suficiente pero el offset continuo es más suave. Detalle: mano/garra al final: últimas 2 filas en D (gris) o R: ``` ARM_L = [ ".OO.", "OCCO", "OCCO", "OCCO", "OCCO", "OCCO", "ORRO", mano óxido? mejor: "ORRO"? ``` Hagamos: ``` ".OO.", "OCCO", "OCCO", "OCCO", "OCCO", "OCOO", hmm "ORRO", ".OO.", ``` Ok simplifico al escribir. Manos R de 2 filas al final. THRUSTER (bajo el cuerpo, 12 ancho × 5 alto) + llama dinámica: ``` "...OOOOOO...", "..OCCCCCCO..", hmm el thruster es metal D: "...OOOOOO...", 12: 3+6+3 ✓ "..ODDDDDDDO..", 2+1+8+1+2=14? ancho 12: "..ODDDDDDO.." = 2+1+6+1+2=12 ✓ "..ODDDDDDO..", hmm dos filas "...OOOOOO...", ``` Y llama debajo: dibujada dinámicamente: triángulo/triángulos de píxeles Y/y/R parpadeando con formas aleatorias por frame + partículas. Llama: en cada frame, columnas de altura variable: base ancho 8, alturas 2-5 px, colores: núcleo W/Y, borde y/R. Flotando sobre el suelo, la llama apunta hacia abajo. Con partículas que caen y se desvanecen (píxeles naranjas/amarillos). FONDO: - Cielo: color #0E1A14 (verde noche). Dithering sutil: punteado con #12211A en la mitad superior? Puedo generar un patrón de dithering estático (aleatorio con seed fija o patrón tipo tablero en banda). Un toque: banda de dithering cerca del horizonte (transición cielo→colinas) con patrón ajedrez de 2 tonos — muy pixel-art auténtico. - Estrellas: ~40 posiciones aleatorias (semilla fija) de 1px, algunas 3px en cruz, titilan (alpha/parpadeo por seno con fase aleatoria). Color #EFE3C8 con alpha variable, algunas G tenues. - Luna: sprite pixel 11x11 crema con cráteres, arriba a la derecha. Con halo? sin glow; quizá anillo dither de 1px muy tenue. La haré con cráteres S. - Colinas: silueta en 2 tonos (#16281E, #1D3325) onduladas pixel (escalones). - Suelo: franja inferior #2A4A33 con textura: píxeles dispersos más oscuros/claros (hierba), borde superior más claro #3E6B4A. Pequeños arbustos/piedras pixel y quizás flores Y/R dispersas (1-2px). - Quizá: postes con luces... no sobrecargar. Añado 2-3 "vagas luciérnagas" G flotando (partículas suaves) — da vida. Con moderación: 5 puntos G que se mueven en Lissajous y parpadean. Encantador y barato. INTERACCIÓN: - Mousemove: pupilas miran al cursor (offset 1px). También la antena... la bola de la antena podría balancearse con el movimiento (física simple: péndulo con velocidad del mouse). ¡Eso es un gran detalle! La bolita de la antena con física de resorte reaccionando al movimiento del robot y del mouse... El robot se mueve poco; puedo hacer que la bola de la antena se incline según velocidad horizontal del mouse cerca del robot, o simplemente que oscile con el bob. Implemento: antena con bend: el tallo se dibuja como 2 segmentos con offset lateral según swing (variable física con amortiguación), la bola se desplaza. El tallo de 2px: si swing, dibujo el tallo desplazado y la bola más. Simplificación: la bola se desplaza lateralmente hasta ±2px y la parte alta del tallo ±1px. Con física: swing += (target - swing)*k; target = clamp(-velX*factor). Al hacer click, la bola rebota. Nice. - Click sobre el robot (o cerca): animación de alegría: salto (offset y con curva), ojos happy, chispas de partículas (píxeles Y/R/W) en explosión, luz de antena destella más brillante, y un "boop" de WebAudio (dos osciladores square, pitch up). Cooldown hasta que termine. - Parpadeo aleatorio. - El robot sigue sutilmente... ¿debería moverse hacia el mouse? Podría deambular solo lentamente por la pantalla (idle wander): flota de un lado a otro lentamente, mirando hacia donde va. Y el ojo sigue al mouse siempre. El wander hace la escena viva. Sí: el robot se desplaza lentamente hacia una posición objetivo aleatoria cada ~6-10s, con inclinación en la dirección de movimiento y llama de thruster más intensa al moverse. Al moverse rápido, ojos "sorprendidos"? mantengo simple. Momento firma: la combinación de ojos que siguen al cursor + antena con física + salto al click con boop sonoro. AUDIO: WebAudio "boop": osc square 220→440 Hz, 0.12s, gain envelope. También un blip suave al parpadear? no, demasiado. Solo el boop al click + quizá un "brr" de propulsor al moverse... no, ruido constante molesta. Solo boop al click (y variación de pitch aleatoria). HUD: título "ROBOT-7" con Press Start 2P en la esquina superior izquierda, pequeño, crema; y abajo: "CLICK: saludo · MUEVE: mira" en tamaño mini. También un contador de clicks? Divertido: "SALUDOS: n" — pequeño. Lo hago discreto. Cursor: crosshair o custom pixel? cursor: none y dibujar un cursor pixel art (flecha 5x8 o una diana)? Una diana/mira pixel que sigue al mouse dentro del canvas quedaría muy cohesivo. Hago cursor:none sobre el canvas y dibujo una pequeña mira pixel (cruz 5x5 con centro vacío) en crema. En touch no hay mouse — ok. Responsive/touch: touchstart = salto en posición tocada; touchmove actualiza "mirada". REDIMENSIONAMIENTO: recalcular escala y backbuffer en resize; reposicionar elementos del fondo (regenerar estrellas con seed para que no salten... al cambiar tamaño regenero con seed fija basada en proporciones? Simple: regenerar estrellas con PRNG seedado (mulberry32 con seed fija) y posiciones en fracción del tamaño — guardo posiciones normalizadas (u,v) y multiplico por W,H. Así no cambian al redimensionar ✓. ESTRUCTURA DEL CÓDIGO: ```html ROBOT-7 · pixel pet

ROBOT-7

MUEVE EL CURSOR · CLICK: SALUDO

SALUDOS 0

``` HUD con text-shadow para legibilidad? text-shadow 2px 2px 0 #0E1A14 — sombra dura pixel, no glow ✓. Ahora el JS con detalle: ```js const cv = document.getElementById('c'); const ctx = cv.getContext('2d'); let W, H, SCALE; const PALETTE = { 'O':'#26221C', 'C':'#F2E4C4', 'S':'#D9BF9B', 'R':'#D96B45', 'r':'#A64B32', 'Y':'#FFD95E', 'y':'#C99B33', 'W':'#FFFDF2', 'D':'#4A4640', 'E':'#20301F', // pantalla 'G':'#8FD66B', 'g':'#5FA347', 'M':'#8A7B63', 'B': '#16281E', 'N':'#1D3325' }; ``` Pantalla E: #22331F verdoso oscuro. Ojos G. Sprite caching: ```js const cache = new Map(); function makeSprite(rows){ key...; canvas offscreen; draw fillRect 1px each; } function drawSprite(name, x, y, flip=false){...ctx.drawImage(spr, Math.round(x), Math.round(y));} ``` Flip: pre-render también versión espejada (brazo derecho = espejo del izquierdo). Para el brazo puedo definir ARM_R explícito — más fácil que flip. Física del robot: ```js const bot = { x: 0.5, y: 0.55, // en fracciones? mejor en px del backbuffer, recalc en resize tx: ..., ty: ..., // target wander vx, vy, bob: 0, blinkT: 0, blink: false, happy: 0, // timer swing: 0, swingV: 0, // antena facing: 1, }; ``` Posiciones en unidades de píxel de backbuffer. En resize, escalar x,y proporcionalmente. Wander: cada 5-9s elige target dentro de márgenes (evitar HUD). Movimiento: hacia target con velocidad máx ~8 px/s (en unidades backbuffer, que a SCALE 6 son ~48 px de pantalla/s — suave). La llama más intensa cuando |v| > umbral. Bob: y += sin(t*2.2)*1.2 al dibujar. Ojos: calculan vector hacia mouse (mouse en coords backbuffer): dx = mouse.x - eyeCenterX; offset = sign/round... mirada: lx = clamp(round(dx/40), -1, 1)? En backbuffer pequeña (240 ancho), 40px es mucho; uso: lx = dx>2?1:dx<-2?-1:0; ly = dy>2?1:dy<-2?-1:0. Con ojos de 2x2 en pantalla de 3 filas: y base 9, ly ±0..(9+ly dentro 8..10: con ojos 2x2 solo cabe ly=0 hacia abajo no: ojos en y=9..10, mover a y=8..9 solo hacia arriba. Hmm. Con pantalla de 3 filas (8,9,10) y ojos 2x2, la mirada vertical es limitada. Opciones: ojos 2x2 en y=8..9 normal, mirando abajo → y=9..10 (cabe justo, fondo E de fila 8 visible arriba) ✓; mirando arriba → y=8..9 (ya ahí)… mejor ojos en y=9..10 por defecto (centrados-abajo) y arriba → y=8..9 ✓. Default y=9, mirada arriba y=8. Es sutil pero perceptible a escala grande. Ok. Pantalla más alta: hago pantalla de 4 filas (r8..r11) y cabeza 1 fila más. Recalculo HEAD con pantalla r8-r11 y luego r12 sombra, r13 bottom (14 filas + 4 de antena = 18 filas total). Ojos 2x2 en y=9..10, mirada arriba y=8, abajo y=10 (hasta 11 ok). Mejor rango ✓. Hmm, con ojos en y=9..10, quedan centrados en pantalla 8..11 ✓. Espera, antes definí pantalla r8..r10 y cambié. HEAD final (14 filas de cabeza): ``` r0 bola Y r1 bola y r2 tallo OO r3 tallo OO r4 ....OOOOOOOOOOOOOO.... r5 ...OCCCCCCCCCCCCCCO... r6 ..OCCCCCCCCCCCCCCCCO.. r7 ..OCWCCCCCCCCCCCCCSO.. (brillo/sombra) r8 ..OCEEEEEEEEEEEEEECO.. pantalla r9 ..OCEEEEEEEEEEEEEECO.. r10 ..OCEEEEEEEEEEEEEECO.. r11 ..OCEEEEEEEEEEEEEECO.. r12 ..OSCCCCCCCCCCCCCCSO.. r13 ...OOOOOOOOOOOOOOOO... ``` Pantalla x: interior de fila = desde col 2: O(2) C(3) E(4..17) C(18) O(19)? Cuenta: ".." =0,1; O=2; C=3; E=4..17 (14); C=18; O=19; ".."=20,21 ✓. Pantalla x=4..17, y=8..11. Ojos: separación: centro pantalla x=10.5. Ojo izq x=6..7, ojo der x=13..14? centro de ojos: (6.5+13.5)/2=10 ✓ simétrico respecto 10.5 con separación 6 entre centros... chequeo: izq centro 6.5, der centro 13.5, mid = 10 — pantalla centro es 10.5. Mejor izq 6-7, der 14-15: centros 6.5, 14.5, mid 10.5 ✓. Gap entre ojos: 8..13 = 6 px ✓. Bien: ojo izq x=6, ojo der x=14 (cada 2 de ancho). Happy eyes (∧): por ojo: píxeles (bx,by+1),(bx+1,by),(bx+2,by+1) → 3 ancho; para ojo izq bx=6, der bx=14 (hasta 16, pantalla hasta 17 ✓). Blink: línea 2x1: (bx..bx+1, y=10) — y también el píxel de la ceja? Simple línea. AL hacer click el ojo happy + boca? no hay boca. Añadir sonrisa en la pantalla cuando happy: píxeles en y=11: (7,11),(8,12)... la pantalla llega a y=11. Sonrisa: (7,11) y (14,11)? Como puntas de sonrisa bajo los ojos… con ojos ^^ arriba (y=8..9), sonrisa: arco en y=10..11: píxeles (8,10),(9,11),(10,11),(11,11),(12,11),(13,10)? Eso es una boca 6 ancho. Mejor simple: 3 píxeles: (9,11),(10,11),(11,11) + puntas (8,10),(12,10). ✓ Encantador. Panel del pecho (dinámico): rect E x=4..13 (10 ancho), y=3..6 (4 alto) sobre el cuerpo (cuerpo dibujado en bodyX, bodyY). Dentro: barra de energía G: 8 segmentos de 1px de ancho en y=4..5 (2 alto), número de segmentos = animado (ciclo subiendo con "sweep" tipo scanner, o nivel que oscila). Hago scan: pos = floor((t*6) % 12) - 2; segmentos encendidos de 0..min(pos,7)? Simple sweep de ida y vuelta: k = triángulo(t): pos entre 0..7. Colores: G para llenado, g para el último (cabeza del scan). Además píxel W parpadeante arriba-derecha del panel (luz de estado). Marco O alrededor: dibujo O primero rect 12x6? Panel con marco: dibujo rect O x=3..14,y=2..7, luego E x=4..13,y=3..6. Cuerpo interior x=2..15 — marco x=3..14 cabe ✓. Botón: remaches R en (2? ...) esquinas del cuerpo: píxeles R en (2,1) y (15,1)? El interior x=2..15: pongo R en x=2,y=1 y x=15,y=1 — "tornillos" ✓. THRUSTER: entre cuerpo y llama: ``` THR = [ "..ODDDDDDDDDO..", 14 ancho: 2+1+8+1+2=14 ✓ (8 D) "...ODDDDDDO...", 3+1+6+1+3=14 ✓ ] ``` Hmm, mejor: ``` "..OOOOOOOOOO..", 2+10+2=14 ✓ boquilla "..ODDDDDDDDO..", 2+1+8+1+2=14 ✓ "...OOOOOOOO...", 3+8+3=14 ✓ ``` Colocado centrado bajo el cuerpo (cuerpo 18, thruster 14 → offset +2). Y llamas salen del ancho interior (8). Llama dinámica: para cada columna i de 0..7, altura h[i] = base + noise(t, i): uso seno con fases + random suavizado. Dibujo desde la parte inferior del thruster hacia abajo: pixel y/y/R: núcleo superior Y, luego y, punta R. Simplifico: por columna, dibujo h píxeles: el primero Y, segundo y, resto r con alpha decreciente? Sin alpha mejor sólido: primero Y, segundo y, resto R. Además 2-3 partículas que caen desde la llama (chispas) con vida corta. Cuando el robot se mueve, h mayor (boost) y partículas más frecuentes. Flamas también empujan el bob? overkill. Partículas (array): {x,y,vx,vy,life,color,size}. Tipos: chispa de thruster (R/y, caen con drift), explosión de saludo (Y/W/R radiales con gravedad ligera y fricción). Dibujo fillRect 1px (algunas 2px para la explosión? mantener 1px, quizá 2px para W del centro). Suelo y ambiente: ``` groundY = H - max(14, round(H*0.16)) ``` Colinas: pre-generar perfil de alturas por columna con seno escalonado: hillY(x) = base - round(sin/noise). Dos capas: lejana B(#16281E) y cercana N(#1D3325). Dibujar por columnas: for x: h = ...; fillRect(x, hy, 1, groundY-hy)? Las colinas se dibujan como rects verticales desde su cumbre hasta groundY. Sencillo y efectivo. Suelo: fill #24402E? Elijo: base #1F3A29, top edge (2px) #2E5540, textura: puntos dispersos (seed) en #16281E y #356045, matas de hierba: pequeños "∫" de 1x2-3 px más claro dispersos, flores: puntos Y/R raros. Pre-render del suelo a un offscreen en resize (estático) — rendimiento ✓. Estrellas también podrían pre-renderizarse... pero titilan; dibujo estrellas por frame (son ~40 rects, nada). Estrellas: 46 estrellas {u,v,phase,speed,size(1|3),tint}. Twinkle: alpha = 0.4+0.6*(0.5+0.5*sin(t*speed+phase)) → uso globalAlpha; o mejor sin alpha: elijo entre 2 tonos (#4C5B4A tenue / #EFE3C8 brillante) según seno — pixel art puro sin alpha ✓. Mejor: brillo escalonado: si s>0.66 color claro; >0.33 medio; else tenue. Para estrellas de 3px (cruz): dibujar solo si brillo alto, si no solo el centro. Luna: sprite: ``` MOON = [ "...CCCCC...", ".CCCCCCCCC.", "CCCCCSSCCCC", cráteres S... con sombra: uso C y S y W? luna crema: ".CCCCCCCCC.", "...CCCCC...", ] ``` Hago luna 11x11 con cráteres: ``` "...WWWWWW...", uso W (blanco cálido) para la luna y S para cráteres: ".WWWWWWWWW.", "WWWWWSSWWWW", cuenta: W W W W W S S W W W W = 11 ✓ "WWWWWWWWWWW", "WWSWWWWWWWW"? ... ``` Al escribir el final la diseño bien. La luna con contorno? Contra cielo oscuro sin contorno está bien; añado borde inferior S para sombreo (fase). La coloco esquina sup-derecha (u=0.82, v=0.16) con margen. Quizá una nube pixel pequeña cruzando lentamente? Extra; omito o... una nubecita de 8x3 en #24352B que deriva muy lento y envuelve. Da profundidad. La añado: 2 nubes. Luciérnagas: 6 puntos G, cada uno con trayectoria Lissajous alrededor de un punto ancla sobre el suelo, parpadeo (visible ~70% del ciclo). Dibujo píxel G con alternancia W en pico. Encantador ✓. Cursor mira: dibujar en mouse: cruz de 5: píxeles (x±1..±2, y) y (x, y±1..±2) con hueco central: dibujo 4 trazos de 2px: (x-3..x-2, y), (x+2..x+3, y), (x, y-3..y-2), (x, y+2..y+3) color W con sombra O (offset +1,+1)? Sombra dura: primero dibujar en O desplazado (1,1), luego W. Pixel-art UI ✓. Al hacer click, la mira se contrae (animación: gap crece y vuelve). Detección de click sobre el robot: rect del robot (x±14, y-16..y+18 aprox). Si click dentro → saludo; si fuera → el robot ¿se asusta? o mira... si click fuera: chispita pequeña en el punto? Mejor: el robot gira los ojos hacia el punto (ya lo hacen) y aparece una "marquita" de suelo al click? Simplifico: cualquier click = saludo solo si es sobre el robot; si no, nada (o una pequeña onda de polvo en el suelo si el click es en el suelo). Pondré: click en suelo → puff de polvo (3-4 píxeles S que saltan). Divertido y coherente. Saludo (jump): animación con timeline t desde 0 a ~0.9s: - squash inicial (0-0.12s): offsetY +1, dibujar cuerpo 1px más ancho? Squash con sprites es difícil; hago solo offset y estirado por partes: durante salto, cabeza offset -1 extra (stretch). - offsetY = -sin(pi * p) * 6 px (salto de 6px), con doble rebote al caer: al aterrizar, squash: offsetY +1 durante 0.1s y chispas de polvo en... el robot flota; el "salto" es un impulso hacia arriba con thruster boost + explosión de chispas alrededor + luz antena flash + boop. Al ser flotante, lo llamo "rebote": salta 8px con easing y suelta anillos de chispas. Suave con curva: y_off = -8 * sin(pi*p)^0.7? uso sin(pi*p). Durante el salto, llama del thruster x3 intensidad (boost). ✓ Boop audio: ```js let actx; function boop(){ actx ||= new (AudioContext||webkitAudioContext)(); const o = actx.createOscillator(), g = actx.createGain(); o.type='square'; const t0=actx.currentTime; o.frequency.setValueAtTime(320+Math.random()*80, t0); o.frequency.exponentialRampToValueAtTime(660, t0+0.09); g.gain.setValueAtTime(0.12, t0); g.gain.exponentialRampToValueAtTime(0.001, t0+0.16); o.connect(g).connect(actx.destination); o.start(t0); o.stop(t0+0.18); } ``` Y quizá segundo "boop" arpeggio (dos notas): programo dos osciladores con retraso: nota2 a t0+0.09 más aguda. Alegréame: doble boop ascendente ✓. Loop: ```js let last=0; function frame(ts){ dt=min(0.05,(ts-last)/1000); last=ts; update(dt); render(); requestAnimationFrame(frame);} ``` Render order: cielo (fill), estrellas, luna, nubes, colinas lejanas, colinas cercanas, suelo (pre-render incluye colinas+suelo+textura → pre-render "bg" completo estático salvo estrellas/luna/nubes... estrellas titilan y nubes se mueven → pre-render: colinas+suelo. Estrellas/luna/nubes por frame antes del bg pre-render. Orden: clear con color cielo → estrellas → luna → nubes → bg estático (colinas+suelo) → luciérnagas (delante de colinas, cerca del suelo) → partículas detrás del robot? chispas de thruster delante; explosión delante. → robot (thruster llama → cuerpo → brazos → panel → cabeza → antena bola) → partículas frontales → cursor mira. Wait: la llama debe dibujarse antes del thruster (queda debajo), las chispas por delante del suelo. Tamaño robot en backbuffer: cabeza 22 ancho. En un backbuffer de ~240x135, el robot de 22px ≈ 9% del ancho — visible y con aire ✓. En móvil 390/2=195 ancho ✓. SCALE: SCALE = Math.max(2, Math.floor(vw/240)) — para 1920: floor(8)=8 → 240 ✓; 1440→6→240 ✓; 1280→5→256 ✓; 900→3→300 ✓ (300 de ancho: robot 22 = 7% ok); 500→2→250 ✓. H = ceil(vh/SCALE). Posición del robot: y del "centro de masa". Defino bot.x, bot.y como posición del centro del cuerpo. Margen: mantener dentro de [30, W-30] x [30, H-groundH-40]. Mouse a coords backbuffer: mx = e.clientX/SCALE, my = e.clientY/SCALE. Ojos hacia mouse: si el mouse nunca se ha movido (touch), mirada neutral con deriva aleatoria sutil. También quiero un detalle: sombra del robot en el suelo — elipse pixelada (fila de píxeles oscuros) que se encoge cuando el robot sube (salto/bob). Sombra: dibujo en groundY: rect de ancho 14-18 y 2 alto en #14231A con alpha? sin alpha: color sólido más oscuro que el suelo #16281E sobre suelo #1F3A29 ✓. Ancho = f(distancia del robot al suelo). El robot flota a altura fija sobre el suelo (hover ~14px sobre groundY). Posición bot.y base = groundY - 26. Durante salto, sube y la sombra encoge ✓. Detalle que ancla al mundo ✓. Escribamos también colinas: ```js function hillH(x, seed, amp, base){ return base + Math.round(Math.sin(x*0.05+seed)*amp + Math.sin(x*0.13+seed*2)*amp*0.5); } ``` Escalonado pixel viene gratis por round por columna. Árboles/pinos siluetas? Añado 3 pinos pixel (triángulos escalonados N/B) sobre la colina cercana para composición ✓. Pino: pila de triángulos 7-9 ancho. Dibujar con rects decrecientes. Posiciones fijas por fracción u, sobre la línea de colina cercana. Bonito. Detalle de "señal" del HUD: contador de saludos con fuente pixel. Vamos también a mostrar en HUD versión "ROBOT-7 v1.0"? El título con un pequeño destello cursor "_" parpadeante tipo terminal: "ROBOT-7_" ✓ mono encanto. Recolección de requisitos: sin gradientes ✓ (colores planos y dithering), sin emoji ✓ (HUD texto puro), sin azul/púrpura ✓ (paleta verde/crema/óxido), interacción real ✓, sonido sintetizado local ✓, fuente: Press Start 2P (apropiada, no genérica) ✓. Ahora escribamos el código completo con sprites cuidadosos. Verificaré cada fila contando. SPRITES FINALES: HEAD (ancho 22): ``` "..........YY..........", 10+2+10 ✓ "..........Yy..........", ✓ "..........OO..........", ✓ "..........OO..........", ✓ "....OOOOOOOOOOOOOO....", 4+14+4 ✓ "...OCCCCCCCCCCCCCCO...", 3+1+14+1+3 ✓ "..OCCCCCCCCCCCCCCCCO..", 2+1+16+1+2 ✓ "..OCWCCCCCCCCCCCCSO..", → 2+ [O C W 12C S C O =18] +2 = 22? O(1)C(1)W(1)+12C(12)+S(1)C(1)O(1) = 18 ✓ → "..OCWCCCCCCCCCCCCSO.." con 12 C: "OCW"+"CCCCCCCCCCCC"+"SCO" → escribo "..OCWCCCCCCCCCCCCSO.." (2+18+2=22 ✓) "..OCEEEEEEEEEEEEEECO..", 2+1+1+14+1+1+2=22 ✓ (O C 14E C O) "..OCEEEEEEEEEEEEEECO..", ✓ "..OCEEEEEEEEEEEEEECO..", ✓ "..OCEEEEEEEEEEEEEECO..", ✓ "..OSCCCCCCCCCCCCCCSO..", O S 14C S O = 18 ✓ "...OOOOOOOOOOOOOOOO...", 3+16+3 ✓ ``` Pantalla: x=4..17, y=8..11 ✓ (filas 8-11). BODY (ancho 18): ``` "..OOOOOOOOOOOOOO..", 2+14+2 ✓ ".OCCCCCCCCCCCCCCO.", 1+1+14+1+1 ✓ ".OCSCCCCCCCCCCSCO.", → interior: O C S 10C S C O = 1+1+1+10+1+1+1=16, +2=18 ✓ ("OCSCCCCCCCCCCSCO": O,C,S,C*10,S,C,O = 16 ✓) ".OCCCCCCCCCCCCCCO.", ✓ ".OCCCCCCCCCCCCCCO.", ".OCCCCCCCCCCCCCCO.", ".OCCCCCCCCCCCCCCO.", ".OCSCCCCCCCCCCSCO.", ✓ (igual que r2) ".OCCCCCCCCCCCCCCO.", "..OOOOOOOOOOOOOO..", ✓ ``` 10 filas ✓. Panel dinámico encima: marco O x=3..14 (12 ancho), y=3..7 (5 alto)? cuerpo filas 0..9; panel y=3..6 (4 alto) pantalla E x=4..13 (10), interior barras y=4..5 (2 alto) x=4..13 → 10 segmentos. Marco: rect O x=3..14 y=2..7 (12x6), pantalla E x=4..13 y=3..6 (10x4), barras G en y=4..5 (2px alto), desde x=4 hasta x=4+lvl-1. Y píxel W esquina (14,2)? dentro del marco: pongo luz de estado W en (13,3)? La pantalla ocupa 4..13... El píxel W lo pongo fuera: en (15,3) junto al marco — "LED". Mejor: dibujo el LED R/W alternando en (15,4)... el cuerpo interior llega a x=15 ✓. LED en (15,5) parpadeando lento: alterna W/R cada 0.5s? Que parpadee cuando happy más rápido. Detalle ✓. Remaches R: (2,1),(15,1) sobre cuerpo ✓ (interior x=2..15 en filas 1..8 ✓). ARM (ancho 4, alto 9), izquierdo: ``` ".OO.", 1+2+1 ✓ "OCCO", ✓ "OCCO", "OCCO", "OCCO", "OCOO", hmm hombro? Simplifico: ``` ``` ".OO.", "OCCO", "OCCO", "OCCO", "OCCO", "OCCO", "ORRO", ".OO.", ``` 8 filas ✓. Colocación: brazo izq en x = bodyX - 3 (solapa 1 col con cuerpo: cuerpo empieza en bodyX con '.' en col0, 'O' en col1 → el brazo pegado: armX = bodyX - 2 toca el O del borde? cuerpo col1 = O. brazo col3 (última) = O... quiero que se vea pegado: brazo derecho del brazo (col3) coincide con col1 del cuerpo? armX + 3 = bodyX + 1 → armX = bodyX - 2 ✓ solapan visualmente bien (brazo 4 ancho, 2 visibles fuera... mejor más visible: armX = bodyX - 3 → col3 del brazo en bodyX (que es '.' del cuerpo en filas interiores? cuerpo col0 = '.', col1='O'. armX=bodyX-3: brazo cols bodyX-3..bodyX; col bodyX se dibuja sobre cuerpo col0 ('.' transparente) → píxeles del brazo OCCO col3=O... quedaría una línea O entre brazo y cuerpo. Aceptable como contorno ✓. Brazo derecho: espejo — defino ARM_R: ``` ".OO.", "OCCO", "OCCO", "OCCO", "OCCO", "OCCO", "ORRO", ".OO.", ``` (espejo idéntico por simetría ✓ — el brazo es simétrico, así que ARM_R = ARM_L. Genial, menos trabajo; la colocación: armRX = bodyX + 18 - 1 + ... cuerpo ancho 18, borde derecho interior O en col16, col17='.'. armRX = bodyX+17-... brazo col0 debe estar en bodyX+16 (sobre el O) → armRX = bodyX+16. Hmm simetría con izq (armX=bodyX-3, brazo cols -3..0 → solapa col0 del cuerpo): der: cols 17..20? armRX = bodyX+17 → cols 17..20, col17 sobre '.' del cuerpo... asimétrico. Corrijo izq: armX = bodyX - 4 → cols -4..-1, sin solape, pegado al O de col1? hay col0 ('.') de gap: en fila 0 del cuerpo es '.', resto filas col0='.', col1='O'. El brazo cols -4..-1: col -1 adyacente a col0 ('.'), que es transparente → visualmente el brazo toca el contorno O de col1 con un hueco de 1px transparente en col0. Mal. Mejor: solapar: izq armX = bodyX - 3 (cols -3..0: col0 del brazo sobre col0 del cuerpo que es transparente; cols -3..-1 visibles). El contorno O del cuerpo col1 queda pegado al píxel O del brazo col0? El brazo col0 es '.' en filas 0,7 y 'O' en fila 1..6? ARM rows: ".OO."→col0='.', "OCCO"→col0='O'. Entonces sobre col0 del cuerpo se dibuja O del brazo en filas 1-6 → línea vertical O entre brazo y cuerpo... esa línea es contorno compartido — correcto en pixel art ✓. Y der: armRX = bodyX + 18 - 4 + ... para que el brazo O col3 caiga sobre col17 del cuerpo? col17 = '.'... El cuerpo: ".OCCCCCCCCCCCCCCO." col16='O', col17='.'. Para simetría respecto del izq (brazo col0='O' dibujado sobre cuerpo col0, con contorno del cuerpo col1 al lado), der: brazo col3='O' sobre cuerpo col17, contorno del cuerpo col16 al lado → armRX = bodyX + 17 - 3 = bodyX + 14? brazo cols 14..17, col3 del brazo en 17 ✓. Espera: armRX+3 = bodyX+17 → armRX = bodyX+14. Brazo cols 14..17: col14 sobre cuerpo col14 ('C' interior)... el brazo cubriría parte del cuerpo? brazo col0..2 en 14,15,16: col16 = O del cuerpo sobre el que se dibuja brazo 'C'... mal. Reconsidero: ancho cuerpo 18, cols 0..17, contornos col1 y col16, interior C col2..15. Brazos de 4 con solape de 1: izq: cols del brazo sobre -3..0? Eso deja solo 3 columnas visibles (brazo casi oculto). Más simple y más bonito: brazos de 3 de ancho pegados fuera, con solape de contorno: ARM3 (ancho 3): ``` ".O.", "OCO", "OCO", "OCO", "OCO", "OCO", "ORO", ".O.", ``` Hmm 1px de brazo se ve fino pero legible a escala grande... el robot total sería 22+2*2=26 con brazos de 2 visibles. Alternativa brazos 4 visibles 3: Decisión: brazo 4 ancho colocado completamente fuera del cuerpo, tocando el contorno: izq cols: bodyX-4 .. bodyX-1 (col -1 adyacente al contorno col1? hay col0 transparente entre ellos... El cuerpo col0 es '.' en todas las filas (padding del sprite). ¡Ajusto el cuerpo para que col0 sea el contorno! Redefino BODY sin padding izquierdo: BODY (18 ancho, contorno en col0 y col17): ``` ".OOOOOOOOOOOOOO..",? ``` Uf. Mejor mantener padding y colocar el brazo solapando el contorno (brazo dibujado DESPUÉS del cuerpo, sus píxeles O tapan el contorno — el solape de contornos se ve bien): izq: armX = bodyX - 2 → brazo cols -2..1: col0,1 del brazo sobre col0,1 del cuerpo: col1 del brazo ('C') tapa contorno O del cuerpo... y col3 del brazo = 'O' quedaría en bodyX+1 sobre interior 'C' → línea O flotando dentro del cuerpo ✗. OK, enfoque limpio: brazos como parte del cuerpo con hueco. O más fácil: hago el cuerpo más ancho e incluyo los brazos en el sprite del cuerpo, con el brazo animado dibujado aparte detrás del cuerpo. ¡Sí! Orden de dibujo: brazos primero (detrás), luego cuerpo encima. El brazo se coloca solapando 2px dentro del cuerpo y el cuerpo tapa el interior — solo se ve la parte exterior del brazo ✓. Sin problemas de contornos: el brazo es un rectángulo OCCO cuyo interior visible son 2-3 px fuera del cuerpo. izq: armX = bodyX - 3, brazo cols -3..0: col0 del brazo ('O' en filas 1..6) sobre cuerpo col0 ('.' transparente) → visible una columna O pegada al cuerpo... y luego el contorno O del cuerpo col1 → doble línea O. Hmm, pero si el brazo col0 se dibuja sobre el hueco y col1 del cuerpo es O: visual: brazo [O C C O] con O|C|C visibles y el O pegado al contorno del cuerpo — está bien realmente: brazo sobresale 3px (O,C,C) y su contorno exterior O + los C + luego el contorno del cuerpo O. Se leerá como brazo pegado con contorno compartido? Habrá O en col0 (brazo), C en col-1, C en col-2, O en col-3, luego hueco '.' col0? no: solapé: brazo cols bodyX-3..bodyX: sobre bodyX-3=O(brazo), bodyX-2=C, bodyX-1=C, bodyX=O(brazo, tapa el '.' del cuerpo). Luego bodyX+1 = O del cuerpo. Visual desde fuera: O C C O O — doble O en el borde ✗ feo. Solución definitiva: dibujar el brazo ANTES (detrás) del cuerpo y que el solape lo tape: brazo cols bodyX-1..bodyX+2 → visibles solo cols bodyX-1 (y bodyX-2? no). Quiero 2-3 px visibles: armX = bodyX - 4: cols -4..-1: todas fuera del cuerpo (cuerpo empieza col0 con '.' transparente)... entonces entre brazo (termina en col -1) y contorno del cuerpo (col1) hay col0 transparente → hueco de 1px ✗. → Hago que el cuerpo NO tenga padding: BODY col0 = contorno. Redefino BODY (16 de ancho, sin padding): BODY (16): ``` ".OOOOOOOOOOOOOO.",? no— "OOOOOOOOOOOOOOOO", 16 O ✓ (fila top, sin padding) "OCCCCCCCCCCCCCCO", 1+14+1 ✓ "OCSCCCCCCCCCCSCO",? → O C S 10C S C O = 1+1+1+10+1+1+1 = 16 ✓ "OCCCCCCCCCCCCCCO", ... "OOOOOOOOOOOOOOOO", ``` Top row completamente O (16) — esquinas cuadradas; redondeo: fila top: "OOOOOOOOOOOOOOOO" con cuerpo 16... esquinas: hago 16 de ancho con esquinas redondeadas: ``` r0 ".OOOOOOOOOOOOOO.", 1+14+1 ✓ r1 "OCCCCCCCCCCCCCCO", ✓ r2 "OCSCCCCCCCCCCSCO", ✓ ... r8 "OCSCCCCCCCCCCSCO", r9 "OCCCCCCCCCCCCCCO",? r9 ".OOOOOOOOOOOOOO.", ``` 10 filas: r0 borde sup redondeado, r1..r8 cuerpo, r9 borde inf. Bien: BODY 16 ancho × 10 alto sin padding. Brazo izq: armX = bodyX - 3 (cols -3..0): col0 del brazo sobre col0 del cuerpo (contorno O sobre O ✓ perfecto solape), cols -3..-1 visibles fuera (O,C,C) → brazo sobresale 3px con su contorno ✓✓. Brazo der: armRX = bodyX + 13 → cols 13..16: col16 sobre col15? cuerpo cols 0..15; armRX+3 = bodyX+16 → sobre col16 (fuera, transparente)... quiero que la col del brazo que solapa sea la col15 (contorno O): brazo col0 sobre col15 → armRX = bodyX+15 → cols 15..18: col15 brazo 'O' sobre contorno ✓, visibles cols 16,17,18 (O? brazo cols: [O,C,C,O] → col16=C, col17=C, col18=O ✓ sobresale 3 con contorno exterior ✓). Espera izq: brazo col3 sobre col0? armX=bodyX-3 → cols -3,-2,-1,0: col3 del brazo (ARM[.]="OCCO" col3='O') sobre col0 del cuerpo ✓ y visibles col0,1,2 del brazo = O,C,C sobre cols -3,-2,-1 ✓. Simétrico ✓. Brazos: alto 8, y = bodyY + 2 (colgando del hombro). Balanceo: armOffY = round(sin(t*3)*1) alternando fases (izq/der opuestos) — caminante alegre ✓. Durante saludo: brazos arriba? ¡Sí! En happy: brazos levantados = dibujar brazo con offsetY -6 (quedan al nivel de la cabeza... el brazo subiría hasta bodyY+2-6 = bodyY-4, alto 8 → termina en bodyY+4, sobresale al lado de la cabeza. Con manos R arriba — como decir ¡hurra! ✓ divertido. Con brazos levantados quiero la mano (R) arriba: el sprite del brazo tiene mano abajo. Uso versión flipped vertical para happy: ARM_UP (mano arriba): ``` ".OO.", "ORRO", "OCCO", "OCCO", "OCCO", "OCCO", "OCCO", ".OO.", ``` ✓ dibujar este cuando happy con offsetY tal que quede arriba: brazo up: y = bodyY - 4 (así la mano R queda a la altura de la parte alta del cuerpo/cabeza). Ajustaré visualmente: bodyY-3. THRUSTER: colocado bajo el cuerpo: bodyY+10. Ancho 10, centrado: thX = bodyX + 3. ``` "..OOOOOOOO..", 2+8+2=12? quiero 12: 2+8+2=12 ✓ ancho 12 ".ODDDDDDDDO.", 1+1+8+1+1=12 ✓ ".OOOOOOOOOO.",? ``` Simplifico thruster 12x3: ``` "..OOOOOOOO..", ✓ ".ODDDDDDDDO.", ✓ "..OOOOOOOO..", ✓ ``` Llama bajo thruster: y = thY+3, x interior: thX+2..thX+9 (8 columnas) ✓. Ahora tamaño total del robot: ancho con brazos: 16+3+3=22 ✓ igual que cabeza. Cabeza centrada sobre cuerpo: headX = bodyX + (16-22)/2 = bodyX - 3 ✓. headY = bodyY - 14 (cabeza 18 filas incluyendo antena: filas 0-3 antena, 4-13 cabeza). headY tal que fila 13 (bottom cabeza) esté en bodyY-1: headY = bodyY - 14 ✓. La antena bola en headY+0..1. Swing antena: dibujo bola y tallo con offsets: tallo son filas 2,3 del sprite (2px de alto en x=10,11). Con swing s (px, -2..2): dibujo el sprite HEAD sin filas de antena? Más fácil: dibujo HEAD completo (antena vertical) y luego, encima, la bola desplazada (tapo la bola original con... no puedo "tapar" fácil porque el fondo varía). Alternativa: separo el sprite: HEAD (sin antena, filas 4-13) y antena dibujada dinámicamente: tallo: si |s|<0.5: rect (hx+10, hy, 2, 2)? Diseño: antena dinámica completa: - baseX = hx+10 (tallo x), baseY = hy (top de cabeza). - Tallo: 2 segmentos de 2px de alto: seg1 (más bajo): x = baseX + round(s*0.5)?? El tallo se curva: seg bajo offset 0..; Simplifico: tallo: dibujo 2 píxeles de alto: fila inferior (y = headTop-2): x = cx + round(s*0.6), fila superior (y = headTop-1)? Espera coordenadas: cabeza top en headY+4. Tallo ocupa headY+2..headY+3 (2 px de alto), bola headY+0..1. Con swing s (-2..2): - fila inferior del tallo (headY+3): x = cx + round(s*0.4) - fila superior (headY+2): x = cx + round(s*0.8) - bola (headY..headY+1, 2x2): x = cx + round(s*1.2) - hmm bola 2x2: x = cx + round(s) - 1... Defino cx = hx + 10 (centro antena) y dibujo tallo como línea de 2px de ancho siguiendo curva, bola 2x2 en top con offset s*1.5, más píxel Y brillante cuando flash. La física: swingV += (-swing*K - swingV*D) + inputImpulso; input: al mover mouse rápido, aplicar aceleración proporcional a delta del mouse; y el bob del robot añade oscilación leve. Al saltar: impulso. Implementación: ```js bot.swingV += (-bot.swing*14 - bot.swingV*3.5) * dt; // muelle amortiguado bot.swing += bot.swingV * dt; // excitación: bot.swingV += (mx - pmx) * 0.4; (delta mouse) ``` Y clamp swing a ±2.2. Bola offset = round(swing*1.4) etc. La luz Y de la bola: parpadeo: alterna Y brillante/tenue cada 0.8s (seno), y en flash (saludo) blanco W + quizá dibujar "rayitos" de 4 píxeles alrededor (destello) durante 0.3s ✓ bonito. Cuerpo con bob: bobPhase individual para cabeza (delay): cabeza sigue al cuerpo con lag: headBob = sin(t*2.2+0.4)*1 redondeado; cuerpo bob = sin(t*2.2)*1.5. Al saltar todo sube junto. Estados de mirada también afectan cabeza: cabeza inclinada hacia mouse: headOffX = mira? Ya los ojos siguen. Añado headOffX = clamp(round((mx - cx)/60), -1, 1) — cabeza se desplaza 1px hacia el mouse ✓ sutil y vivo. Explosión de saludo: 26 partículas radiales: colores [Y,W,R,y], vel radial 20-45 px/s, gravedad +30, fricción, vida 0.5-0.9s. + anillo? suficiente. Puff de polvo en click de suelo: 6 partículas S/M hacia arriba con vida corta + marca temporal? ok partículas. Chispas de thruster: cada ~0.06s (más frecuente con boost): spawn en (thX+rand*8, llamaY), vy=+14..22, vx=rand±4, vida 0.4s, color y/R. Al moverse (boost) más. Ahora los números de posición: - groundY = H - groundH; groundH = max(12, round(H*0.18)). - robot hover: base bodyBottom = groundY - hover; hover = 10. bodyY = groundY - 10 - 10 (alto cuerpo) = groundY-20; bodyY base con bob. - bot.x = centro: bx = round(bot.x - 8) (cuerpo 16 de ancho). Sombra: en groundY+1, centrada en bot.x: ancho = clamp(round(26 - (groundY - (bodyY+20))*1.2), 8, 26)? Cuando el robot está en hover normal la distancia es 10 → ancho ~14; al saltar (sube 8) distancia 18 → ancho ~5... mínimo 6. Dibujo 1-2 filas de altura 1px color #142819 sobre el suelo? El suelo top tiene borde claro #2E5540 en groundY..+1; sombra en groundY (sobre el borde) mejor: sombra y = groundY, dibujo rect (sx-w/2, groundY, w, 2) color #182E20 (más oscuro que el borde)... contraste sutil ✓. Además sombra pixelada = 2 rects: centro w, y extremos w-8 a 1px alto → elíptica. Ok: rect(cx-w2, gy, w, 1) + rect(cx-w2+2, gy+1, w-4, 1). Estrellas y demás con PRNG seedado: ```js function mulberry32(a){return function(){a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}} ``` Pre-render bg (colinas, pinos, suelo) en resize a un canvas W×H. Estrellas: por frame. Colinas: - Lejana: color #14241B; base = groundY - 8, amp 6, freq 0.045, seed 1 → para cada x: y = base + round(sin(x*0.045+1.7)*5 + sin(x*0.11+0.3)*2); fillRect(x, y, 1, groundY-y). - Cercana: color #1B3223; base = groundY - 4, amp 4, freq 0.06. Pinos sobre cercana: en 3 posiciones u (0.18, 0.55, 0.86): alto 10-14: dibujo triángulos apilados color #14241B (silueta oscura delante de colina cercana? mejor más oscuro que cercana: #122019) + tronco 1x2. Cada pino: for level... dibujo simple: filas: for i in 0..h: width = ... triángulo escalonado: w = ((h-i)%... Uso: for row r=0..h-1: w = 1 + r (crece hacia abajo) con recorte: draw x-w/2..—; con escalones cada 2 filas reset? Pino pixel: tres triángulos: ``` niveles: 3 triángulos de 5,7,9 de ancho ``` Función pine(x, baseY, s): dibuja píxel a píxel: total h = s*3+2. Simple: for tri t=0..2: topY = baseY - (t+1)*3; halfW = 2+t; for dy=0..2: w = dy*2+1? triángulo: filas dy=0..3: width = round(dy*halfW/3)*2+1... Me limito a: ```js function pine(cx, by, s){ ctx.fillStyle = '#122019'; for(let t=0;t<3;t++){ const w = 3 + t*2; // 3,5,7 const top = by - (t+1)*3 - 1; // solapa for(let dy=0; dy<3; dy++){ const hw = Math.round(w*(dy+1)/3/2);? ``` Me lo permito más simple: triángulos con bucle de filas: ```js for(let t=0;t<3;t++){ const half = 1 + t; // 1,2,3 const yTop = by - 2 - (t+1)*3; for(let dy=0;dy<=2;dy++){ const w = 1 + Math.round(dy*(half)/2)*2; // crece ctx.fillRect(cx - (w>>1), yTop+dy, w, 1); } } ``` Hmm esto da medias pirámides; añadiré fila base de ancho completo (2*half+1). Lo puliré en el código con criterio: filas dy 0..3, w = dy*2+1 clamp a max (3,5,7)*? Al final: t=0: filas w 1,3,3? Ok definiré en el código: ```js function pine(cx, by){ const layers=[[1,3],[2,5],[3,7]]; // [halfTop..]: dibujo cada capa como 3 filas: w = half*2+1 en la base, punta arriba layers.forEach(([h],i)=>{ ... }); } ``` Concreto en código final: ```js function pine(cx, by){ P.fillStyle='#122019'; // tres niveles const levels=[{h:1,y:by-11},{h:2,y:by-8},{h:3,y:by-5}]; for(const L of levels){ for(let dy=0; dy<4; dy++){ const w = Math.min(L.h*2+1, 1+dy*2); P.fillRect(cx-Math.floor(w/2), L.y+dy, w, 1); } } P.fillRect(cx-1? tronco: P.fillRect(cx, by-2, 1, 2); } ``` Hmm los niveles se solapan y=by-11..-8, -8..-5, -5..-1... El tercero llega a by-2, tronco by-2..by. Vale, refinaré al escribir, no es crítico — silueta. Suelo pre-render: - fillRect(0, groundY, W, H-groundY) color #204030? Paleta suelo: base #23462F, borde sup 2px #37634A, y 1px highlight #4C7A5C en groundY? El orden: y=groundY: #4C7A5C (línea de luz), groundY+1..+2: #37634A, resto #23462F, hacia el fondo (abajo) más oscuro #1A3624 en la mitad inferior (banda sólida, no gradiente) con dithering de transición (patrón ajedrez) entre las dos — dithering pixel-art auténtico ✓. - Textura: ~W*0.8 puntos: píxeles #37634A (matas 1x2 a veces) y #1A3624 dispersos; florecitas: 8 puntos Y o R de 1px con tallo g? pequeño: píxel color + tallo 1px #37634A debajo? En suelo la flor: píxel Y en (x, y) y tallo (x, y+1) verde... ok 6 flores. - Piedritas: 4 rects 2x1 M? gris cálido #6B5F4C. ✓ Luciérnagas: por frame: 6 unidades: anchor u aleatoria (0.1..0.9), v cerca groundY-6..-14; pos = anchor + sin/cos Lissajous (amp 4-8, lentas); brillo: s=sin(t*1.3+phase): si s>0.3: dibujar W (si s>0.85) o G, con parpadeo. Delante de todo el fondo, detrás del robot? En medio: algunas delante. Simple: dibujarlas después del robot pero lejos del robot... las dibujo antes del robot ✓. Nubes: 2 nubes: sprite nube (procedural: 3 rects solapados) color #1E3327 (más claro que cielo #0E1A14, apenas visible ✓) moviéndose lentamente (vx 1.2 px/s), wrap. Posición y: 10-30% de H. Dibujo: rects: (x,y,10,2),(x+2,y-2,6,2)? nube pixel 12x4: ``` "..CCCCC....",? ``` Procedural simple: fillRect(x,y,8,2); fillRect(x+3,y-2,6,2)? forma de nube bajo. ok. HUD count: actualizar textContent al saludar. Hint se desvanece tras el primer saludo (opacity transition) ✓. Cursor: al hacer click, pulse: cursorPulse=1 → decae; gap = 2 + round(pulse*2). Dibujo mira: color W con sombra: primero píxeles O offset (1,1), luego W. Píxeles: horizontales: (mx-g-1,my,2,1) izq? Diseño: 4 líneas: left: x from mx-g-2 to mx-g-1 (2px), right: mx+g..mx+g+1, up/down igual. Con hueco central ✓. También al hover sobre el robot: la mira cambia? extra; skip. Touch: touchmove → mouse pos; touchstart → click handling + pos. Prevent scrolling: touch-action: none en CSS ✓. Saludo condición: distancia al centro del robot < 16 en backbuffer px (radio generoso). Click handling: ```js function press(mx,my){ initAudio(); const cx=bot.x, cy=bodyCenterY (bot.y); if(Math.abs(mx-cx)<15 && Math.abs(my-cy)<20){ greet(); } else if(my>=groundY-2 && my<=H){ dust(mx, my); } else { // chispita minúscula? pequeña marca: 3 partículas W tenues sparkSmall(mx,my); } cursorPulse=1; } ``` Bien: click en aire → mini chispa de 4 píxeles que caen (como polvo estelar) ✓ responde a todo. greet(): ```js if(bot.greet>0) return; // cooldown durante animación bot.greet=1; // timer decae bot.vy-= // impulso: jumpT=0 inicia curva boop(); count++; hud... spawn chispas alrededor del robot (radio, desde centro) flash antena: bot.flash=0.5 ``` Animación de salto: bot.jumpT de 0→1 en 0.7s; yOffset = -round(9*sin(pi*min(jumpT/0.7,1)))... con easing: y = -9 * sin(pi*p) (p 0..1) ✓ sube y baja suave. Durante 04s): deriva con noise lento: lookX = round(sin(t*0.3)*1), lookY=0. Al mover mouse, retoma seguimiento ✓ detalle. Wander target: cada 6-10s: tx = rand(24, W-24), ty = groundY-20-rand(0,10)? mantener banda de altura: bodyY base = groundY-20 - hoverVar (hover entre 8..16 lentamente variable: uso el propio target y). Movimiento: velocidad hacia target: vx = clamp((tx-x)*0.8, -maxs, maxs) con maxs=6 px/s... suave: v = lerp hacia deseado. facing = sign(vx) — ¿afecta al sprite? El robot es simétrico; facing afecta: panel LED? y la cabeza offset? Uso facing para: inclinación (tilt): al moverse, cabeza offset x = sign(v)*1 (se inclina hacia donde va) y swing de antena recibe -v*algo (antena se queda atrás ✓ física natural: swingV += -vx_delta). Simplifico: swing target = -vx*0.3. Thruster boost al moverse: speed = |v|; boost = clamp(speed/6, 0, 1); llama alturas * (1+boost*1.5) y spawn chispas rate * (1+boost*3) ✓. Detalle: al moverse el robot, ¿se mueve el fondo? No (2D fijo), ok. Ahora, el render del robot con offsets: ```js function drawBot(t){ const bobB = Math.sin(t*2.1)*1.0; // cuerpo const bobH = Math.sin(t*2.1+0.5)*0.8; // cabeza (retraso) let jy=0; if(bot.jumpT>0){...} const bx = Math.round(bot.x)-8; const by = Math.round(bot.y + bobB + jumpY); // bot.y = groundY-20-hover base ... } ``` Defino bot.y como base del cuerpo (top del sprite cuerpo) sin bob. hover varía: bot.y = groundY - 10 - 10 - hoverExtra donde hoverExtra = round(sin(t*0.4)*2 + wobble lento) → flotación lenta de altura ✓. Mejor integrar: bot.hover target cambia con wander (ty). Mantengo: bot.y va hacia targetY (groundY-20-rand(0,8)) suavemente; bob añade ±1. Salto: jumpY extra (negativo). Orden de dibujo del robot: 1. llama thruster (partículas después) 2. thruster sprite 3. brazos (detrás del cuerpo) — armY = by+2+armSwing (o up) 4. cuerpo sprite 5. panel + LED + remaches 6. cabeza (headX=bx-3, headY=by-14+round(bobH-bobB)+jump aplicado? el salto aplica a todo: sumo jumpY a by antes, y bobH solo afecta cabeza ✓) 7. antena dinámica (tallo+bola con swing) 8. ojos en pantalla 9. boca happy si aplica Ojos: pantalla abs: ex0 = headX+4, ey0 = headY+8 (filas 8..11). Ojo izq x = ex0+2 (+lookX) → base 6 relativo... antes definí ojos rel x=6..7 y 14..15 con look ±1: clamp dentro pantalla (4..17): izq 6+lx ∈ 5..7 ✓ (7+1=8 < 14 ok), der 14+lx ∈ 13..15, +1 = 16 ≤17 ✓. Ojo y = 9+ly? base: ojos 2x2: y=9..10 default; ly=-1 → 8..9; ly=+1 → 10..11 ✓ dentro pantalla (8..11) ✓. Happy: ^^ en y: arco: píxeles (ox,oy+1),(ox+1,oy),(ox+2,oy+1) con oy=8; y sonrisa: (ex0+4,ey0+3)=(fila 11) centro... sonrisa: píxeles en fila 11: x = ex0+5..ex0+9? y puntas fila 10 en ex0+4 y ex0+10? pantalla x 4..17: centro 10.5 abs... sonrisa: abs: (ex0+5,11),(ex0+6,11),(ex0+7,11),(ex0+8,11) + puntas (ex0+4,10),(ex0+9,10). Ok — sonrisa de 6 px ✓. Blink: ojos como línea: fillRect(ox, 10+ly?, 2,1) — solo en fila 10 fija ✓. Ojo normal: fillRect G 2x2 + píxel W en (ox, oy)?? W arriba-izq del ojo: hace el ojo con brillo ✓ (G en resto 3 px). Boca normal: ninguna (limpio). Estados: happy (durante jump + 0.6s tras aterrizar), blink, normal. LED del panel: color = happy? W parpadeo rápido : (alterna R cada 0.7s con duty 50%) → (t%1.4<0.7)? '#D96B45':'#7A3324'. Posición: (bx+15, by+5)? cuerpo interior x2..15: LED en (bx+15? col15 es 'C' interior? cols interior 2..15 con contorno col0/col15? BODY 16: contornos col0 y col15, interior 1..14. Remaches: (bx+1,by+1),(bx+14,by+1)? píxeles R sobre C en fila1 ✓. Panel marco: x=bx+3..bx+12 (10 ancho), y=by+3..by+6? cuerpo filas 0..9, filas útiles 1..8. Panel: marco O rect (bx+3, by+3, 10, 4); pantalla E (bx+4, by+3? ...) mejor: marco 10x4 en y=3..6: O en borde, interior E (bx+4..bx+11, by+4..by+5) 8x2: barras: 8 segmentos, sweep pos p = tri(t*1.2)*7 → nivel = round: dibujo G en x=4..4+k. Hmm con 8x2, sweep k 0..7: fillRect(bx+4, by+4, k+1? ... hago: k=round(tri*7); encendidos: columnas 0..k en G, col k+? cabeza en W. Simple y legible ✓. Y LED en (bx+14? interior hasta 14: LED (bx+14? col14) — pero panel llega a bx+12; LED en bx+14,by+4 ✓ con remache en bx+14,by+1 arriba... puede saturar; quito remache derecho, dejo remache solo izq? Mejor: quito remaches, LED a la derecha del panel. Remaches: pongo 2 píxeles S en (bx+1,by+1),(bx+14,by+8)? esquinas sombreadas sutiles. Simplifico: sin remaches; el cuerpo tiene brillo W: píxel W en (bx+1? ... ya hay S en fila 2/7 para sombreado. Añado highlight W en (bx+2,by+1)? Sutileza: píxeles W en fila 1 cols 2-3 (brillo superior izquierda) ✓. BODY rows con S: r2 "OCSCCCCCCCCCCSCO" y r7 igual, r1 "OCCCCCCCCCCCCCCO" → cambio r1 a "OCWCCCCCCCCCCCCO"? hmm W muy brillante; uso r1: "OCCCCCCCCCCCCCCO" y r2 "OCWCCCCCCCCCCCCO"? Simetría... ok: r1: "OCCWCCCCCCCCCCCO"? Me detallo en el código: r1 = "OCWCCCCCCCCCCCCO"? Brillo arriba izq: W en col2 fila1. Bien: "OCWCCCCCCCCCCCCO" = 1+1+1+12+1 = 16 ✓ (O C W 12C O). Espera 1+1+1+12+1=16 ✓. Y sombra inferior: r8 = "OCSCCCCCCCCCCSCO"? filas: 0 top,1,2,3,4,5,6,7,8,9 bottom: sombra en r8: "OCSCCCCCCCCCCSCO"? = O C S 10C S C O? 1+1+1+10+1+1+1=16 ✓. Ok. Ahora el PANEL dinámico se dibuja sobre el cuerpo después del sprite ✓. THRUSTER dibujo: sprite 12x3 en (bx+2, by+10). Llama: columnas cx=bx+3..bx+12? interior D de thruster fila1: x=bx+3..bx+10 (8 D: ".ODDDDDDDDO." → cols 2..11 son O? ".O D(8) O." → col1=O, cols2..9=D(8), col10=O, col11='.'. Espera: ".ODDDDDDDDO." = 1+1+8+1+1 = 12 ✓: col0='.', col1='O', col2..9='D', col10='O', col11='.'. Interior D: x=bx+2..bx+9 ✓ (8 columnas). Llama: x = bx+2..bx+9. Y fila2 "..OOOOOOOO.." cols 2..9 = O → la boca inferior es de 8 de ancho ✓. Llama nace en y=by+13. Llama render: ```js const glow = 1 + boost*1.2 + (jumping? 1.2:0); for(let i=0;i<8;i++){ const n = 0.5+0.5*Math.sin(t*18+i*1.7+bot.seedPhase); // parpadeo rápido let h = Math.round((1+n*1.6) * glow * (i==0||i==7 ? 0.7 : 1)); // bordes más cortos h = max(1, h + (mover ruido)); for(let k=0;k ROBOT-7 · pixel pet

ROBOT‑7_

SALUDOS 0

MUEVE EL CURSOR · CLICK EN EL ROBOT: SALUDO

``` Uso ‑ (non-breaking hyphen) para "ROBOT-7" sin salto. Ok. JS: ```js 'use strict'; const cv = document.getElementById('c'); const ctx = cv.getContext('2d'); const hint = document.getElementById('hint'); const countEl = document.getElementById('count'); /* ---------- paleta ---------- */ const COL = { O:'#26221c', C:'#f2e4c4', S:'#d9bf9b', R:'#d96b45', r:'#a64b32', Y:'#ffd95e', y:'#c99b33', W:'#fffdf2', D:'#4a4640', E:'#22331f', G:'#8fd66b', g:'#5fa347', sky:'#0e1a14', hillFar:'#14241b', hillNear:'#1b3223', pine:'#122019', gnd:'#23462f', gndHi:'#37634a', gndLight:'#4c7a5c', gndDark:'#1a3624', shadow:'#152b1d', cloud:'#1d3326', star1:'#efe3c4', star2:'#8fa08a', star3:'#57685c' }; ``` Sprites con cache: ```js const spriteCache = new Map(); function sprite(rows){ const key = rows.join('|'); if(spriteCache.has(key)) return spriteCache.get(key); const w = Math.max(...rows.map(r=>r.length)), h = rows.length; const c = document.createElement('canvas'); c.width=w; c.height=h; const g = c.getContext('2d'); rows.forEach((row,y)=>{ for(let x=0;x pine(g, Math.round(u*W)+ (i%2?2:-3), groundY-3, 1)); // suelo g.fillStyle = COL.gnd; g.fillRect(0, groundY, W, H-groundY); g.fillStyle = COL.gndHi; g.fillRect(0, groundY, W, 2); g.fillStyle = COL.gndLight; g.fillRect(0, groundY, W, 1); // franja oscura inferior con dithering const dh = Math.max(4, Math.round((H-groundY)*0.45)); const dy = H - dh; g.fillStyle = COL.gndDark; g.fillRect(0, dy+3, W, dh-3); // dither ajedrez en la transición for(let x=0;x=H) continue; if(d.k==='flower'){ g.fillStyle = d.c<0.5?COL.Y:COL.R; g.fillRect(x, gy, 1, 1); g.fillStyle = COL.gndHi; g.fillRect(x, gy+1, 1, 1); } else if(d.k==='tuft'){ g.fillStyle = COL.gndHi; g.fillRect(x, gy, 1, 2); g.fillRect(x+1? ... ``` tuft: 3 píxeles: (x,gy),(x+2,gy),(x+1,gy-1)? forma de matas: dibujo (x,gy,1,1),(x+1,gy-1,1,1),(x+2,gy,1,1) → "v" invertida... ok. dot: 1px gndDark o gndHi según d.c. Además florecitas solo cerca del borde (gy < groundY+6)? las flores en todo el suelo ok. Piedras: 3-4: en DECOR con k='stone'? añado: if(d.k==='stone') rect 2x1 COL.M? No definí M en COL para bg... pongo '#6b5f4c'. Añado k stone prob baja. En DECOR gen: k = r<0.08?'flower2'... simplifico: k: rnd()<0.1?'flower':(rnd()<0.3?'tuft':(rnd()<0.36?'stone':'dot')). pine(g, cx, by, s): ```js function pine(g, cx, by){ g.fillStyle = COL.pine; const lv = [[1,-12],[2,-9],[3,-6]]; for(const [h,oy] of lv){ for(let dy=0; dy<4; dy++){ const w = Math.min(h*2+1, 1+dy*2); g.fillRect(cx-(w>>1), by+oy+dy, w, 1); } } g.fillRect(cx, by-2, 1, 2); } ``` Niveles: nivel1 (h=1): filas w: 1,1? Math.min(3, 1+dy*2): dy0:1, dy1:3, dy2:3(capped? 1+2*2=5→min3→3), dy3:3 → triángulo de 4 filas ✓. nivel2 (h=2): w: 1,3,5,5 ✓. nivel3: 1,3,5,7 ✓. y offsets: -12..-9, -9..-6, -6..-3, tronco -2..0 (by-2 2px: by-2,by-1) hmm nivel3 llega hasta by-3+? by+(-6)+3 = by-3 (última fila)... tronco by-2,by-1: hueco en by-3? nivel3 filas: by-6, -5, -4, -3; tronco: by-2, by-1; base by? suelo en groundY-3 = by → colinas... by = groundY-3: pino base sobre línea de colina cercana ✓. Ok bien (solapa del nivel sobre tronco: filas consecutivas ✓). Estrellas y luna por frame (antes de bg): ```js function drawSky(t){ ctx.fillStyle = COL.sky; ctx.fillRect(0,0,W,H); for(const s of STARS){ const x = Math.floor(s.u*W), y = Math.floor(s.v*H); const tw = Math.sin(t*s.sp + s.ph); if(tw > 0.4){ ctx.fillStyle = tw>0.85 ? COL.star1 : COL.star2; ctx.fillRect(x,y,1,1); if(s.big && tw>0.7){ ctx.fillRect(x-1,y,1,1); ctx.fillRect(x+1,y,1,1); ctx.fillRect(x,y-1,1,1); ctx.fillRect(x,y+1,1,1); } } else if (tw > -0.2){ ctx.fillStyle = COL.star3; ctx.fillRect(x,y,1,1); } } // luna blit(sprite(MOON_ROWS), W*0.78, H*0.1); // nubes ctx.fillStyle = COL.cloud; for(const c of CLOUDS){ const cw = c.w; let x = ((c.u*W + t*c.s*1.4) % (W+cw*3)) - cw*1.5; const y = Math.floor(c.v*H); ctx.fillRect(Math.round(x), y, cw, 2); ctx.fillRect(Math.round(x)+3, y-2, Math.max(3,cw-6), 2); } } ``` Luna con parallax? no. Espera: la luna cerca del HUD title? title está arriba-izq, luna arriba-der ✓ y count arriba-der… la luna bajo el count (count a 18px de pantalla ≈ 3-6px de backbuffer... la luna en y=H*0.1 (~12px) podría solaparse con el texto del count. Count está en la esquina (right:18px) y luna en W*0.78 — para W=240, luna x≈187, count ocupa ~90px de pantalla... puede chocar visualmente pero HUD es overlay pequeño; muevo luna a W*0.76, H*0.13 y count está arriba a la derecha — aún cerca. Alternativa: luna a la izquierda debajo del title? title arriba-izq. Luna en x=W*0.7, y=H*0.18? La dejo en (0.74W, 0.14H); el HUD es pequeño (8px font ≈ 2px backbuffer... no: el HUD está en px de pantalla, la luna en px de backbuffer escalados: 13px de backbuffer * SCALE 8 = 104px de pantalla. El count está en la esquina sup derecha; la luna centrada en 0.74W queda un poco a la izquierda del count ✓ ok. Luciérnagas: ```js function drawFlies(t){ for(const f of FLIES){ const s1 = Math.sin(t*f.f1 + f.ph), s2 = Math.sin(t*(f.f2+0.13) + f.ph*2.1); const x = Math.round(f.u*W + s1*f.a1); const y = Math.round(groundY - 6 - Math.abs(s2)*f.a2 - 2); const tw = Math.sin(t*2.1 + f.ph*3.3); if(tw > -0.1){ ctx.fillStyle = tw > 0.75 ? COL.W : COL.G; ctx.fillRect(x, y, 1, 1); } } } ``` Robot update: ```js function update(dt, t){ // wander bot.wanderIn -= dt; if(bot.wanderIn <= 0){ bot.wanderIn = 5 + Math.random()*5; bot.tx = 22 + Math.random()*(W-44); bot.liftT = Math.random()*9; } // física hacia target const dvx = bot.tx - bot.x; const want = Math.max(-7, Math.min(7, dvx*0.55)); bot.vx += (want - bot.vx) * Math.min(1, dt*2.2); bot.x += bot.vx * dt; bot.fx = bot.x / W; const wantLift = bot.liftT||0; bot.lift += ((wantLift) - bot.lift) * Math.min(1, dt*1.2); bot.moving = Math.abs(bot.vx) > 0.6 ? 1 : 0; // antena bot.swingV += (-bot.swing*16 - bot.swingV*3.2) * dt; bot.swingV -= bot.vx * dt * 1.6; // el cambio de velocidad empuja la bola bot.swing += bot.swingV * dt; bot.swing = Math.max(-2.2, Math.min(2.2, bot.swing)); // parpadeo bot.blinkIn -= dt; if(bot.blinkIn <= 0){ bot.blinkT = 0.14; bot.blinkIn = 2.2 + Math.random()*3.5; } if(bot.blinkT > 0) bot.blinkT -= dt; // saludo / salto if(bot.jumpT >= 0){ bot.jumpT += dt; if(bot.jumpT >= JUMP_DUR){ bot.jumpT = -1; landFx(); // puff al "aterrizar" flotando } } if(bot.happy > 0) bot.happy -= dt; if(bot.flash > 0) bot.flash -= dt; // partículas updateParticles(dt); // chispas thruster thrTimer -= dt; const boost = boostLevel(); if(thrTimer <= 0){ thrTimer = 0.05 + Math.random()*0.06 / (1+boost*2); particles.push({ x: bot.x-4+Math.random()*8, y: thrTipY(), vx:(Math.random()-0.5)*6, vy: 16+Math.random()*14, life: 0.35+Math.random()*0.25, c: Math.random()<0.5?COL.y:COL.R, g: 40 }); } // cursor pulse if(cursorPulse>0) cursorPulse = Math.max(0, cursorPulse - dt*3); // mouse idle if(mouse.seen) mouse.idleT += dt; } ``` boostLevel(): |vx|/7 + jumping*1 → clamp 0..1.6. thrTipY(): baseY actual + 13 (bajo thruster): la computo igual que render: necesito y del cuerpo: bodyTopY = Math.round(groundY - 24 - bot.lift + bob...) — mejor función común: computeBotPos(t) devuelve {bx, by, jy} y la uso en render y para spawn. ```js function botPos(t){ const bob = Math.sin(t*2.1); let jy = 0; if(bot.jumpT >= 0){ const p = Math.min(1, bot.jumpT / JUMP_DUR); jy = -Math.round(Math.sin(Math.PI*p) * 8); } const bx = Math.round(bot.x) - 8; const by = Math.round(groundY - 24 - bot.lift + bob) + jy; return {bx, by, jy}; } ``` groundY-24: cuerpo top; cuerpo 10 alto → bottom en groundY-14; thruster hasta groundY-11; llama 1-4px hasta ~groundY-7; hover visual ✓ (por encima del suelo groundY). JUMP_DUR = 0.75. landFx(): 8 partículas de polvo a los lados: color COL.gndHi/S, vx ±(8..20), vy -6..-14, vida 0.3, gravedad 60. + pequeño squash: uso bot.land=0.12 para offset +1? Añado bot.squash timer: en botPos: if(bot.squash>0) by += 1. Y squash decae en update. ✓ greet(): ```js function greet(){ if(bot.jumpT >= 0) return; bot.jumpT = 0; bot.happy = JUMP_DUR + 0.7; bot.flash = 0.6; greets++; countEl.textContent = 'SALUDOS ' + greets; hint.classList.add('off'); // chispas radiales const cx = bot.x, cy = botPos(now).by + 8;? botPos necesita t... uso lastPos guardado for(let i=0;i<24;i++){ const a = Math.random()*Math.PI*2, sp = 18+Math.random()*30; particles.push({x:cx, y:cy, vx:Math.cos(a)*sp, vy:Math.sin(a)*sp - 10, life:0.5+Math.random()*0.4, c:[COL.Y,COL.W,COL.R,COL.y][i&3], g:50, d:0.92}); } boop(); } ``` Guardo lastPos global cada frame (lp = botPos(t)) para usar en eventos ✓. updateParticles: ```js function updateParticles(dt){ for(let i=particles.length-1;i>=0;i--){ const p = particles[i]; p.life -= dt; if(p.life<=0){ particles.splice(i,1); continue; } p.vy += (p.g||0)*dt; if(p.d) p.vx*=p.d, p.vy*=p.d; p.x += p.vx*dt; p.y += p.vy*dt; } } function drawParticles(){ for(const p of particles){ ctx.fillStyle = p.c; ctx.fillRect(Math.round(p.x), Math.round(p.y), 1, 1); } } ``` Con fade: si life<0.15 color más oscuro? skip (pixel art, desaparecen). drawBot(t): ```js function drawBot(t){ const {bx, by} = botPos(t); const hb = Math.round(Math.sin(t*2.1+0.55) * 0.9); // bob de cabeza const hx = bx - 3, hy = by - 10 + hb; // inclinación hacia el ratón const look = lookDir(); // {lx, ly} const headShift = clampInt? = mouse.seen && mouse.idleT<3 ? (look.lx) : Math.round(Math.sin(t*0.4)); ``` Hmm headShift: 1px hacia el mouse cuando activo: headShift = look.lx (−1..1) ✓. Y con facing al moverse: si bot.moving, headShift = bot.vx>0?1:-1... mezclo: shift = moving? sign(vx) : look.lx. ```js const sh = bot.moving ? (bot.vx>0?1:-1) : look.lx; const hxx = hx + sh; // llama drawFlame(bx, by, t); // thruster blit(sprite(THR_ROWS), bx+2, by+10); // brazos const happy = bot.happy>0; const armSw = Math.round(Math.sin(t*3.2)*1); if(happy){ blit(sprite(ARM_UP_ROWS), bx-3, by-4); blit(sprite(ARM_UP_ROWS), bx+15, by-4); } else { blit(sprite(ARM_ROWS), bx-3, by+2+armSw); blit(sprite(ARM_ROWS), bx+15, by+2-armSw); } // cuerpo blit(sprite(BODY_ROWS), bx, by); // panel drawPanel(bx, by, t); // cabeza blit(sprite(HEAD_ROWS), hxx, hy); // antena drawAntenna(hxx, hy, t); // cara drawFace(hxx, hy, look, happy); } ``` Brazos: bx-3 y bx+15: verifico: brazo izq cols bx-3..bx (col3 sobre col0 del cuerpo ✓ contorno). der: brazo cols bx+15..bx+18: col0 sobre col15 (contorno ✓), visible bx+16..18 ✓. Brazo up en y=by-4: brazo 8 alto: filas by-4..by+3: sobresale por encima del cuerpo (by) hasta by-4 → al lado de la cabeza (cabeza bottom by-1... cabeza ocupa by-10..by-1). El brazo up top en by-4 queda detrás de... x: brazo izq bx-3..bx: la cabeza abarca hx=bx-3..bx+18? cabeza 22 ancho: hxx..hxx+21 = bx-3..bx+18 (con shift 0). ¡La cabeza es más ancha que el cuerpo! Entonces el brazo up (x bx-3..bx) queda DETRÁS de la cabeza (se dibuja antes) → invisible ✗. La cabeza en filas by-10..by-1: su parte baja en x bx-3..bx+18 — el brazo levantado estaría tapado por la cabeza salvo filas... cabeza fila 9 (bottom) es más estrecha (3+16+3: x hxx+3..hxx+18). Brazo up x hxx..hxx+2 visible solo si cabeza no lo tapa: cabeza fila 8 (r8 "..OSC...": x hxx+2..hxx+19): brazo cols hxx..hxx+2: col hxx+2 lo tapa... Solapa parcial: el brazo up visible en cols hxx, hxx+1 en filas by-4..by-1 (donde cabeza es estrecha o...). Filas by-1: cabeza r9 "...OOOO...": x hxx+3..hxx+18 → brazo cols hxx..hxx+2 libres ✓ visible. Filas by-2: cabeza r8: x hxx+2.. → brazo col hxx, hxx+1 visibles ✓. Filas by-3 y by-4: cabeza r6/r7 (ancho completo desde hxx+2) → brazo col hxx, hxx+1 visibles? r6 "..OCCC...": x hxx+2 en adelante → hxx, hxx+1 libres ✓. Así que el brazo up se ve como una píxeles asomando tras la cabeza... poco legible ✗. Mejor: brazos up más hacia fuera: armX = bx-4 (una col más afuera) cuando happy, y el brazo asoma completo fuera de la cabeza? La cabeza llega hasta hxx=bx-3 → brazo en bx-4..bx-1: col bx-1 sobre cabeza? cabeza en x bx-3..bx+18 (con shift 0): bx-1 dentro ✗... la cabeza SIEMPRE cubre las columnas laterales del cuerpo porque es más ancha. El brazo up debería ir por fuera de la cabeza: bx-4? cabeza empieza bx-3: brazo bx-4 tiene cols bx-4..bx-1: 3 de sus cols fuera... col bx-1 y bx? Espera brazo 4 ancho: bx-4..bx-1: bx-1 < bx-3? No: bx-1 > bx-3 (más a la derecha). Colisión en bx-3..bx-1 (3 cols del brazo sobre la cabeza) ✗. Reposiciono: brazo up fuera: izq x = hxx - 4 = bx-7: cols bx-7..bx-4: solo bx-4 libre de cabeza... y separado del cuerpo por la cabeza entre medio — raro. Alternativa mejor: brazos up PERO dibujados delante de la cabeza (después). Un brazo delante de la cabeza en el borde: visualmente ok en pixel art (brazo levantado delante). Dibujo brazos up después de la cabeza: brazo up izq x=bx-3, y=by-6: filas by-6..by+1: la mitad superior delante de la cabeza inferior... la cabeza tiene la pantalla ahí — un brazo crema delante de la pantalla se vería raro pero caricaturesco aceptable... Mejor aún: brazo up en el borde exterior: x = bx-4 y=by-5 → cols bx-4..bx-1: sobre cabeza bx-3..bx-1 (borde de la cabeza, filas by-5..by-1 = filas r5..r9 de cabeza: r5 x hxx+3..: ¡r5 es estrecha! (3+14+3: x hxx+3..hxx+18) → brazo cols bx-4..bx-1 = hxx-1..hxx+2: hxx+2 vs cabeza desde hxx+3 → SIN solape con r5. r6+ (ancho desde hxx+2): solapa col hxx+2 (filas by-4..by-1: r6..r9): r6,r7,r8 tienen x desde hxx+2 → col hxx+2 tapada por cabeza... pero brazo se dibuja DESPUÉS → brazo delante: píxel C/O del brazo en hxx+2 sobre O/C de cabeza — visualmente el brazo delante del borde de la cabeza ✓ aceptable (como brazo levantado delante del "hombro"/cabeza). Con mano R arriba en by-4..: mano R fila1 del ARM_UP (y=by-4): R en cols hxx-1? ARM_UP fila1 "ORRO": cols: O(hxx-4? x=bx-4=hxx-1): cols hxx-1(O), hxx(R), hxx+1(R), hxx+2(O). La mano R en hxx, hxx+1 — delante de la cabeza fila r6 (que es C ahí) ✓ se lee como manita levantada al lado de la cara ✓✓ ¡mono! Entonces: brazos happy: dibujar DESPUÉS de la cabeza. En estado normal: detrás del cuerpo (antes). Reordeno drawBot: normal arms antes del cuerpo; happy arms después de la cabeza. Ok. Pero espera: brazo up y=by-5, filas by-5..by+2 — col bx-4..bx-1: fuera del cuerpo (cuerpo desde bx). Debajo (by..by+2) el brazo cae junto al cuerpo sin solape — con contorno O del brazo (col3 = O en bx-1) y contorno del cuerpo en bx → doble línea... es "delante", aceptable. Hmm, mejor aún más simple: brazo up x=bx-3 (pegado como normal), y=by-5, dibujado después de cabeza: cols bx-3..bx: solapa con cabeza (bx-3..bx+18 ancho completo en r6-r8) → tapa parte del borde izquierdo de la cabeza... la mano R (fila1: bx-3+1..bx-3+2 = bx-2, bx-1) delante de la cabeza fila r6 (C) ✓ y el resto O/C del brazo sobre el borde O de la cabeza — casi invisible contra el contorno. Se leería: mano sobre la cabeza-borde. Meh. Me quedo con x=bx-4 (semiflontante): mano R claramente visible al lado de la cabeza. En el lado derecho espejo: x = bx+17 (cols bx+17..bx+20): cabeza llega hasta bx+18 (hxx+21 con shift0 = bx+18): solape bx+17,bx+18... mano R en fila1: cols bx+18(R), bx+19(R) → R en bx+18 sobre cabeza (borde O? cabeza r6 col19 = O...). Uy, con shift de cabeza puede variar. Acepto imperfección menor — se verá bien en conjunto. Simetría: izq x=bx-4, der x=bx+16? cuerpo 16: borde der contorno bx+15; der brazo normal x=bx+15 (cols 15..18). Para up: x=bx+16 (cols 16..19): mano R cols 17,18 fuera de cabeza (cabeza hasta 18: col 18 solapa)... ok suficiente. Realmente, simplifiquemos: happy arms: x izq = bx-4, der = bx+16, y = by-5, dibujados tras la cabeza. ✓ drawAntenna(hxx, hy, t): ```js function drawAntenna(hx, hy, t){ const s = bot.swing; const cx = hx + 10; // centro del tallo (pantalla x4..17 → centro 10.5; uso 10) const topY = hy; // fila 0 de cabeza = donde va la bola // tallo: 2 filas bajo la bola const x1 = cx + Math.round(s*0.5); const x2 = cx + Math.round(s*0.9); ctx.fillStyle = COL.O; ctx.fillRect(x1, hy+2, 2, 1); ctx.fillRect(x2, hy+3, 2, 1); // bola const bx2 = cx + Math.round(s*1.3) - 1; const on = (Math.sin(t*3.4) > -0.2); ctx.fillStyle = on ? COL.Y : COL.y; ctx.fillRect(bx2, hy, 2, 1); ctx.fillRect(bx2, hy+1, 2, 1); if(bot.flash>0){ ctx.fillStyle = COL.W; ctx.fillRect(bx2, hy, 2, 2); // rayitos ctx.fillStyle = COL.Y; ctx.fillRect(bx2-2, hy, 1, 1)? cruz de destello: ctx.fillRect(cx + Math.round(s*1.3) - 4, hy+? ... ``` Rayitos: 4 píxeles en cruz alrededor de la bola con parpadeo (visibles si flash>0.3 o alterna): dibujo: left (bx2-2, hy+0? ... posiciones: (bxc-3, bxc? la bola 2x2 centro (bx2+0.5). Rayos: píxeles a ±3 en x y y: (bxc-3, bcy), (bxc+3? ... hago: ```js const cxx = bx2+1, cyy = hy+1; ctx.fillRect(cxx-4, cyy, 1,1); ctx.fillRect(cxx+3, cyy, 1,1); ctx.fillRect(cxx, cyy-4, 1,1); ctx.fillRect(cxx, cyy+3, 1,1); ctx.fillRect(cxx-3, cyy-3, 1,1); ctx.fillRect(cxx+2, cyy-3, 1,1); ctx.fillRect(cxx-3, cyy+2, 1,1); ctx.fillRect(cxx+2, cyy+2, 1,1); ``` Parpadeo: solo si flash parpadea: if(Math.floor(bot.flash*20)%2===0) — titilante ✓. Tallo: posición original del sprite era x=10,11 en filas 2,3 de HEAD con antena — ahora HEAD no tiene antena (la quité), cabeza top en hy: tallo en hy+? La bola debe estar en hy (fila 0) y tallo hy+1..hy+3? Espera: HEAD_ROWS ahora empieza en "....OOOO...." (top de la cabeza). La antena encima: bola ocupa hy-2..hy-1, tallo hy-1? Reordeno: bola en (hy-2, 2 alto: hy-2, hy-1), tallo: filas hy-1?? solapa. Defino: tallo fila única visible de 2 de alto: filas hy-2..hy-1? Hagamos: tallo: 2 píxeles de alto en hy-3..hy-2 (con curva), bola: hy-2?? Layout: cabeza top = hy (fila 0 = "....OOOO...."). Antena: tallo desde el top: píxeles en (x, hy-2) y (x', hy-1) — curva hacia la bola; bola 2x2 en hy-4..hy-3. Espacio total antena 4px sobre la cabeza ✓ (igual que el diseño original). ```js function drawAntenna(hx, hy, t){ const s = bot.swing; const cx = hx + 10; const stemY1 = hy-1, stemY2 = hy-2; const x1 = cx + Math.round(s*0.45); const x2 = cx + Math.round(s*0.8); ctx.fillStyle = COL.O; ctx.fillRect(x1, stemY1, 2, 1); ctx.fillRect(x2, stemY2, 2, 1); const bxc = cx + Math.round(s*1.25) - 1; // left de bola const byc = hy-4; ... } ``` Bola: fillRect(bxc, hy-4, 2, 2) ✓ (hy-4, hy-3 dos filas). Espera hy-3 fila entre bola y tallo: bola filas hy-4, hy-3; tallo filas hy-2, hy-1; cabeza desde hy ✓ continuo. Flash rayitos centrados en (bxc+1, hy-3). Ajustar en código. drawFace(hxx, hy, look, happy): ```js function drawFace(hx, hy, look, happy){ const ex0 = hx+4, ey0 = hy+4; // pantalla: x hx+4..hx+17, y hy+4..hy+7 if(happy){ ctx.fillStyle = COL.G; // ojos ^^ eyeHappy(ex0+2, ey0); // izq: base x=ex0+2 (=hx+6) eyeHappy(ex0+10, ey0); // der: hx+14 // sonrisa ctx.fillRect(ex0+5, ey0+3, 4, 1); ctx.fillRect(ex0+4, ey0+2, 1, 1); ctx.fillRect(ex0+9, ey0+2, 1, 1); ``` Pantalla y: ey0..ey0+3 (4 filas). Ojos ^^ en filas ey0..ey0+1 (arriba), sonrisa filas ey0+2 (puntas) y ey0+3 (centro) ✓ dentro. Ojo happy: píxeles (x, y+1),(x+1, y),(x+2, y+1): ```js function eyeHappy(x,y){ ctx.fillRect(x,y+1,1,1); ctx.fillRect(x+1,y,1,1); ctx.fillRect(x+2,y+1,1,1); } } else { const lx = look.lx, ly = look.ly; if(bot.blinkT>0){ ctx.fillStyle = COL.G; ctx.fillRect(ex0+2+lx, ey0+2, 2, 1); ctx.fillRect(ex0+10+lx, ey0+2, 2, 1); } else { ctx.fillStyle = COL.G; const oy = ey0+1+ly; // ly -1..1 → filas ey0..ey0+2, ojo 2x2 hasta ey0+3 ✓ (oy=ey0+1+1=ey0+2, +1 → ey0+3 ✓) const ox1 = ex0+2+lx, ox2 = ex0+10+lx; ctx.fillRect(ox1, oy, 2, 2); ctx.fillRect(ox2, oy, 2, 2); ctx.fillStyle = COL.W; ctx.fillRect(ox1, oy, 1, 1); ctx.fillRect(ox2, oy, 1, 1); } } } ``` Rango x: ex0+2+lx: lx∈[-1,1] → hx+5..hx+7 (izq), der hx+13..hx+15(+lx→16) pantalla hasta hx+17 ✓. lookDir(): ```js function lookDir(){ if(!mouse.seen || mouse.idleT > 3.5){ return { lx: Math.round(Math.sin(now*0.5)), ly: 0 }; } const c = { x: bot.x, y: botPosCache? } ``` Necesito centro de pantalla del robot: lp.bx+8, lp.by-4: ```js const dx = mouse.x - (lp.bx+8), dy = mouse.y - (lp.by+5); return { lx: dx>3?1:(dx<-3?-1:0), ly: dy>4?1:(dy<-4?-1:0) }; ``` lp global actualizado en render/update. drawPanel(bx, by, t): ```js function drawPanel(bx, by, t){ // marco ctx.fillStyle = COL.O; ctx.fillRect(bx+3, by+3, 10, 4); // pantalla ctx.fillStyle = COL.E; ctx.fillRect(bx+4, by+3, 8, 2); // interior: y by+3..by+4? marco 4 alto: y3..6; interior y4..5 ``` Corrijo: marco y=by+3..by+6 (4 filas), interior E: x bx+4..bx+11 (8), y by+4..by+5 (2) ✓: ```js ctx.fillRect(bx+4, by+4, 8, 2); // sweep const tri = t => { const p = (t*0.9)%2; return p<1?p:2-p; }; const k = Math.round(tri(now)*7); ctx.fillStyle = COL.g; if(k>0) ctx.fillRect(bx+4, by+4, k, 2); ctx.fillStyle = COL.G; ctx.fillRect(bx+4+k, by+4, 1, 2); ``` Hmm: sweep deja estela: píxeles 0..k en G, cabeza en k en W? Mejor: llenado G 0..k-1, cabeza W en k: ```js if(k>0){ ctx.fillStyle=COL.G; ctx.fillRect(bx+4, by+4, k, 2); } ctx.fillStyle = COL.W; ctx.fillRect(bx+4+k, by+4, 1, 2); ``` k hasta 7 ✓ dentro (8 col). // LED ```js const on = bot.happy>0 ? (Math.floor(now*8)%2===0) : (Math.floor(now*1.6)%2===0); ctx.fillStyle = on ? COL.R : '#7a3324'; ctx.fillRect(bx+14, by+4, 1, 1); ctx.fillRect(bx+14, by+5, 1, 1); ``` LED 1x2 en (bx+14, by+4..5) — interior del cuerpo (col14 = 'C' en BODY? BODY col14 = C (interior 1..14) ✓). Sombra robot: ```js function drawShadow(t){ const {bx, by} = botPos(t); const dist = groundY - (by+14); // bottom cuerpo (aprox sin thruster) const w = Math.max(6, Math.round(20 - dist*0.7)); const cx = Math.round(bot.x); ctx.fillStyle = COL.shadow; ctx.fillRect(cx-(w>>1), groundY, w, 1); if(w>8) ctx.fillRect(cx-(w>>1)+2, groundY+1, w-4, 1); } ``` dist normal ~10-19 → w = 20-7..20-13 = 7..13 ✓; al saltar dist ~ +8 → w mínimo 6 ✓. Orden en render(): drawSky → bg → flies → shadow → flame+bot → particles → cursor. drawFlame(bx, by, t): ```js function drawFlame(bx, by, t){ const boost = boostLevel(); const mag = 1 + boost*1.4; for(let i=0;i<8;i++){ const edge = (i===0||i===7) ? 0.55 : 1; const n = 0.5 + 0.5*Math.sin(t*16 + i*1.9 + i*i*0.3); const n2 = 0.5 + 0.5*Math.sin(t*23 + i*2.7); let h = Math.round((0.8 + n*1.5 + n2*0.7) * mag * edge); if(h<1) h=1; if(h>6) h=6; for(let k=0;k=0) b += 0.8; return Math.min(1.4, b); } ``` Cursor: ```js function drawCursor(){ if(!mouse.seen) return; const gpx = 2 + Math.round(cursorPulse*2); const x = Math.round(mouse.x), y = Math.round(mouse.y); ctx.fillStyle = COL.O; const arms = [[-1,0],[1,0],[0,-1],[0,1]]; // sombra for(const [sx,sy] of arms){ if(sx===-1) ctx.fillRect(x-gpx-2+1, y+1, 2, 1); if(sx===1) ctx.fillRect(x+gpx+1, y+1, 2, 1); ... ``` Complicado; hago función cross(cx, cy, gap, color) que dibuja 4 brazos de 2px: ```js function cross(x,y,gap,c){ ctx.fillStyle=c; ctx.fillRect(x-gap-2, y, 2, 1); ctx.fillRect(x+gap+1, y, 2, 1); ctx.fillRect(x, y-gap-2, 1, 2); ctx.fillRect(x, y+gap+1, 1, 2); } // sombra y cruz cross(x+1, y+1, gap, COL.O); cross(x, y, gap, COL.W); ``` gap: brazo: desde x-gap-2 hasta x-gap-1 (2px) ✓ con centro vacío de (2*gap+1) px. Boop audio (dos notas): ```js let actx = null; function initAudio(){ if(!actx){ try{ actx = new (window.AudioContext||window.webkitAudioContext)(); }catch(e){} } if(actx && actx.state==='suspended') actx.resume(); } function tone(f0, f1, t0, dur, vol){ const o = actx.createOscillator(), g = actx.createGain(); o.type = 'square'; o.frequency.setValueAtTime(f0, t0); o.frequency.exponentialRampToValueAtTime(f1, t0+dur*0.8); g.gain.setValueAtTime(vol, t0); g.gain.exponentialRampToValueAtTime(0.0008, t0+dur); o.connect(g); g.connect(actx.destination); o.start(t0); o.stop(t0+dur+0.02); } function boop(){ if(!actx) return; const t0 = actx.currentTime; const base = 300 + Math.random()*60; tone(base, base*1.9, t0, 0.11, 0.06); tone(base*1.5, base*2.6, t0+0.1, 0.14, 0.05); } ``` Volumen bajo (0.05-0.06) ✓. Eventos: ```js function toB(e){ return { x: e.clientX/SCALE, y: e.clientY/SCALE }; } addEventListener('pointermove', e=>{ const p = toB(e); if(mouse.seen){ bot.swingV += (p.x - mouse.x) * 0.35; // la antena reacciona al cursor } mouse.x=p.x; mouse.y=p.y; mouse.seen=true; mouse.idleT=0; }); addEventListener('pointerdown', e=>{ const p = toB(e); mouse.x=p.x; mouse.y=p.y; mouse.seen=true; mouse.idleT=0; initAudio(); press(p.x, p.y); }); ``` pointermove también dispara en touch drag ✓. Con pointerdown en touch: saludo si toca robot ✓. press: ```js function press(x, y){ cursorPulse = 1; const {bx, by} = lp; if(x >= bx-4 && x <= bx+22 && y >= by-16 && y <= by+18){ greet(); } else if(y >= groundY-1){ dust(x, Math.min(y, H-2)); } else { // mini destello for(let i=0;i<5;i++){ particles.push({x, y, vx:(Math.random()-0.5)*14, vy:-6-Math.random()*10, life:0.3+Math.random()*0.2, c: COL.star2, g:60}); } } } function dust(x, y){ for(let i=0;i<7;i++){ particles.push({x: x+(Math.random()-0.5)*4, y, vx:(Math.random()-0.5)*22, vy:-4-Math.random()*14, life:0.35+Math.random()*0.2, c: Math.random()<0.5?COL.gndHi:COL.S, g:70}); } } ``` landFx(): ```js function landFx(){ bot.squash = 0.12; const {bx, by} = lp; const y = by+15; for(let i=0;i<6;i++){ particles.push({x: bot.x-5+Math.random()*10, y: y+Math.random()*2, vx:(Math.random()-0.5)*18, vy:-3-Math.random()*6, life:0.3, c: COL.y, g:40}); } } ``` squash: en botPos: if(bot.squash>0) by+=1. Y decaer en update. Keydown espacio → greet() también ✓ (accesibilidad): ```js addEventListener('keydown', e=>{ if(e.code==='Space'){ initAudio(); greet(); } }); ``` Loop: ```js let last = performance.now(); let lp = {bx:0, by:0}; function frame(ts){ const dt = Math.min(0.05, (ts-last)/1000); last = ts; now = ts/1000; update(dt); lp = botPos(now); render(); requestAnimationFrame(frame); } requestAnimationFrame(frame); ``` render(): ```js function render(){ drawSky(now); ctx.drawImage(bgCanvas, 0, 0); drawFlies(now); drawShadow(now); drawBot(now); drawParticles(); drawCursor(); } ``` Wait: drawBot dibuja flame dentro ✓. Partículas de thruster deberían ir DETRÁS de la llama? van por debajo — drawParticles después del robot las pone delante — ok (chispas cayendo delante del suelo? caen hacia el suelo y desaparecen antes de llegar... vida corta ✓). bgCanvas se dibuja tras el cielo — el bg incluye colinas+suelo, cielo pintado aparte ✓. Nota: bgCanvas tiene transparencia fuera de colinas/suelo ✓ (solo pinto esas partes). Los pinos se pintan antes del suelo en buildBG — el suelo tapa la base del pino... pino by = groundY-3 con tronco hasta by-1 = groundY-4... el suelo empieza en groundY → no tapa ✓. Pero la colina cercana se pinta antes que el pino ✓ (pino delante). Detalle: colinas lejanas deben quedar tras la cercana ✓ orden. Resize handler: window.addEventListener('resize', resize). En resize, bot.fx para x. Primera vez: bot.x indefinido → set en resize if(!bot.init). ```js let prevW = 0; function resize(){ ... if(prevW){ bot.fx = bot.x/prevW; // ya se mantiene cada frame mejor } bot.x = bot.fx * W; bot.tx = Math.min(Math.max(bot.tx||W/2, 22), W-22); prevW = W; } ``` Mantengo bot.fx actualizado cada frame y en resize x = fx*W ✓. bot.lift se mantiene ✓. Comprobación de tamaños del robot vs pantalla móvil: W=195 (390/2): robot 22 ancho + salto 8 ✓ ok. groundH = max(12, 0.2*H). Con H = 844/2=422: groundY=422-84=338; robot y ~338-24=314; espacio superior para cielo 314 ✓. HUD en pantalla: font 12px para title. Un problema: image-rendering pixelated con canvas escalado por CSS: cv.width=W (backbuffer), CSS width 100vw → escala no entera (vw/W puede ser 5.97…) → píxeles ligeramente desiguales. Aceptable en la práctica, aunque para puristas... Puedo fijar el tamaño CSS al múltiplo entero más cercano: cv.style.width = (W*SCALE)+'px' — pero entonces no cubre exactamente la ventana (puede quedar 1-5px de margen). Mejor: dejar 100vw/100vh con escala casi entera (ceil hace que SCALE*W >= vw, sobra poco; SCALE*W - vw <= SCALE) → píxeles de borde mínimamente más estrechos. Alternativa: usar floor y centro... La práctica estándar: canvas 100% con image-rendering: pixelated — desigualdad de ~1px en el borde de cada píxel es invisible en la mayoría. Otra opción: elegir SCALE = vw/round(vw/targetPx)? No entero. Lo dejo con ceil: W=ceil(vw/SCALE) → escala real = vw/W ≤ SCALE, desviación < SCALE/W ≈ 2.5% — píxeles de 8px varían ±0.2px: imperceptible. ✓ Y overflow del body: canvas exacto 100vw/100vh ✓. Meta theme-color? extra: ✓ pequeño toque. Fuentes en canvas: no uso texto en canvas (HUD es DOM) ✓. Ahora, doble chequeo del sombreado de la cabeza: r3 "..OCWCCCCCCCCCCCCSO..": W en col4 (junto a pantalla col4 fila4=E) ✓ brillo arriba-izq. En drawFace uso hx = hxx (head con shift) — la pantalla se mueve con la cabeza ✓. La antena también con hxx ✓ (paso hxx). LP y botPos: botPos usa bot.lift, bob... listo. Chequeo press hitbox: robot: x bx-4..bx+21 (con brazos), y by-16 (antena+bola: by-14 cabeza top... by-10-? cabeza top = by-10 (hy=by-10), antena hasta hy-4 = by-14, bola hy-4..by-15? bola en hy-4..hy-3 → by-14..by-13. Hitbox y: by-16..by+17 (thruster hasta by+12, llama hasta ~by+17) ✓ generoso. greet() usa lp para cy de chispas: chispas desde centro del cuerpo: (bot.x, lp.by+6) ✓. Cooldown de saludo: si jumpT>=0 return ✓. happy timer: al iniciar salto pongo happy = 1.4s (salto 0.75 + 0.65 cola) ✓. Detalle blink durante happy: en drawFace happy tiene prioridad ✓. Ahora el triángulo del sweep: t*0.9 → periodo 2/0.9 ≈ 2.2s ida y vuelta ✓. Título: "ROBOT-7_" con underscore parpadeante ✓. Hint: "MUEVE EL CURSOR · CLICK EN EL ROBOT: SALUDO". En touch el "cursor" no aplica... texto genérico: "MUEVE EL PUNTERO · TOCA EL ROBOT: SALUDO". Uso "TOCA / CLICK EN EL ROBOT: SALUDO" — mejor: "MUEVE EL CURSOR · TOCA EL ROBOT PARA SALUDAR". Conciso: "TOCA EL ROBOT PARA SALUDAR · MUEVE EL CURSOR Y TE MIRARÁ". Largo para 8px... HUD 8px en móvil ok con dos líneas? white-space normal centrado ✓. Texto final: "muévelo con el cursor · tócale para saludar" — minúsculas con Press Start 2P se ve bien? La fuente tiene minúsculas (sí, las tiene). Uso mayúsculas estilo arcade: "MUEVE EL CURSOR · TOCA EL ROBOT PARA SALUDAR". ✓ Count: "SALUDOS 0". Una cosa más: performance de drawSky: 64 estrellas × fillRect ok. Verifiquemos el swing delta en pointermove: bot.swingV += dx*0.35 — dx en backbuffer px (pequeños, ~1-3 por evento) → swingV acumula ~1 por evento con muchos eventos → swing hasta ±2.2 clamp, luego el muelle lo devuelve con oscilación ✓. Multiplico por 0.25 mejor. Además clamp swingV ±10. Sobre JUMP_DUR=0.75 y jy = -round(sin(pi p)*8): al inicio/fin 0 ✓. Con squash al aterrizar +1 ✓. Edge: resize durante salto — fine. Chequeo groundY-24: si H muy pequeño (landscape móvil 320 alto → SCALE=max(2,round(320? vw mayor... digamos vw=640 → SCALE=3, H=107): groundY=107-21=86; robot by=62; head top 52; antena 48 ✓ ok. Ahora escribiré el código final completo con todos los detalles pulidos. También agregaré: - document.title ya está. - Evitar zoom doble tap: touch-action none ✓. - contextmenu prevent? no necesario. Reviso mis sprites una última vez contando literal por literal cuando los escriba en la respuesta. HEAD_ROWS (10 filas, 22 ancho): 1. "....OOOOOOOOOOOOOO...." → 4+14+4. Escribo: "...." + "OOOOOOOOOOOOOO" (14) + "...." ✓ 2. "...OCCCCCCCCCCCCCCO..." → 3+1+14+1+3 ✓ 3. "..OCCCCCCCCCCCCCCCCO.." → 2+1+16+1+2 ✓ 4. "..OCWCCCCCCCCCCCCSO.." → 2+ [O C W CCCCCCCCCCCC(12) S C O =18] +2 ✓ 5. "..OCEEEEEEEEEEEEEECO.." → 2+ [O C E(14) C O =18] +2 ✓ 6. = 5 7. = 5 8. = 5 9. "..OSCCCCCCCCCCCCCCSO.." → [O S C(14) S O = 18] ✓ 10. "...OOOOOOOOOOOOOOOO..." → 3+16+3 ✓ Pantalla filas índice 4..7 ✓ (0-based), x 4..17 ✓. BODY_ROWS (10 filas, 16 ancho): 1. ".OOOOOOOOOOOOOO." → 1+14+1 ✓ 2. "OCWCCCCCCCCCCCCO" → O C W C(12) O = 16 ✓ 3. "OCSCCCCCCCCCCSCO" → O C S C(10) S C O = 16 ✓ 4. "OCCCCCCCCCCCCCCO" ✓ 5. "OCCCCCCCCCCCCCCO" 6. "OCCCCCCCCCCCCCCO" 7. "OCCCCCCCCCCCCCCO" 8. "OCSCCCCCCCCCCSCO" ✓ 9. "OCCCCCCCCCCCCCCO" 10. ".OOOOOOOOOOOOOO." ✓ Panel y=3..6 (filas del cuerpo), interior y=4..5 ✓; LED col14 filas 4..5 ✓ (col14: fila4 "OCCCCCCCCCCCCCCO": índices 0..15: col14 = C? "O C C C ... O": col0=O, col15=O, cols1..14=C ✓ col14=C ✓). ARM_ROWS / ARM_UP ✓ 4 chars. THR_ROWS: "..OOOOOOOO.." → 2+8+2=12 ✓ ".ODDDDDDDDO." → 1+1+8+1+1=12 ✓ "..OOOOOOOO.." ✓ Colocación: x=bx+2 (cuerpo 16, thruster 12 → centrado +2) ✓. Interior D: bx+3..bx+10; llama x bx+2+i? Ajusto llama a la boca inferior: fila2 "..OOOOOOOO..": cols 2..9 = O → boca x=bx+4..bx+11?? Recalculo: sprite en x0=bx+2: fila2 chars: col0,1='.', cols2..9='O' → abs bx+4..bx+11 (8 de ancho) ✓. Llama: x = bx+4+i, i 0..7 ✓ (no bx+2+i). Corrijo: en drawFlame uso fx0 = bx+4. Y fila1 ".ODDDDDDDDO.": col1=O? ".O D8 O." → cols: 0='.', 1='O', 2..9='D', 10='O', 11='.' → abs D: bx+4..bx+11 ✓ consistente: llama x bx+4..bx+11 ✓. Chispas thruster spawn x: bot.x-4+rand*8 ≈ bx+4..bx+11 en abs (bot.x = bx+8; bx+4 = bot.x-4 ✓ coincide). MOON_ROWS (13 ancho, 10 filas): 1. "...WWWWWWW..." → 3+7+3 ✓ 2. ".WWWWWWWWWWW." → 1+11+1 ✓ 3. "WWWWWWWWWWWWW" → 13 ✓ 4. "WWWWSSWWWWWWW" → 4+2+7=13 ✓ 5. "WWWWSSWWWWWWW" ✓ 6. "WWWWWWWWWSSWW" → 9+2+2=13 ✓ 7. "WWWWWWWWWSSWW" ✓ 8. "WWWWWWWWWWWWW" ✓ 9. ".WWWWWWWWWWW." ✓ 10. "...WWWWWWW..." ✓ Bien. Luna blanca W sobre cielo — brillante ✓, cráteres S. Una preocupación: la luna W pura puede competir con el HUD; alpha... sin alpha. Ok. drawSky luna posición: mx = Math.round(W*0.74), my = Math.round(H*0.12). Clamp para pantallas pequeñas: my >= 4. Vamos con el cursor cross: gap base 2: brazos: left: fillRect(x-4, y, 2, 1) (x-gap-2=x-4, 2px) ✓; right: (x+3, y, 2,1) con gap2 → x+gap+1 = x+3 ✓; up: (x, y-4, 1,2); down: (x, y+3, 1,2). Con pulse: gap 3-4: se expande al click ✓. Y también: cursor oculto si mouse no visto ✓. En update: mouse.idleT solo cuenta si seen; el pointermove lo resetea ✓. hint off tras primer saludo ✓. Y quizá hint reaparece si... no. Antena swing también con el bob: añado en update: bot.swingV += Math.sin(now*2.1)*0.15*dt? pequeño temblor constante ✓. Reviso update de swing con vx: bot.swingV -= bot.vx*dt*1.6 — vx hasta 7 → fuerza -11.2/s → swing negativo (bola queda atrás al avanzar) ✓ físico. Squash decae: if(bot.squash>0) bot.squash-=dt. Todo listo. Ahora, atención a un matiz de dibujo: brazos normales se dibujan ANTES del cuerpo (detrás). En drawBot orden: flame → thruster → arms(normales) → body → panel → head → antenna → face → (happy arms después de head). En happy: no dibujar arms normales, y dibujar arms up tras head ✓. Los brazos up: izq x=bx-4, der x=bx+16, y=by-5. ARM_UP 4x8: filas by-5..by+2. Mano R fila1: by-4 ✓ a la altura de cabeza r4..r5 (pantalla hy+4 = by-6...). hy = by-10: pantalla by-6..by-3. Mano en by-4 → al lado de la pantalla ✓✓ perfecto, la manita queda a la altura de la cara. Der: brazo x=bx+16: cols bx+16..bx+19; cabeza (sin shift) hasta bx+18: col bx+18 solapa cabeza borde, R en cols 17,18 → parcial sobre cabeza... con headShift ±1 varía. Acepto. Hmm wait, cabeza ancho 22: hxx..hxx+21 = (bx-3)..(bx+18) ✓ como dije. Chequeo brazo normal der: x=bx+15: cols 15..18: col15 sobre contorno del cuerpo ✓, visibles 16,17,18 ✓. brazo izq x=bx-3: cols -3..0 → col0 sobre col0 cuerpo ✓ visibles -3..-1 ✓. armSw: izq +sin, der -sin ✓ (alternan). Ahora sí, escribir la respuesta completa. Idioma: español. Breve intro + código + explicación breve. Empiezo directamente sin encabezado #. El código final (voy con cuidado en la sintaxis): También añadiré "use strict" y IIFE no necesaria. Una últimas verificaciones de lógica: - sprite() usa Math.max(...rows.map(length)) — ok. - En drawFace happy function eyeHappy definida dentro — ok pero definida antes de uso; la declaro como función interna antes de las llamadas o arrow const antes. Orden: const eyeHappy = ...; luego llamadas ✓. - En drawPanel: k = round(tri*7): tri devuelve 0..1: k 0..7; cuando k=7: W cabeza en bx+11 ✓ dentro pantalla (bx+4..bx+11) ✓. - drawShadow usa botPos → lp mejor (ya calculado). Uso lp en render tras lp asignado ✓. Igual press usa lp ✓. - thrTipY: lp.by+13 ✓. - greet chispas: y = lp.by+6 ✓. - En update, thruster spawn usa lp del frame anterior (asignado en frame antes de update? orden: update(dt) → lp=botPos → render. Uso lp del frame previo — diferencia de 1px, irrelevante ✓. Pero primer frame lp={bx:0,by:0} → chispa en (bot.x-4, 13)... primer frame jumpT etc: aceptable; inicializo lp = botPos(0) tras resize inicial antes del loop: en resize: lp = botPos? botPos depende de now → llamo lp = botPos(0) tras primer resize ✓. - drawSky: nubes x wrap: x = ((c.u*W + now*c.s*1.4) % (W+cw*4)) - cw*2 → puede empezar negativo... ok con mod positivo en JS para positivo base ✓ (c.u*W positivo). - Fuente Press Start 2P cargada; HUD visible aunque la fuente tarde (fallback monospace) ✓. Audio tone: exponentialRamp con valor inicial >0 ✓ (setValueAtTime vol>0). freq f1>0 ✓. Escribo CSS del canvas: width:100vw;height:100vh; en móvil mejor 100dvh? uso height:100vh y body height 100%: en móviles la barra... uso 100dvh con fallback: ```css #c{width:100vw;height:100vh;height:100dvh} ``` Y en resize uso innerHeight ✓ (coincide con dvh aproximadamente). Meta viewport user-scalable=no ✓. Listo para redactar. Estimación líneas ~420. Explicación tras el código: breve, en español, con viñetas de características. Una comprobación más de botPos: ```js function botPos(t){ const bob = Math.sin(t*2.1); let jy = 0; if(bot.jumpT >= 0){ const p = Math.min(1, bot.jumpT/JUMP_DUR); jy = -Math.round(Math.sin(Math.PI*p)*8); } const sq = bot.squash>0 ? 1 : 0; return { bx: Math.round(bot.x)-8, by: Math.round(groundY-24-bot.lift+bob)+jy+sq }; } ``` ✓. Y lookDir usa lp: ```js function lookDir(){ if(!mouse.seen || mouse.idleT>3.5) return {lx: Math.round(Math.sin(now*0.5)*1), ly:0}; const dx = mouse.x-(lp.bx+8), dy = mouse.y-(lp.by+4); return {lx: dx>3?1:dx<-3?-1:0, ly: dy>4?1:dy<-4?-1:0}; } ``` drawBot completo: ```js function drawBot(t){ const {bx, by} = lp; const hb = Math.round(Math.sin(t*2.1+0.55)); const look = lookDir(); const happy = bot.happy>0; const sh = bot.moving ? (bot.vx>0?1:-1) : look.lx; const hx = bx-3+sh, hy = by-10+hb; drawFlame(bx, by, t); blit(SPR.thr, bx+2, by+10); if(!happy){ const sw = Math.round(Math.sin(t*3.2)); blit(SPR.arm, bx-3, by+2+sw); blit(SPR.arm, bx+15, by+2-sw); } blit(SPR.body, bx, by); drawPanel(bx, by); blit(SPR.head, hx, hy); drawAntenna(hx, hy, t); drawFace(hx, hy, look, happy); if(happy){ blit(SPR.armUp, bx-4, by-5); blit(SPR.armUp, bx+16, by-5); } } ``` SPR = sprites pre-hechos con sprite(ROWS) tras definir COL ✓ (crear al cargar). OK. Además el detalle "hb" bob de cabeza ±1 con desfase ✓. En drawAntenna necesito swing: usa bot.swing ✓. Todo listo. Redacto la respuesta. Extra pequeño: al mantener click... no. Reviso drawFlame firma: drawFlame(bx, by, t) — usa boostLevel() interno ✓. Comprobación de partículas thruster dentro de update: usa lp (frame previo) ✓ y boost. Compruebo que el greet reinicia wanderIn para no moverse durante... no importa. Also: el robot no debe salir de límites: bot.x clamp en update: bot.x = clamp(bot.x, 18, W-18) ✓. tx inicial: W/2 ✓ set en resize si 0. Vamos a escribir. También pequeño "breathing" del panel LED... ya. Ah, un detalle: en drawSky el fill del cielo antes de estrellas ✓; bgCanvas después; pero las nubes quedan tras colinas ✓ correcto (nubes en cielo). Cielo: añado banda dithering sutil en el horizonte del cielo? El cielo plano + colinas escalonadas ya dan. Skip. Cuento y redacto ya. Para el texto explicativo tras el código: características clave (sprite matrix, escalado pixel-perfect, interacciones: ojos siguen cursor, antena con física, click = saludo con boop WebAudio, partículas, luciérnagas, etc.) — breve. ¡Vamos a darle vida a un pequeño robot pixel art! En lugar de un sprite estático de dos frames, he construido una mini-escena nocturna con un robot flotante que respira, te mira, parpadea, deambula solo y celebra si lo tocas — todo dibujado píxel a píxel sobre un canvas de baja resolución escalado con nitidez. ```html ROBOT-7 · pixel pet

ROBOT‑7_

SALUDOS 0

MUEVE EL CURSOR Y TE MIRARÁ · TOCA EL ROBOT PARA SALUDAR

``` Cómo está construido: - **Pixel art por matrices**: cada sprite (cabeza, cuerpo, brazos, propulsor, luna) es un array de cadenas donde cada carácter mapea a un color de la paleta. Se rasterizan una sola vez a mini-canvas y se dibujan con `drawImage`. Todo se pinta en un canvas de baja resolución (~240 px de ancho) escalado con `image-rendering: pixelated`, así el "píxel grande" es auténtico, no un filtro. - **El robot está vivo**: flota con dos oscilaciones desfasadas (cuerpo y cabeza), parpadea a intervalos aleatorios, sus **ojos siguen tu cursor**, la cabeza se inclina hacia donde mira y deambula solo por la escena. - **Física en la antena**: la bola del extremo es un péndulo amortiguado — se mecige cuando el robot se desplaza y reacciona cuando mueves el ratón rápido. - **Momento estrella**: toca el robot (o pulsa Espacio) → salta con *squash & stretch*, levanta los bracitos, pone ojos feliz `^^` y sonrisa, la antena destella, salen chispas y suena un "boop-boop" sintetizado con WebAudio (square waves, sin archivos externos). El contador de saludos sube y la pista inferior desaparece. - **Escena**: cielo nocturno verde con estrellas titilantes, luna con cráteres, nubes a la deriva, colinas escalonadas con pinos en silueta, suelo con dithering ajedrez, matas y flores, luciérnagas pululando, sombra que se encoge al saltar, y llama de propulsor procedural que se intensifica al moverse. - **Detalles**: panel de pecho con barrido tipo scanner y LED de estado, cursor convertido en mira pixelada que pulsa al hacer click, y polvo si clicas el suelo. Paleta deliberadamente propia —verde nocturno, crema y óxido— para que se sienta como un juego de consola de los 90 y no como otra demo genérica. ¡Guarda el archivo y ábrelo en el navegador!

Eval01