Giochi per Windows - Pratica su Windows Phone

Oggi, vedremo come costruire il nostro primo motore grafico! Per prima cosa, avviamo Visual Studio e apriamo il progetto che abbiamo creato in questi due articoli: Parte 1 Parte 2. Nel'articolo sulla teoria di un gioco, ho detto che un motore grafico, è strutturato in un Caricamento delle risorse ed un  ciclo infinito. Andiamo ad vedere come caricare le risorse.
Nel Solution Explorer di  Visual Studio clicchiamo due volte sul file default.js che si trova nella cartella js. La funzione onLoad fa al caso nostro, perché è la prima funzione ad essere eseguita appena la pagina viene caricata. In questo tutorial non caricheremo delle risorse specifiche, ma andremo ad cambiare lo sfondo di Background ed a disegnare un quadrato, che verrà spostato sullo schermo, ecco come fare:

Facciamo un po di chiarezza, su quello che abbiamo scritto:

• document.body.setAttribute('style', 'background-color:#00c0ff'): Questa riga serve a cambiare lo sfondo della pagina.
• var div = document.createElement('div'): creiamo un nuovo elemento HTML div.
• div.setAttribute('id', 'box'): diamo un id univoco all'elemento, per poterlo richiamare dal codice Javascript.
• div.setAttribute('style', 'position:absolute;width:20px;height:20px;top:10px;left:10px;border:1px solid #000;background-color:#00ff60'): Definiamo uno stile CSS per questo nuovo elemento.
• document.body.appendChild(div): Inseriamo questo nuovo div all'interno della pagina, come figlio del body.

In questo caso, noi abbiamo caricato(costruito)le nostre risorse, adesso dobbiamo entrare nel ciclo infinito:

• var FPS = 30: Abbiamo definito la nostra unità di misura, vogliamo che ogni secondo vengano riprodotti 30 fotogrammi, come inizio non è male.
• setInterval(gameLoop, 1000 / FPS): Avviamo il nostro ciclo. 1000/FPS serve a calcolare quante volte in un secondo deve essere eseguita la funzione gameLoop, se dentro di essa chiamiamo una funzione che ridisegna l'interfaccia, abbiamo la nostra animazione a 30 fotogrammi al secondo.
• function gameLoop() {}: è  il vero e proprio ciclo del gioco.

Siccome che l'oggetto che andremo a spostare è un cubo, direi di creare un oggetto box:

• x e  y sono la posizione in cui si trova il cubo.
• w  e h sono rispettivamente la lunghezza e l'altezza del cubo.

Aggiungiamo una funzione onClick:

Che non fa altro che ricavare le coordinate dell'ultimo punto cliccato e salvare nell'oggetto box.

La funzione la richiamiamo tramite l'istruzione window.document.onclick = onClick; inserita nella funzione onLoad:

Basta richiamarla una volta sola prima del nostro ciclo. Questo perché sovrascriviamo un handler nell'evento onclick del documento, quindi l'ascolto di un nuovo click viene effettuato direttamente da javascript, a noi rimane solo il compito di aggiornare il nostro oggetto box. Ovviamente, se avviamo il nostro progetto in questo momento, non vedremo spostare un bel niente, questo perché non ci siamo ancora preoccupati di aggiornare la nostra finestra, ed è quello che andremo a fare. Creiamo una funzione onDraw:

che richiameremo dentro al nostro ciclo:

L'ultima modifica da effettuare è cambiare la riga:

div.setAttribute('style', 'position:absolute;width:20px;height:20px;top:10px;left:10px;border:1px solid #000;background-color:#00ff60');

dentro la funzione onLoad con questa:

div.setAttribute('style', 'position:absolute;width:' + box.w + 'px;height:' + box.h + 'px;top:' + box.x + 'px;left:' + box.y + 'px;border:1px solid #000;background-color:#00ff60'); 

di modo che, basta cambiare la x, y, w e h dell'oggetto box per rendere subito effettive le modifiche fin dall'inizio. Prima di eseguire, dal Solution Explorer apriamo il file default.html che si trova nella cartella html ed cancelliamo questa riga:

<h1>page name</h1>

Così avremo tutto lo schermo a nostra a disposizione, per sbizzarrirci a muovere il nostro cubo. Salviamo

ed eseguiamo

Per ora, buon divertimento. Presto qualche nuova modifica, per ampliare il motore grafico!