Come promesso iniziamo con la prima proposta per la relizzazione del gioco che vi avevamo descritto nell’articolo Amarcord e nuove sfide.

Per sfida e ricerca Nerdammer vi offre sempre soluzioni non banali, poco frequentate o innovative.
Questa volta, pur con lo stesso spirito, seguiamo una soluzione “mainstream”.

Volendo sviluppare il nostro gioco con tecnologie per il web abbiamo fatto ricadere la nostra scelta su una tecnologia che ci offrisse qualche spunto di interesse e ci portasse un minimo di agio nel modellare il progetto con quegli strumenti (tra paradigmi e astrazioni) ai quale siamo abituati nella nostra esperienza di sviluppo software.

Abbiamo scelto il framework (Google) AngularJS.

La realizzazione del nostro gioco (nella versione che proponiamo) non é compito arduo in generale, pertanto un simile progetto non potrà investire tutte le potenzialità di AngularJS, e ce ne dogliamo con voi, ma la semplicità ci consente di descrivere gioco e tecnologie in un unico momento.

L’algoritmo di valutazione della risposta utente impone di verificare dapprima le cifre giuste nella corretta posizione escludendole dalla successiva valutazione delle cifre giusta nella posizione errata. Per procedere a tali valutazioni occorre modificare la risposta utente eliminando via via quanto rilevato. Nel voler far questo sulla risposta utente cosi come ci arriva dalla view ci troviamo ad affrontare il limite del tipo String in EMCA script, che è Immutable.
Per rendere il tipo String Mutable provvediamo alla modifica del suo prototype introducendo un metodo replaceAt() che pur generando una copia modifcata dell’oggetto originale riesce a mimare il comportamento mutable.

Armati di questo nuove strumento implementiamo nel controller il metodo di verifica che sarà innescato da evento click (ng-click) su un pulsante della vista.

Le valutazioni (una stringa di X e O) verranno accodate in un array del controller collegato (one-way-binding) ad un elemento <Ii > della vista: questo verrà gestito dalla direttiva ng-repeat che iterando all’array a cui è collegato provvederà dinamicamente all’aggiornamento di una vista delle risposte date dall’utente.

Questo è essenzialmente il cuore del programma.

Il resto é solo per gestire gli stati di vittoria, sconfitta e resa, le relative statistiche e qualche opzione, il tutto reso attraverso le direttive proprie di AngulaJS, qualche stile e poco altro.

Il sorgente completo lo trovate in https://github.com/andrea-tassotti/sbjs .