Taller de Ingeniería Web • Prototipado Visual, Fondos, Muros y Múltiples Mapas

🛠️ Taller de Prototipado: Maqueta tu Videojuego 2D

En la industria del software y los videojuegos, antes de crear un juego gigante, los programadores construyen un prototipo. Aquí aprenderás cómo se conectan las etiquetas de HTML con los Objetos y Arreglos de JavaScript: personaliza tu propio personaje o sube su imagen, sube fondos desde tu computadora, edita plataformas y muros sólidos, añade y renombra niveles y cambia de mapa con la bandera de meta 🏁 con parada de controles automática.

🧩 ¿Cómo se Construye un Videojuego con HTML y JavaScript?

Cada elemento visible en tu pantalla corresponde directamente a una estructura de código que ya conoces:

👤

1. El Personaje = Un Objeto JS

Guardamos sus propiedades en un objeto: { nombre, x, y, ancho, alto, color, velocidad }. Puedes cambiar su estilo o usar tu propia imagen.

🧱

2. Plataformas y Muros = Arrays

Una lista de obstáculos [ {...}, {...} ]. Las plataformas se pueden pisar encima, mientras que los muros tienen altura y frenan al robot lateralmente.

🌍

3. La Gravedad = Aceleración Constante

La gravedad jala hacia abajo sumando velocidad vertical constante: vy += gravedad;. ¡El salto es una velocidad negativa instantánea!

🎥

4. Cámara y Fondos = Viewport

Para mundos anchos usamos ctx.translate(-camaraX, 0). Puedes cargar imágenes de fondo desde tu dispositivo que se desplazan con efecto parallax.

🏁

5. Niveles & Metas = Secuencia de Estados

Al tocar la Bandera de Meta 🏁, los controles se detienen y el juego viaja al siguiente mapa: nivelActual++; cargarNivel(nivelActual);.

👤 Personalización Completa del Personaje

Modifica el nombre, dimensiones, aspecto visual o sube tu propia imagen o foto desde tu computadora o teléfono.

Sin imagen propia
Tinte del personaje
💻 Sintaxis Generada en JavaScript (Objeto del Personaje) Actualizado en tiempo real

🧱 Maquetado de Plataformas y Muros Sólidos

Puedes modificar el Alto de cualquier obstáculo o definir Muros que frenan al robot lateralmente para impedir el paso.

💻 Sintaxis Generada en JavaScript (Array de Obstáculos y Muros)

🌍 Leyes Físicas y Gravedad del Universo

Controla las constantes del motor físico. Elige preajustes planetarios para sentir la diferencia de gravedad.

Preajustes rápidos:
Aceleración vertical añadida en cada fotograma a vy
Multiplicador de frenado horizontal
💻 Fórmulas Físicas en el Bucle de Juego

🎥 Tamaño de Pantalla, Imagen de Fondo y Cámara

Sube una imagen de fondo desde tu dispositivo, define el tamaño de pantalla (resolución del <canvas>) y el ancho total del mundo.

🖼️ Imagen de Fondo del Juego (Subir desde Dispositivo)

Carga cualquier imagen de paisaje, cielo o ilustración de fondo. Se dibujará detrás de las plataformas con efecto parallax:

Cuadrícula digital por defecto

📐 Tamaño del Lienzo a Trabajar (Resolución de Pantalla)

🗺️ Tamaño Total del Mundo (Nivel Expandido)

🎥 Seguimiento de Cámara (Camera Follow)

💻 Explicación y Código en JavaScript: ctx.translate()

🏁 Gestión Dinámica de Niveles, Nombres y Bandera de Meta

Crea nuevos mapas, renómbralos, elimínalos y configura la Bandera de Meta 🏁 que detiene los controles y avanza de nivel.

🗺️ Editor de Nivel Activo

Cambiar a otro mapa:

🏁 Configuración de la Bandera de Meta

Al tocar esta bandera ondeante, los controles se reinician en falso y el juego viaja al siguiente mapa:

🪙 Monedas y Recolectables del Mapa

💻 Sintaxis en JavaScript: Matriz de Niveles y Parada de Controles

🕹️ Estructura de Botones en HTML y Escuchadores de Eventos

Aprende cómo conectar las etiquetas <button> de HTML con el código de JavaScript para permitir jugar en computadoras, tabletas y teléfonos escolares.

📝 1. El Marcado en HTML

<div class="botones-pantalla">
  <button id="btnIzq">⬅️ Izquierda</button>
  <button id="btnSalto">⬆️ Saltar</button>
  <button id="btnDer">➡️ Derecha</button>
</div>

⚡ 2. El Escuchador en JavaScript

const btnSalto = document.getElementById('btnSalto');

btnSalto.addEventListener('mousedown', () => teclas.arriba = true);
btnSalto.addEventListener('touchstart', (e) => { e.preventDefault(); teclas.arriba = true; });

btnSalto.addEventListener('mouseup', () => teclas.arriba = false);
btnSalto.addEventListener('touchend', () => teclas.arriba = false);

📜 Proyecto Completo: Videojuego con Fondos, Muros y Múltiples Mapas

Este archivo contiene todo el código funcional: niveles editables, personajes con estilo propio, muros con bloqueo lateral, bandera de meta y cámara. ¡Descárgalo para jugar sin conexión!

Nivel 1: Las Llanuras (1600px)
Nivel: 1/3 | Pos: 60px | Vy: 0.0 | Suelo: SÍ
Nivel 1 / 3 🪙 Monedas: 0 / 5
Usa las teclas ← → ↑ o toca los botones para explorar el mapa:

💡 ¿Cómo funciona la parada de controles y la personalización?

  1. Parada Automática de Controles: Al tocar la Bandera de Meta 🏁 o cambiar de mapa, todas las teclas se reinician en false y las velocidades en 0, evitando que el robot siga corriendo o saltando solo al comenzar el nuevo nivel.
  2. Crear, Eliminar y Renombrar Niveles: En la pestaña 🏁 Niveles & Metas puedes pulsar ➕ Crear Nuevo Nivel, escribir el nombre que desees o eliminar mapas sobrantes.
  3. Subir Imagen de Fondo: En la pestaña 🎥 Pantalla, Fondo & Cámara puedes subir cualquier paisaje desde tu dispositivo para usarlo como fondo.
  4. Personalizar tu Personaje: En la pestaña 👤 Personaje puedes cambiar su nombre, elegir trajes (Ninja, Alien, Robot) o subir tu propio sprite/foto para jugar con él.
🎓

Objetivo Pedagógico en Secundaria:

En la programación de videojuegos, reiniciar los estados de entrada (keys = false; vx = 0) al cambiar de escena es una regla de oro de la experiencia de usuario (UX). Además, conectar el sistema de archivos con FileReader demuestra cómo JavaScript transforma una imagen de tu disco duro en un dibujo en vivo dentro del elemento <canvas>.