Pisteenlaskun toteutus

Pong-pelissä on tarkoitus saada pisteitä, mikäli pallo osuu vastustajanpuolen seinään. Phaserissä törmäykset reunojen kanssa voidaan tehdä lisäämällä pallon body:lle uusi tapahtuma, kun pallo osuu maailman reunojen kanssa.

Lisää luonti-aliohjelmaan seuraavat rivit pallon luomisen jälkeen

pallo.body.onWorldBounds = new Phaser.Signal();
pallo.body.onWorldBounds.add(tormasiSeinaan);

Ensimmäinen rivi kertoo Phaserille, että nyt halutaan kuunnella tuota tapahtumaa. Toisella rivillä kerrotaan, mikä aliohjelma suoritetaan törmäyksen yhteydessä.

Tee vielä runko aliohjelmalle tormasiSeinaan ja muotoile se seuraavanlaiseksi:

function tormasiSeinaan(tormaaja, ylos, alas, vasen, oikea){

}

Ensimmäinen parametri tormaaja on pallo. Tormaaja-muuttujan avulla pystyy siis muuttamaan pallon ominaisuuksia. Loput parametrit ylos, alas, vasen, oikea kertovat, mihinkä seinään törmättiin. Pisteet täytyy vielä tallentaa peliä varten, jotta ne voidaan lopuksi näyttää. Lisää tiedoston yläreunaan uudet muuttujat pelaajien pisteille p1Pisteet ja p2Pisteet.

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

Nyt voimme tehdä tormasiSeinaan tarkistuksen sille, mihinkä reunaan törmättiin. Tarkoitus on antaa pelaajayhdelle piste vasemman reunan törmäyksestä ja pelaaja kahdelle oikean reunan törmäyksestä, sillä ne ovat pelaajien vastakkaiset reunat. Myös, jos pallo osuu vasempaan tai oikeaan reunaan, palautetaan pallo keskelle peliä. Laitoimme aiemmin pallon keskelle ruutua laittamalla sen koordinaateiksi leveys/2, korkeus/2. Lisää seuraavanlainen tarkistus tormasiSeinaan-aliohjelman sisälle:

if(vasen){
    tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
    p1Pisteet++;
}

Pallon pitäisi nyt palata keskelle vasemmasta reunasta ja pelaaja yksi saa pisteen. Pisteet eivät vielä näy millään tavalla pelissä. Tehdään samankaltainen tarkistus vielä toiselle reunalle:

if(oikea){
   tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
   p2Pisteet++;
}

Nyt molemmista reunoista tapahtuu törmäys ja pisteet päivittyvät!

Pisteiden näyttäminen pelissä

Aluksi tarvitsee määritellä tyyli, minkälaista tekstiä pelissä käytetään. Lisää seuraava rivi tiedoston yläreunaan muiden muuttujien luokse

var tekstinTyyli = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };

Rivillä määritellään tekstin tyyli. Fonttina käytetään paksunnettua Arial-fonttia ja koko on 32 pikseliä per kirjain. Voit vaihtaa pienemmän tai isomman fontin, jos haluat. Seuraavaksi määritellään väri eli fill. #fff tarkoittaa täysin valkoista väriä ja esimerkiksi #f00 on punainen teksti. Voit vaihtaa myös tekstin väriä, kuitenkin ota huomioon että musta teksti ei näy mustalla taustalla. Bounds-kohdat määrittävät mitenkä kirjaimet asettuvat suhteessa tekstin asetuspaikkaan. Nyt teksti asettuu keskelle tekstin asetettua paikkaa, mikä kelpaa oikein hyvin.

Tekstin lisäys Phaserissa on hyvin samankaltaista kuin peliolionkin. Tekstien luomista varten kannattaa kuitenkin tehdä oma aliohjelmansa. Tee runko luoTeksti valmiiksi ja muotoile se seuraavanlaiseksi:

function luoTeksti(x, y, teksti){

}

Seuraavaksi luoTeksti muotoillaan niin, että sillä pystyy tekemään yksinkertaisia tekstejä haluttuihin koordinaatteihin. Lisää seuraavanlaiset rivit luoTeksti aliohjelmaan:

var text = game.add.text(x, y, teksti, tekstinTyyli);

return text;

Lisää vielä luonti-aliohjelman loppuun seuraavanlainen rivi

