Mailojen liikuttaminen

Näppäinkuuntelun aloittaminen

Mailoja ei pystytä vielä liikuttamaan, joten tässä vaiheessa toteutetaan näppäinkuuntelijat ja mailojen liikutus.

Phaserissa pitää sallia näppäimistön kuuntelu. Tehdään tätä varten oma aliohjelmansa salliKuuntelu.

function salliKuuntelu(){
}

Lisää vielä seuraavat rivit aliohjelmaan

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

Ensimmäinen rivi sallii nuolinäppäimien kuuntelun. Tämän jälkeen sallitaan vielä kuuntelu W ja S näppäimistä toista pelaajaa varten.

Lisää luontialiohjelman alkuun kutsu salliKuuntelu-aliohjelmalle taustavärin vaihtamisen jälkeen.

game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = "#000000";
salliKuuntelu();

Näppäinten kuuntelu

Phaserissa näppäimien kuuntelu tapahtuu lisäämällä paivitys-aliohjelmaan tarkastelun, minkä avulla voidaan tarkistaa, mikäli näppäintä on painettu. Aloitetaan oikeanpuoleisen pelaajan näppäinten tarkastelulla.

if (cursors.up.isDown)
{
        maila1.body.velocity.y = -200;
}

Phaserin koordinaatisto kasvaa alaspäin, joten ylöspäin liikkuminen tarkoittaa, että y-akselilla pitää mennä negatiiviseen suuntaan. Nyt kun näppäimen painaa kerran, jää maila liikkumaan pysyvästi. Lisätään vielä ehto, että mikäli näppäin ei ole painettuna, pysäytetään maila.

if (cursors.up.isDown)
{
    maila1.body.velocity.y = -200;
}
else{
    maila1.body.velocity.y = 0;
}

Jos teemme samalla tavoin alaspäin liikkumisen, ei maila liikukkaan enää ylöspäin. Tämä johtuu siitä, että ehto pysäyttää mailan, mikäli viimeisin lauseke ei toteutunut. Tämä saadaan korjattua lisäämällä alaspäin liikuttaminen kahden edellisen lausekkeen väliin.

if (cursors.up.isDown)
{
    maila1.body.velocity.y = -200;
} else if (cursors.down.isDown){
    maila1.body.velocity.y = 200;
}
else{
    maila1.body.velocity.y = 0;
}

Nyt nopeuden muuttaminen vaatisi usean rivin muuttamista. Tästä syystä lisätään vielä kooditiedoston yläreunaan nopeus-muuttuja:

var leveys = 800;
var korkeus = 600;

var nopeus = 200;

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

Ja korvataan paivitys-aliohjelmasta kaikki 200-numerot sanalla nopeus.

if (cursors.up.isDown)
{
    maila1.body.velocity.y = -nopeus;
} else if (cursors.down.isDown){
    maila1.body.velocity.y = nopeus;
}
else{
    maila1.body.velocity.y = 0;
}

Vielä tarvitsee asettaa näppäinkuuntelijat myös toiselle pelaajalle. Tämä onnistuu hyvin samankaltaisesti, mutta vaihdetaan vain tarkasteltavia näppäimiä.

Tehdään kuitenkin erillinen aliohjelma tarkistuksia varten, ettei tule kopioitua koodia. Tehdään siis aliohjelma, tarkistaLiike, joka näyttää seuraavalta:

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;
    }
}

Nyt voidaan vain kutsua paivitys-aliohjelmassa kahta eri tarkistamista seuraavalla tavalla:

tarkistaLiike(maila1, cursors.up, cursors.down);
tarkistaLiike(maila2, wButton, sButton);

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

Vaiheen lopussa koodin tulisi näyttää seuraavalta:

var leveys = 800;
var korkeus = 600;
var nopeus = 200;
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";
    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.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 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);

}