Ahora que la IA nos ataca y se empiezan a oír comentarios de: “no estudies programación, está muerta” o “es una pérdida de tiempo, dedícalo a otra cosa”, voy a repasar durante unos minutos, con el máximo detalle que pueda recordar, algunos de los juegos que realicé cursando la carrera de Multimedia de la Universitat Oberta de Catalunya.
Antes de empezar con el viaje, me gustaría dejar clara mi opinión dando respuesta a esa pregunta que escucho en muchos videos y comentarios en redes sociales:
¿Estudio o no estudio programación?
La verdad es que llevo años haciendo cosas con varios lenguajes: HTML, JavaScript, Processing, PHP, C, C#... disfrutando mucho, ya que me gusta la programación, pero no me considero un programador profesional. Es más, sé que el código que os presento tiene errores y en algunos casos será código espagueti o mal estructurado, ¡pero es lo que hay! Así lo realicé y con él superé el problema, y las asignaturas con las mejores notas ☺️.
Sinceramente, sé por experiencia propia que, si no practicas a diario programando lo que sea, ese *know-how* se va perdiendo. La agilidad, el cómo construir código, se evapora como si nada. Lo olvidas fácilmente. Pero algo queda en tu manera de pensar: la forma de estructurar y atacar los problemas, planificar, ser resolutivo, dividir el objetivo en funciones o pequeños “hitos”... no sé, creo que aprender a programar te cambia la manera de pensar y la lógica de cómo analizas los problemas o tomas decisiones.
¡Sólo por eso, VALE LA PENA APRENDER A PROGRAMAR!
... Ahora, ¿pasamos a aprender jugando?
Todos los ejemplos que os paso están comentados para que podáis ir viendo por qué hago las cosas, además os he ordenado los juegos de menor a mayor dificultad para que podáis planearos el reto de ir progresando. Utilizad "Ver código fuente" en el navegador o descargad el programa con su código fuente adjunto.
JUEGO 1: LOS INICIOS (PONG)
Asignatura: Programación WEB (HTML + CSS + JavaScript)
Este fue el primer juego que realicé hará unos 10 años. Un simple Pong, como el de las máquinas de juego de los primeros salones de los 80, o aquellas videoconsolas que trabajaban con memorias de 6k’s o menos (Palson)
Con él, puedes aprender el concepto de variables, asignación de valores y cómo trabajar con funciones de forma fácil. También vamos a empezar a tocar código HTML y estilos sencillos con CSS y desde JavaScript reasignaréis el valor de los IDs a CSS, lo que creará la magia en pantalla.
Tenéis que empezar aprendiendo a dibujar una pelota (un *box*) que rebote contra la pared del final de la pantalla. Este es el primer paso. Ya después complicáis la experiencia creando la pala, su movimiento y finalmente las colisiones contra la pala. Si os apetece crearé un tutorial de cómo realizarlo fácilmente. Os paso las primeras líneas de código... para que os iniciéis.🙃
<html>
<head>
<style>
/* Estilo de la pelota */
#pelota {
width: 10px; /* ancho de la pelota */
height: 10px; /* alto de la pelota */
background-color: black; /* color negro */
position: absolute; /* permite moverla con left y top */
left: 10px; /* posición inicial horizontal */
top: 50px; /* posición inicial vertical */
}
</style>
</head>
<body>
<!-- Elemento que hará de pelota -->
<div id="pelota"></div>
<script>
// Obtenemos el elemento HTML con id "pelota"
const pelota = document.getElementById("pelota");
// Variable numérica que guarda la posición horizontal
let x = 10;
// Cada 1000 ms (1 segundo), movemos la pelota 10 píxeles a la derecha
setInterval(function () {
x = x + 10; // sumamos 10 a la posición actual
pelota.style.left = x + "px"; // actualizamos la propiedad CSS left
}, 1000);
</script>
</body>
</html>
JUEGO SIMPLE - (PONG - Código comentado entero de un simple PONG)
JUEGO 2: EL AHORCADO (Extra)
Este juego no lo realicé para ninguna asignatura, lo ideé como una manera de entender y enseñar a mis alumnos los *arrays*.
La progresión es bastante clara: ahora que ya sabes crear variables, cómo reasignar sus valores y pasarlos al DOM con HTML y CSS generando funciones, debes entender cómo escalar el contenido de un ARRAY. Un *array* es una especie de contenedor de una o varias dimensiones donde almacenamos datos.
Con una función del tipo `FOR` puedes aprender a ir accediendo y listando todo el contenido, así como reasignando valores a cada uno de los elementos:
// Creamos un array con varios elementos
let frutas = ["manzana", "pera", "plátano", "naranja"];
// Recorremos el array desde la posición 0
for (let i = 0; i < frutas.length; i++) {
// i es el índice: 0, 1, 2, 3...
// frutas[i] es el valor que hay en esa posición
console.log("Posición " + i + ": " + frutas[i]);
}
Os dejo comentado el código por si os apetece trastear. El juego tiene un simple *array* que es la palabra para adivinar, donde las letras de la palabra secreta son los elementos del *array* que escalaréis y comprobaréis. Esta es la progresión natural al primer juego. Si quieres puedes complicarlo creando un doble *array*, el de las palabras secretas y el de la palabra actual a adivinar… todo son ideas para que progreses ;)
JUEGO AHORCADO - (AHORCADO - Código comentado entero del ahorcado)
DESCARGA ZIP - (AHORCADO ZIP)
JUEGO 3: RECOGIENDO HUEVOS
Asignatura: Integración digital de contenidos
Creo que ahora que ya sabéis interpretar parte del código, definir variables, crear funciones y recorrer un *array*, toca dejar las cosas bonitas. Esta es una cosa que he tenido clara a lo largo de toda la carrera: poner bonitas las cosas multiplica por 1000 la experiencia de usuario.
Un código fácil como el PONG se puede volver algo muy atractivo con un par o tres de imágenes… fíjate el cambio
JUEGO PONG MEJORADO - CÓDIGO COMENTADO
Por ello os propongo volver a hacer el PONG llamando a imágenes o esta alternativa con la misma complejidad de código, pero aplicada de otra forma y en otro lenguaje: PROCESSING. Esto os ayudará a entender que cuando sabes programar, cambiar el escenario (TU LENGUAJE) es simplemente cuestión de adaptarse al nuevo entorno… no es complicado.
JUEGO CON PROCESSING - Juego aplicando un lenguaje diferente: Processing
JUEGO 4: Un 4 en raya con Processing.
Asignatura: Integración digital de contenidos
En este juego se trabaja la interacción con dos jugadores, se profundiza en la técnica de arrays, desarrollando múltiples matrices de datos y variables complejas. Las funciones también empiezan a estar a otro nivel de dificultad, recogiendo datos y procesando resultados. Os recomiendo leerlo con calma y os adjunto un documento en catalán que os puede guiar en el aprendizaje y la comprensión. Como siempre, recordad traducirlo a vuestro idioma; es tan fácil como promptear a una IA el PDF y esperar unos segundos.
Descarga el zip con el EXE compilado y las fuentes para entender la programación - PDF
NUEVOS RETOS: LAS FÍSICAS
Asignatura: Matemáticas y física para videojuegos
A este apartado le vamos a dar un poco más de espacio en nuestro blog, ya que creo que es importante para nuestro aprendizaje.
En el primer juego (PONG) aplicaste movimiento y colisiones que son parte de las físicas en videojuegos, pero esto se complica si quieres hacer múltiples colisiones de objetos o movimientos que tengan aceleración, contraste de masas, gravedad… todo esto se puede programar. Lo haremos más adelante aplicando leyes de cinética y matemáticas, pero ahora en nuestro progreso nos ayudará hacer las cosas fáciles.
¡Vamos a cargar una librería como physicsjs de JavaScript y ver lo que se puede hacer con ella y un poco de imaginación! Y como siempre, vistiendo todo con gráficos que nos ayuden visualmente a no aburrir el producto, a hacerlo atractivo.
Primera prueba: aceleraciones y colisiones con la "Gallina loca"
Segunda prueba: el "Castillo encantado"
Ahora que hemos trasteado un poco la librería, la vamos a poner a prueba con un par de juegos que presenté (leed los comentarios para ver cómo evoluciona el código).
JUEGO 5: INVADERS (ThreeJS - POO)
En esta prueba aplicamos una librería 3D al proyecto de entrega. No es un gran juego, pero nos sirve para ver cómo podemos aplicar una vista en 3D a nuestro juego fácilmente. Recuerdo que fue un intento de acercarme a la programación orientada a objetos, con clases y demás.
Juego invaders: con programación orientada a objetos
JUEGO 6: CrazyBirds (HTML + JS + physicsjs + JQUERY)
Un juego que gustó mucho, basado en uno de los muchos ejercicios que realicé con la librería de físicas, con el que me llevé de nuevo una matrícula y mi 3ª publicación en la revista oficial de la universidad, MOSAIC.
El objetivo es que metáis los huevos en las cestas de los árboles; si queréis conseguir tiempo extra tenéis que darle un pelotazo a la urraca y vigilar que la serpiente no se coma los huevos. ¡La verdad es que quedó muy bien! Me pasé unas cuantas horas dándole al teclado.
Juego CrazyBirds: con el uso de PhysicsJS
ÚLTIMOS RETOS: FÍSICA AVANZADA Y VR
Llegamos al final del artículo con los últimos juegos, cercanos al final de mi carrera, donde la complejidad ha aumentado notablemente.
JUEGO 7: BUBBLE BLOCK (Asignatura: Física)
Aquí la complejidad está en aplicar colisiones, modificaciones de ángulos y comportamientos basados en leyes de la física y cálculos de trigonometría. No os recomiendo el análisis del código a menos que tengáis un nivel avanzado o ganas de sufrir si no os encanta la física.
La interfaz permite activar la visualización de ángulos (A) de la aplicación cuando la pelota pasa del cielo a un mar donde existe una densidad diferente, o cuando golpea un ladrillo. El código describe cómo se cargan los escenarios mediante *arrays* de forma automática: sólo dibujas cómo quieres que salgan los ladrillos y el algoritmo hace el trabajo por ti. Una chulada.
JUEGO 7: BUBBLE-BLOCK.EXE - DESCARGA CÓDIGO ZIP
JUEGO 8: EN BUSCA DE LAS LLAVES (HTML + JS + AFRAME)
Realizado para la asignatura de Realidad Virtual, adaptando la librería AFRAME para replicar entornos RA por la web. Esta experiencia busca indagar cómo podemos hacer una aventura en 3D con interacciones del usuario: os podéis mover por el escenario y el objetivo es seleccionar objetos con la mira. Carga modelos 3D gratuitos rectificados con 3D Studio Max.
Experiencia en VR: con el uso de AFRAME
JUEGO 9: FlyingFree (HTML + CSS + JS + AFRAME)
Llegamos al final de nuestro recorrido. Este juego fue merecedor de una nueva matrícula y halagos del profesor. Recuerdo que me escapé en moto a Valencia por Navidad y regresé para acabarlo porque me tenía bastante obsesionado. ¡Sí, soy un poco obsesivo cuando se me mete algo en la cabeza!
Mi último juego del Grado: FlyingFree
Es un resumen de muchas cosas: 3DMax para modelos y texturas, programación a todos los niveles y librerías externas para la composición del pentagrama. El objetivo es capturar por orden las notas musicales de la melodía; si te equivocas, el pentagrama se borra. Además, para conseguir tiempo, ¡tienes que disparar a los malvados piratas que roban los huevos!
Con la tecla `W` le dais gas al avión; con el ratón os movéis y la tecla `espacio` dispara proyectiles…
¡Y esto es todo, amigos! Espero que os hayáis divertido tanto como yo aprendiendo a programarlos. Ahora os toca a vosotros hacer el juego número 10; ¡esto no puede quedar así! 🤣
¡Por cierto! ¡Programar MOLA! 😊 ¡Que os quede claro!