p1Pistenaytto = luoTeksti(leveys * 0.8, korkeus * 0.15, "0");

Rivillä luodaan uusi, globaali teksti, jota voidaan muokata muistakin aliohjelmista. Teksti on hyvä laittaa oikealle puolelle näyttöä, mikä onnistuu hyvin laittamalla teksti neljä viidesosaa leveydestä (0.8). Korkeutta asettaessa täytyy muistaa, että Phaserin koordinaatisto kasvaa alaspäin, eli korkeus * 0.15 on hyvin lähellä yläreunaa. Viimeinen asia "0" kertoo, mitä tekstiksi kirjoitetaan aluksi.

Tee toinen teksti vielä toiselle pelaajalle

p2Pistenaytto = luoTeksti(leveys * 0.2, korkeus * 0.15, "0");

Tässä 0.2 tarkoittaa yhtä viidesosaa näytön leveydestä.

Jos tallennat pelin ja käynnistät sen, pisteet eivät vielä päivity pelissä oikein. Tämä johtuu siitä, että pistetekstejä pitää itse päivittää ohjelmakoodissa.

Tämä onnistuu hyvin tormasiSeinaan-aliohjelmassa. Lisää aliohjelmaan erikseen vasemman ja oikean tarkistuksen yhteyteen vielä oikean pistenäytön päivitykset

p1Pistenaytto.text = ""+p1Pisteet;

ja

p2Pistenaytto.text = ""+p2Pisteet;

Tämän jälkeen tormasiSeinaan-aliohjelman pitäisi näyttää seuraavalta

function tormasiSeinaan(tormaaja, ylos, alas, vasen, oikea){
    if(vasen){
        tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
        p1Pisteet++;
        p1Pistenaytto.text = ""+p1Pisteet;
    }
    if(oikea){
        tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
        p2Pisteet++;
        p2Pistenaytto.text = ""+p2Pisteet;
    }
}

Nyt olet saanut Phaser Pongin valmiiksi!

\(\large{\Leftarrow \textrm{Edellinen vaihe}}\)

Lisäosat

Lisäosia:

• Kosketuksen kuuntelu
• Tekoälyn toteuttaminen
• Kuvien lataaminen peliin
• Käyttöliittymän tekeminen

Lopuksi koodin pitäisi näyttää seuraavalta:

var leveys = 800;
var korkeus = 600;
var nopeus = 200;
var p1Pisteet = 0;
var p2Pisteet = 0;
var game = new Phaser.Game(leveys, korkeus, Phaser.CANVAS, 'pong', { preload: lataus, create: luonti, update: paivitys });
var tekstinTyyli = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };

function lataus() {
}

function luonti() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = "#000000";
    salliKuuntelu();
    	
    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.onWorldBounds = new Phaser.Signal();
    pallo.body.onWorldBounds.add(tormasiSeinaan);
    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;
    
    p1Pistenaytto = luoTeksti(leveys * 0.8, korkeus * 0.15, "0");
    p2Pistenaytto = luoTeksti(leveys * 0.2, korkeus * 0.15, "0");
}


function luoTeksti(x, y, teksti){
    var text = game.add.text(x, y, teksti, tekstinTyyli);
    
    return text;
}


function tormasiSeinaan(tormaaja, ylos, alas, vasen, oikea){
    if(vasen){
        tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
        p1Pisteet++;
        p1Pistenaytto.text = ""+p1Pisteet;
    }
    if(oikea){
        tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
        p2Pisteet++;
        p2Pistenaytto.text = ""+p2Pisteet;
    }
}


function salliKuuntelu(){
    cursors = game.input.keyboard.createCursorKeys();
    wButton = game.input.keyboard.addKey(Phaser.Keyboard.W);
    sButton = game.input.keyboard.addKey(Phaser.Keyboard.S);
}


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 tarkistaLiike(maila, ylos, alas){
    if (ylos.isDown)
    {
        maila.body.velocity.y = -nopeus;
    } else if (alas.isDown){
        maila.body.velocity.y = nopeus;
    }
    else{
        maila.body.velocity.y = 0;
    }
}


function paivitys() {
    game.physics.arcade.collide(pallo, maila1);
    game.physics.arcade.collide(pallo, maila2);
    
    tarkistaLiike(maila1, cursors.up, cursors.down);
    tarkistaLiike(maila2, wButton, sButton);

}