Settimana scorsa si è svolta in tutto il mondo la Global Game Jam 2019, io ho partecipato insieme al mio gruppo, Team 10, nel Jam Site di Milano, precisamente nell'edificio 26, aka mensa, del Politecnico di Milano.

Il tema principale, che ora possiamo rivelare, è: "Cosa 'casa' significa per te?", o in inglese "What home means to you?". Un tema sicuramente molto più complesso rispetto al tema "tramissione" dello scorso anno. Casa più significare tutto, dalla "famiglia" al "riposare", se non addirittura il "bagno". Sono bastate poche ore perchè ci rendessimo conto di non riuscire a realizzare un gioco con un significato profondo, ognuno di noi ha una propria idea di casa, è impossibile accomunarle tutte ad un solo concetto. Abbiamo quindi deciso di preparare qualcosa di definitivamente più concreto è meno profondo, potremmo anche dire ai limiti del trash.

La casa di un sito web è rappresentata dalla sua homepage, ed è questo l'obbiettivo del nostro videogame.

You are browsing the web and you find yourself blocked in a webpage with no return button. What will you start looking for? Maybe you'll start searching for a "Home" button... and that's when the game start. You'll find yourself (as a chicken :P) blocked at the bottom of the page and you'll need to start jumping around to reach the home button. Once you get there, you will be redirected to the home page you were looking for!

Nonostante l'innata stupidità del gioco, ci siamo resi conto che giocarci riesce a fare uscire qualche sorriso, soprattutto perché la difficoltà del gioco è rappresentata dalle pagine web, che, a volte, riescono a rendere impossibile raggiungere la homepage. Immaginatevi un sito web con nel mezzo un'immagine full-width molto alta, il protagonista di Cock O' The non sarà mai in grado di superarla. Abbiamo aggiunto le uova-bomba così da dare un boost al personaggio per superare degli spazi più lunghi ma, a volte, ciò non basta. In questi ultimi casi l'unica soluzione è andare a modificare la sorgente della pagina tramite ispeziona elemento, ovviamente tutto in meno di 60 secondi. Infine, per aggiungere un'ulteriore complicazione abbiamo dato una vita alle componenti della pagina, dopo un tempo casuale cadranno e non ti permetteranno più di salire. Vi auguro buona fortuna a risalire un sito con infinite-loading!

Adesso addentriamoci nella sezione tecnica di questo gioco che, per deformazione professionale, risulterà ovviamente essere la più interessante.

Il gioco si tratta di un'estensione Chrome sviluppata in ES7 e pacchettizzata con Webpack e Babel.

Individuazione della homepage

Un componente del gioco si occupa di individuare le candidate homepage della pagina web. Attraverso delle query XPath riesce a trovare tutto ciò che assomiglia ad una homepage e lo sostituisce con un trigger del gioco. Ovviamente nei casi in cui la homepage non si tratti di un vero e proprio link ma di un wrapper che linka alla homepage tramite javascript il componente non è in grado di individuarlo.

Parsing della pagina

Il parsing della pagina avviene non appena il gioco inizia. Il parser svolge una funzione fondamentale: individua le componenti della pagina su cui il personaggio potrà saltare. Per far ciò cerca tutti i paragrafi, le intestazioni, le immagini, i link, etc. e applica ad essi diverse trasformazioni bloccando così quelli che hanno una width larga tutta la pagina. Una delle trasformazioni più importanti è sicurezza l'inserimento di tutti i testi in uno span wrapper così che il contenitore occupi solo la larghezza del testo stesso.

Rendering e gestione eventi

Abbiamo deciso di affidarci all'engine del browser per gestire il movimento del personaggio, non abbiamo quindi fatto uso dei canvas. Questa decisione è stata dettata dal poco tempo a disposizione, non avremmo fatto in tempo a realizzare un engine in meno di 48 ore. Il rerendering della pagina è quindi collegato al numero di tick per secondo che il gioco esegue. Abbiamo impostato questo valore a 60 per dare una maggiore fluidità, a discapito di una maggiore pesantezza del gioco stesso. Ogni sessantesimo di secondo il componente Ticker chiama la funzione tick() di tutti i componenti ad esso registrato, i quali verificano il tempo, muovono il personaggio, aggiornano la ui, gestiscono lo sparo, etc.

Multiplayer

Non abbiamo avuto tempo per implementare un motore di rendering efficiente ma abbiamo deciso di provare ad implementare un multiplayer. Nel giro di poche ore abbiamo abbandonato quest'idea pazza, soprattutto quando ci siamo resi conto che permette a due giocatori di giocare sulla stessa pagina web anche con dimensioni della scheda diversa era impossibile, se non applicando strane trasformazioni alla pagina. Ad ogni caso è possibile provare il multiplayer in modalità sviluppo. Abbiamo realizzato un mini web-socket server con socket.io che non fa altro che broadcastare a tutti i client collegati le posizioni dei vari player, il gioco renderizza i player nella posizione che riceve. Ovviamente non è in alcun modo sicuro o funzionante, è solo uno scratch.

Sorgente

Tutto il sorgente è disponibile su GitHub a questo indirizzo: https://github.com/pupaxxo/cock-o-the.

Non esistate a contattarmi al mio indirizzo email per qualsiasi altra informazione: andrea@ruggiero.top