Informático de Pueblo

Blog estático de proyectos y minijuegos en JavaScript. Incluye portada con listado dinámico de posts y tres juegos integrados (Snake, Flappy y 2048). Diseño responsive.

Estructura

• index.html — Portada que carga posts/posts.json y renderiza tarjetas mediante assets/blog.js.
• posts/react.html, posts/vue.html, posts/svelte.html — Artículos técnicos.
• posts/juego-snake.html, posts/juego-flappy.html, posts/juego-2048.html — Entradas de juegos.
• posts/template.html — Plantilla base de entradas.
• posts/posts.json — Metadatos de los posts (slug, título, fecha, descripción e imagen).
• assets/styles.css — Estilos (tema terminal + estilos de tablero 2048 y tarjetas).
• assets/blog.js — Carga/ordenación/render de la lista de posts.
• assets/header-rain.js — Efecto visual del encabezado (lluvia binaria).
• assets/partials.js — Inyección de partials/header.html y partials/footer.html.
• assets/script.js — Utilidades menores (p.ej., año del footer).
• assets/snake.js, assets/flappy.js, assets/game2048.js — Lógica de los juegos.
• partials/header.html, partials/footer.html — Parciales reutilizables.

Comentarios sobre los 3 posts (requisito de la actividad)

• React: Componentes y Estado (posts/react.html)

  • Enfoque declarativo basado en componentes y reconciliación eficiente.
  • Ejemplo clave: contador con useState y manejo de eventos (onClick).
  • Comunicación por props y estado local; composición para mantener componentes pequeños.
  • Ecosistema: React Router/Next.js para routing y SSR; Redux Toolkit/Zustand para estado global.
  • Cuándo usarlo: UIs dinámicas con mucha interacción y necesidad de ecosistema maduro.

• Vue: Reactividad Sencilla (posts/vue.html)

  • Framework progresivo con reactividad granular y Single File Components.
  • Ejemplo clave: ref y script setup en Composition API; eventos con @click.
  • Herramientas: Vue Router (enrutado), Pinia (estado global), Vite (dev server/bundling).
  • Cuándo usarlo: equipos que valoran DX simple, curva de aprendizaje suave y SFC ergonómicos.

• Svelte: Menos Framework, Más JS (posts/svelte.html)

  • Traslada complejidad a compilación para generar JS imperativo eficiente.
  • Ejemplo clave: contador reactivo sin setState (bindings y on:click).
  • Ventajas: bundles pequeños y DOM updates muy rápidos; menos boilerplate.
  • Cuándo usarlo: widgets/SPA donde el tamaño del bundle y la simplicidad son prioritarios.

Comentarios de los 3 juegos (claves del código)

• Snake (Canvas) (posts/juego-snake.html, assets/snake.js)

  • Render en <canvas> con soporte HiDPI: uso de devicePixelRatio y ctx.setTransform.
  • Tablero por celdas: cell = 20, cols/rows a partir de ancho/alto del canvas.
  • Estado principal: snake (array de segmentos), dir/nextDir, food, score y best en localStorage.
  • Bucle de juego con setInterval controlado por tickMs, que acelera cada 5 puntos.
  • Entrada: flechas/WASD; evita la reversa directa en setDir.
  • Lógica: avance con unshift/pop, detección de colisiones (bordes y cuerpo) y “comer”/placeFood().
  • Dibujo: rejilla tenue (drawGrid), comida y cuerpo con colores diferenciados; overlay de “Game Over”.

• Flappy Bird (Canvas) (posts/juego-flappy.html, assets/flappy.js)

  • Bucle con requestAnimationFrame y dt para normalizar movimiento por tiempo.
  • Física simple: gravedad G, impulso FLAP, y started para ignorar la simulación hasta el primer aleteo.
  • Generación de tubos: spawnPipe() con altura aleatoria dentro de PIPE_MIN/PIPE_GAP y temporizador SPAWN_MS.
  • Movimiento: desplazamiento de tubos, limpieza fuera de pantalla y puntuación al pasar el hueco (passed).
  • Colisiones: comprobación de solape horizontal y salida del pájaro por arriba/abajo.
  • Persistencia: récord en localStorage; controles por teclado, ratón y táctil.
  • Canvas HiDPI igual que en Snake para nitidez en pantallas densas.

• 2048 (DOM) (posts/juego-2048.html, assets/game2048.js)

  • Representación con DOM: N = 4, matriz 2D grid, y fichas posicionadas con CSS (--r, --c) y clases por rango (tileClass).
  • Aparición de fichas: spawn() coloca 2 o 4 (90%/10%) en una celda vacía.
  • Movimiento canónico a la izquierda: normaliza rotando/invirtiendo para reutilizar slideRowLeft, luego des-normaliza según dirección.
  • Fusión: slideRowLeft compacta, fusiona contiguos iguales y acumula gained para sumar al score.
  • Post-movimiento: si cambió el tablero, spawn(), render() y comprobación de fin con canMove(); overlay “Game Over”.
  • Persistencia de récord con localStorage y botón/tecla R para reiniciar.

Créditos del efecto del header

Efecto de “lluvia binaria” inspirado en: The Coding Train - Matrix Rain in JavaScript (vídeo) https://www.youtube.com/watch?v=S1TQCi9axzg