Mailojen lisääminen

Mailan luonti

Seuraavaksi lisätään mailat peliin. Voimme käyttää mailojen luomisessa apuna valmista luoOlio-aliohjelmaa. Tehdään aluksin yksi uusi maila luonti-aliohjelman sisälle.

Luodaan aluksi uusi kuva mailoille. Lisää seuraavanlainen rivi luonti-aliohjelman loppuun

var mailanKuva = luoKuva(32, 128, "#FFFFFF");

Mailan leveys on nyt paljon kapeampi suhteessa palloon. Voimme käyttää tätä kuvaa molempien mailojen luomiseen. Lisää tämän rivin jälkeen seuraavanlainen rivi, jolla luodaan itse maila:

var maila1 = luoOlio(leveys - 32, korkeus/2, mailanKuva);

Luomme ensimmäisen mailan oikeaan reunaan, mutta kuitenkin vähän vasemmalle reunasta, jotta mailalla voidaan estää pallon törmäys seinään. korkeus/2 asettaa mailan pelin keskelle korkeussuunnassa.

Pallo ei kuitenkaan törmää vielä mailaan. Tämä johtuu siitä, että Phaserin ARCADE-fysiikan kanssa tarkistukset pitää itse käskeä paivityksen yhteydessä.

Lisää seuraava rivi paivitys-aliohjelman sisälle:

game.physics.arcade.collide(pallo, maila1);

Jos nyt koitat käynnistää pelin, peli ei kuitenkaan toimi. Tämä johtuu siitä, että paivitys ei tiedä, mistä pallosta ja mailasta puhutaan. Tämä saadaan ratkaistua tekemällä pallosta ja mailasta globaaleja muuttujia. Poista var sana pallon ja maila1:n edestä.

Nyt pelin pitäisi toimia. Voit tallentaa pelin ja päivittää välilehden. Pallon ja mailan pitäisi törmätä nyt.

Ongelma kuitenkin on, että pallo tönäisee nyt mailaa. Mailan pitäisi pysyä täysin paikallaan kokoajan. Lisätään rivi maila1:n luomisen jälkeen, joka pysäyttää mailan:

maila1.body.immovable = true;

Nyt mailan ei pitäis enää liikkua.

Tarvitsemme vielä toisen mailan peliin. Kopioi mailan luomisrivi ja pysäytysrivi ja liitä ne pari luonti-aliohjelman loppuun. Mailojen luonnin pitäisi näyttää seuraavalta

    var mailanKuva = luoKuva(32, 128, "#FFFFFF");
    maila1 = luoOlio(leveys - 32, korkeus/2, mailanKuva);
    maila1.body.immovable = true;
    
    maila2 = luoOlio(0 + 32, korkeus/2, mailanKuva);
    maila2.body.immovable = true;

Lisää vielä paivitys-aliohjelmaan rivi

game.physics.arcade.collide(pallo, maila2);

joka sallii pallon törmätä toiseen mailaan.

Kuitenkin pallo pomppii pelissä kuin se olisi neliön muotoinen. Tämä johtuu siitä, että Phaserissa body on oletuksena neliön muotoinen. Lisää vielä seuraava rivi luonti-aliohjelmaan pallon luomisen jälkeen

pallo.body.setCircle(32);

Pelin pitäisi näyttää seuraavalta tällä hetkellä

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

Koko koodi vaiheen lopussa:

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.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = "#000000";
    
    var kuva = luoPallonKuva(32,"#FFFFFF");
    pallo = luoOlio(leveys/2, korkeus/2, kuva);
    pallo.body.bounce.set(1);
    pallo.body.velocity = new Phaser.Point(150, 0);
    pallo.body.setCircle(32);
    
    var mailanKuva = luoKuva(32, 128, "#FFFFFF");
    maila1 = luoOlio(leveys - 32, korkeus/2, mailanKuva);
    maila1.body.immovable = true;
    
    maila2 = luoOlio(0 + 32, korkeus/2, mailanKuva);
    maila2.body.immovable = true;
}


function luoOlio(x, y, kuva){
    var olio = game.add.sprite(x,y, kuva);
    olio.anchor.x = 0.5;
    olio.anchor.y = 0.5;
    game.physics.enable(olio, Phaser.Physics.ARCADE);
    olio.body.collideWorldBounds = true;
    return olio;
}



function paivitys() {
    game.physics.arcade.collide(pallo, maila1);
    game.physics.arcade.collide(pallo, maila2);
}