ALERTA DE SEGURIDAD: Múltiples vectores de ataque detectados. El firewall automático ha fallado. Se requiere intervención manual para neutralizar las IPs hostiles.
Hoy, en la Zona Arcade del laboratorio, no solo vas a jugar; vas a aprender a construir. Terminal Defender no es solo un pasatiempo, es una clase magistral de cómo crear un juego interactivo usando las herramientas más fundamentales de la web.
¿Cómo programar un juego sin Canvas? La magia del DOM
Para programar un juego sin usar la etiqueta <canvas>, se utiliza la manipulación directa del DOM (Document Object Model). Creamos elementos <div> con JavaScript, los posicionamos de forma absoluta y los animamos actualizando sus propiedades top y left dentro de un Game Loop con requestAnimationFrame()
Mientras que en nuestro tutorial del juego Snake usamos Canvas para “dibujar” píxeles, aquí hemos optado por una arquitectura diferente. Cada “paquete malicioso” es un elemento HTML real al que le aplicamos estilos y eventos.
| Módulo | Implementación Nativa | Propósito |
|---|---|---|
| Renderizado | Manipulación del DOM | Crear y mover elementos `<div>` en tiempo real. |
| Game Loop | requestAnimationFrame() | Actualizar la posición de los enemigos a 60FPS. |
| Input del Jugador | Event Listeners (`mousedown`, `touchstart`) | Detectar clics para destruir los paquetes. |
| Persistencia | localStorage nativo | Guardar la puntuación máxima (High Score). |
Desafíos técnicos: Lógica vectorial y rendimiento
La lógica vectorial en un juego 2D consiste en calcular la diferencia en los ejes X (dx) e Y (dy) entre un objeto y su objetivo, normalizar ese vector y aplicarle una velocidad para que el movimiento sea constante y directo.
En Terminal Defender, cada paquete rojo necesita saber cómo llegar al núcleo azul. Para ello, en cada frame del juego, aplicamos matemática básica:
- Calcular el Delta: Restamos la posición
Xdel enemigo a laXdel núcleo (dx), y lo mismo para laY(dy). - Calcular la Distancia: Usamos el Teorema de Pitágoras para saber cuán lejos está:
distancia = √(dx² + dy²). - Normalizar y Mover: Dividimos
dxydypor la distancia y lo multiplicamos por la velocidad. Esto nos da un pequeño paso en la dirección correcta.
// La matemática detrás del movimiento
const dx = coreX - enemy.x;
const dy = coreY - enemy.y;
const distance = Math.sqrt(dx * dx + dy * dy);
// Aplicamos el movimiento normalizado
enemy.x += (dx / distance) * enemy.speed;
enemy.y += (dy / distance) * enemy.speed;
// Actualizamos la posición en pantalla
enemy.el.style.left = `${enemy.x}px`;
enemy.el.style.top = `${enemy.y}px`;
El GPS de los enemigos: Con unas pocas líneas de código, cada paquete calcula la ruta más corta al núcleo sin necesidad de librerías complejas.
Optimización del Bucle: Fíjate en el código fuente que te hemos pasado. El for que actualiza los enemigos recorre el array hacia atrás (for (let i = enemies.length - 1; i >= 0; i--)). Hacemos esto para poder eliminar enemigos del array (.splice(i, 1)) en medio del bucle sin corromper los índices del resto de elementos.
🚀 ¿Listo para construir tu propio firewall físico?
Ahora que has visto cómo se defiende un sistema a nivel de software, el siguiente paso es proteger tu infraestructura física. Los principios de aislamiento y defensa son los mismos.
- El Sistema Operativo Aislado: La Biblia de Docker para Makers: Tu Primer Contenedor
- La Interfaz de Control: Gestiona tus contenedores con Portainer sin usar la terminal
Hardware Recomendado para Makers
Si te ha gustado la idea de un “Firewall Activo”, puedes llevarlo al siguiente nivel montando Pi-hole o AdGuard Home para bloquear anuncios y malware en toda tu red doméstica.
Raspberry Pi 5 Cooler Kit 8 GB
El cerebro perfecto para tu gabinete arcade físico. Ideal para ejecutar Node.js, lanzar servidores web con Astro y conectar controladores por USB o pines GPIO.
¿Has logrado superar los 100 puntos? ¡La velocidad se vuelve una locura! Comparte tu récord en nuestro canal de Telegram y reta a otros Makers. 🛠️