Aliohjelmia ja koodin muotoilua

Aloitetaan tekemällä pelin leveydestä ja korkeudesta omat muuttujansa koodaamisen helpottamiseksi.

Lisätään pelin leveys ja korkeus omiksi muuttujikseen tiedoston alkuun:

var leveys = 800;
var korkeus = 600;

Muuta vielä pelinluomisrivi vastaamaan näitä uusia määrityksiä, niin että ensimmäiset rivit näyttävät seuraavanlaisilta:

var leveys = 800;
var korkeus = 600;
var game = new Phaser.Game(leveys, korkeus, Phaser.CANVAS, 'pong', { preload: lataus, create: luonti, update: paivitys });

Nyt on helppoa laittaa luonti-aliohjelmassa pallo keskelle peliä laskemalla pelin keskipiste. Vaihda

var pallo = game.add.sprite(0,0, kuva);

rivin sisältö seuraavanlaiseksi:

var pallo = game.add.sprite(leveys/2,korkeus/2, kuva);
```.

Tämä asettaa pallon x:ksi noin 400 ja y:ksi 300.

Huomaat, että pallo ei ole ihan keskellä ruutua. Tämä johtuu siitä, että Phaser:issä olioiden ankkuri on aluksi vasemmassa yläreunassa.
Eli pallolle annetut koordinaatit eivät ole pallon keskipiste.

Tämä voidaan korjata muokkaamalla pallon keskipistettä lisäämällä pallon luomisen jälkeen seuraavanlaiset rivit:

pallo.anchor.x = 0.5; pallo.anchor.y = 0.5;

```

Tämän jälkeen luonti aliohjelman pitäisi näyttää suunnilleen seuraavanlaiselta

function luonti() {
    game.stage.backgroundColor = "#3399ff";
	
    var kuva = luoPallonKuva(32,"#FFFFFF");
    var pallo = game.add.sprite(leveys/2,korkeus/2, kuva);
    pallo.anchor.x = 0.5;
    pallo.anchor.y = 0.5;
}

Voimme tehdä Spriten luomisesta oman aliohjelmansa, jotta kaikkia asioita ei tarvitse kirjoittaa uudestaan myöhemmin.

Luo aliohjelman luoOlio runko seuraavannäköiseksi

function luoOlio(x, y, kuva){

}

ja siirrä sitten sinne rivit luonti-aliohjelmasta

var pallo = game.add.sprite(x,y, kuva);
pallo.anchor.x = 0.5;
pallo.anchor.y = 0.5;

Vaihda nimi pallo olio-sanaksi luoOlio-aliohjelmassa. Eli korvaa kaikki pallo sanat sanalla olio. Lisää vielä pallon ankkurin asetusrivien jälkeen rivi

return olio;

Lisää vielä lopuksi luonti-aliohjelmaan kutsu luoOlio-aliohjelmalle. Luonti-aliohjelman pitäisi näyttää seuraavalta

function luonti() {
    game.stage.backgroundColor = "#3399ff";
	
    var kuva = luoPallonKuva(32,"#FFFFFF");
    var pallo = luoOlio(leveys/2, korkeus/2, kuva);
}

\(\large{\Leftarrow \textrm{Edellinen vaihe}}\) \(\large{\textrm{Seuraava vaihe}\Large\Rightarrow}\)

Koko koodin pitäisi olla jotakuinkin seuraavanlainen

var leveys = 800;
var korkeus = 600;
var game = new Phaser.Game(leveys, korkeus, Phaser.CANVAS, 'pong', { preload: lataus, create: luonti, update: paivitys });

function lataus() {
}

function luonti() {
    game.stage.backgroundColor = "#000000";
	
    var kuva = luoPallonKuva(32,"#FFFFFF");
    var pallo = luoOlio(leveys/2, korkeus/2, kuva);
}


function luoOlio(x, y, kuva){
    var olio = game.add.sprite(x,y, kuva);
    olio.anchor.x = 0.5;
    olio.anchor.y = 0.5;
    return olio;
}



function paivitys() {
}