Ara que la IA ens ataca i es comencen a sentir comentaris de: “no estudies programació, està morta” o “és una pèrdua de temps, dedica-ho a una altra cosa”, repassaré durant uns minuts, amb el màxim detall que pugui recordar, alguns dels jocs que vaig realitzar cursant la carrera de Multimèdia de la Universitat Oberta de Catalunya.
Abans de començar amb el viatge, m'agradaria deixar clara la meva opinió donant resposta a aquesta pregunta que escolto en molts vídeos i comentaris a les xarxes socials:
Estudio o no estudio programació?
La veritat és que fa anys que faig coses amb diversos llenguatges: HTML, JavaScript, Processing, PHP, C, C#... gaudint molt, ja que m'agrada la programació, però no em considero un programador professional. És més, sé que el codi que us presento té errors i en alguns casos serà codi espagueti o mal estructurat, però és el que hi ha! Així ho vaig realitzar i amb ell vaig superar el problema, i les assignatures amb les millors notes ☺️.
Sincerament, sé per experiència pròpia que, si no practiques a diari programant el que sigui, aquest *know-how* es va perdent. L'agilitat, el com construir codi, s'evapora com si res. L'oblides fàcilment. Però quelcom queda en la teva manera de pensar: la forma d'estructurar i atacar els problemes, planificar, ser resolutiu, dividir l'objectiu en funcions o petites “fites”... no sé, crec que aprendre a programar et canvia la manera de pensar i l'estrategia de com analitzes els problemes o prens decisions.
Només per això, VAL LA PENA APRENDRE A PROGRAMAR!
... Ara, passem a aprendre jugant?
Tots els exemples que us passo estan comentats perquè pugueu anar veient per què faig les coses, a més us he ordenat els jocs de menor a major dificultat perquè pugueu planejar-vos el repte d'anar progressant. Utilitzeu "Veure codi font" al navegador o descarregueu el programa amb el seu codi font adjunt.
JOC 1: ELS INICIS (PONG)
Assignatura: Programació WEB (HTML + CSS + JavaScript)
Aquest va ser el primer joc que vaig realitzar farà uns 10 anys. Un simple Pong, com el de les màquines de joc dels primers salons dels 80, o aquelles videoconsoles que treballaven amb memòries de 6k’s o menys (Palson).
Amb ell, pots aprendre el concepte de variables, assignació de valors i com treballar amb funcions de forma fàcil. També començarem a tocar codi HTML i estils senzills amb CSS i des de JavaScript reassignareu el valor dels IDs a CSS, la qual cosa crearà la màgia en pantalla.
Heu de començar aprenent a dibuixar una pilota (un *box*) que reboti contra la paret del final de la pantalla. Aquest és el primer pas. Ja després compliqueu l'experiència creant la pala, el seu moviment i finalment les col·lisions contra la pala. Si us ve de gust crearé un tutorial de com fer-ho fàcilment. Us passo les primeres línies de codi... perquè us inicieu. 🙃
<html>
<head>
<style>
/* Estil de la pilota */
#pelota {
width: 10px; /* ample de la pilota */
height: 10px; /* alt de la pilota */
background-color: black; /* color negre */
position: absolute; /* permet moure-la amb left i top */
left: 10px; /* posició inicial horitzontal */
top: 50px; /* posició inicial vertical */
}
</style>
</head>
<body>
<!-- Element que farà de pilota -->
<div id="pelota"></div>
<script>
// Obtenim l'element HTML amb id "pelota"
const pelota = document.getElementById("pelota");
// Variable numèrica que guarda la posició horitzontal
let x = 10;
// Cada 1000 ms (1 segon), movem la pilota 10 píxels a la dreta
setInterval(function () {
x = x + 10; // sumem 10 a la posició actual
pelota.style.left = x + "px"; // actualitzem la propietat CSS left
}, 1000);
</script>
</body>
</html>
JOC SIMPLE - (PONG - Codi comentat sencer d'un simple PONG)
JOC 2: EL PENJAT (Extra)
Aquest joc no el vaig realitzar per a cap assignatura, el vaig idear com una manera d'entendre i ensenyar als meus alumnes els *arrays*.
La progressió és bastant clara: ara que ja saps crear variables, com reassignar els seus valors i passar-los al DOM amb HTML i CSS generant funcions, has d'entendre com escalar el contingut d'un ARRAY. Un *array* és una espècie de contenidor d'una o diverses dimensions on emmagatzemem dades.
Amb una funció del tipus `FOR` pots aprendre a anar accedint i llistant tot el contingut, així com reassignant valors a cada un dels elements:
// 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]);
}
Us deixo comentat el codi per si us ve de gust trastejar. El joc té un simple *array* que és la paraula per endevinar, on les lletres de la paraula secreta són els elements de l'*array* que escalareu i comprobareu. Aquesta és la progressió natural al primer joc. Si vols pots complicar-ho creant un doble *array*, el de les paraules secretes i el de la paraula actual a endevinar… tot són idees perquè progressis ;)
JOC EL PENJAT - (EL PENJAT - Codi comentat sencer del penjat)
DESCÀRREGA ZIP - (EL PENJAT ZIP)
JOC 3: RECOLLINT OUS
Assignatura: Integració digital de continguts
Crec que ara que ja sabeu interpretar part del codi, definir variables, crear funcions i recórrer un *array*, toca deixar les coses boniques. Aquesta és una cosa que he tingut clara al llarg de tota la carrera: posar boniques les coses multiplica per 1000 l'experiència d'usuari.
Un codi fàcil com el PONG es pot convertir en quelcom molt atractiu amb un parell o tres d'imatges… fixa't en el canvi.
JOC PONG MILLORAT - CODI COMENTAT
Per això us proposo tornar a fer el PONG cridant a imatges o aquesta alternativa amb la mateixa complexitat de codi, però aplicada d'una altra forma i en un altre llenguatge: PROCESSING. Això us ajudarà a entendre que quan saps programar, canviar l'escenari (EL TEU LLENGUATGE) és simplement qüestió d'adaptar-se al nou entorn… no és complicat.
JOC AMB PROCESSING - Joc aplicant un llenguatge diferent: Processing
JOC 4: Un 4 en ratlla amb Processing.
Assignatura: Integració digital de continguts
En aquest joc s'hi treballa la interacció amb dos jugadors, s'aprofundeix en la tècnica d'arrays, desenvolupant múltiples matrius de dades i variables complexes. Les funcions també comencen a estar en un altre nivell de dificultat, recollint dades i processant resultats. Us recomano llegir-lo amb calma i us adjunto el document que us pot guiar en l'aprenentatge i la comprensió. Com sempre, recordeu que la IA us el pot traduir a qualsevol idioma en uns segons.
Descarrega el zip amb l'EXE compilat i les fonts per entendre la programació - PDF
NOUS REPTES: LES FÍSIQUES
Assignatura: Matemàtiques i física per a videojocs
A aquest apartat li donarem una mica més d'espai al nostre blog, ja que crec que és important per al nostre aprenentatge.
En el primer joc (PONG) vas aplicar moviment i col·lisions que són part de les físiques en videojocs, però això es complica si vols fer múltiples col·lisions d'objectes o moviments que tinguin acceleració, contrast de masses, gravetat… tot això es pot programar. Ho farem més endavant aplicant lleis de cinètica i matemàtiques, però ara en el nostre progrés ens ajudarà fer les coses fàcils.
Carregarem una llibreria com physicsjs de JavaScript i veurem què es pot fer amb ella i una mica d'imaginació! I com sempre, vestint-ho tot amb gràfics que ens ajudin visualment a no avorrir el producte, a fer-ho atractiu.
Primera prova: acceleracions i col·lisions amb la "Gallina loca"
Segona prova: el "Castell encantat"
Ara que hem trastejat una mica la llibreria, la posarem a prova amb un parell de jocs que vaig presentar (llegiu els comentaris per veure com evoluciona el codi).
JOC 5: INVADERS (ThreeJS - POO)
En aquesta prova apliquem una llibreria 3D al projecte de lliurament. No és un gran joc, però ens serveix per veure com podem aplicar una vista en 3D al nostre joc fàcilment. Recordo que va ser un intent d'apropar-me a la programació orientada a objectes, amb classes i demés.
Joc invaders: amb programació orientada a objectes
JOC 6: CrazyBirds (HTML + JS + physicsjs + JQUERY)
Un joc que va agradar molt, basat en un dels molts exercicis que vaig realitzar amb la llibreria de físiques, amb el que em vaig emportar de nou una matrícula i la meva 3a publicació a la revista oficial de la universitat, MOSAIC.
L'objectiu és que introduïu els ous a les cistelles dels arbres; si voleu aconseguir temps extra heu de donar un cop de pilota a la garsa i vigilar que la serp no es mengi els ous. La veritat és que va quedar molt bé! Em vaig passar unes quantes hores donant-li al teclat.
Joc CrazyBirds: amb l'ús de PhysicsJS
ÚLTIMS REPTES: FÍSICA AVANÇADA I VR
Arribem al final de l'article amb els últims jocs, propers al final de la meva carrera, on la complexitat ha augmentat notablement.
JOC 7: BUBBLE BLOCK (Assignatura: Física)
Aquí la complexitat està en aplicar col·lisions, modificacions d'angles i comportaments basats en lleis de la física i càlculs de trigonometria. No us recomano l'anàlisi del codi a menys que tingueu un nivell avançat o ganes de patir si no us encanta la física.
La interfície permet activar la visualització d'angles (A) de l'aplicació quan la pilota passa del cel a un mar on existeix una densitat diferent, o quan pica contra un totxo. El codi descriu com es carreguen els escenaris mitjançant *arrays* de forma automàtica: només dibuixes com vols que surtin els totxos i l'algorisme fa la feina per tu. Una passada.
JOC 7: BUBBLE-BLOCK.EXE - DESCÀRREGA CODI ZIP
JOC 8: A LA RECERCA DE LES CLAUS (HTML + JS + AFRAME)
Realitzat per a l'assignatura de Realitat Virtual, adaptant la llibreria AFRAME per replicar entorns RA per la web. Aquesta experiència busca indagar com podem fer una aventura en 3D amb interaccions de l'usuari: us podeu moure per l'escenari i l'objectiu és seleccionar objectes amb la mira. Carrega models 3D gratuïts rectificats amb 3D Studio Max.
Experiència en VR: amb l'ús de AFRAME
JOC 9: FlyingFree (HTML + CSS + JS + AFRAME)
Arribem al final del nostre recorregut. Aquest joc va ser mereixedor d'una nova matrícula i elogis del professor. Recordo que em vaig escapar en moto a València per Nadal i vaig tornar per acabar-lo perquè em tenia bastant obsessionat. Sí, sóc un poc obsessiu quan se m'encén la bombeta!
El meu últim joc del Grau: FlyingFree
És un resum de moltes coses: 3DMax per a models i textures, programació a tots els nivells i llibreries externes per a la composició del pentagrama. L'objectiu és capturar per ordre les notes musicals de la melodia; si t'equivoques, el pentagrama s'esborra. A més, per aconseguir temps, has de disparar als malvats pirates que roben els ous!
Amb la tecla `W` li doneu gas a l'avió; amb el ratolí us moveu i la tecla `espai` dispara projectils…
I això és tot, amics! Espero que us hagueu divertit tant com jo aprenent a programar-los. Ara us toca a vosaltres fer el joc número 10; això no pot quedar així! 🤣
Per cert! Programar MOLA! 😊 Que us quedi clar!