Käyttöliittymän teko peliin

Tätä vaihetta varten oletetaan, että on tehty tekoäly ja kuvien lataukseen liittyvät lisäosat!

Ota seuraava kuva ja laita se kuvat-kansioon nimellä kuvakkeet.png

Voit myös tehdä 150x50 kuvan, jossa jokainen 50 pikselin pätkä edustaa erilaista tilaa painikkeesta. Kuvasarjan saa ladattua seuraavankaltaisella komennolla Phaserissa:

game.load.spritesheet('painikkeet', 'kuvat/kuvakkeet.png', 50, 50);

'painikkeet' on kuvan nimi muualla koodissa, seuraavaksi kerrotaan, mistä kuva ladataan ja viimeisenä kerrotaan yksittäisen kuvan koko. Lisää tämä rivi lataus-aliohjelmaan.

Näppäimen pystyy luomaan hyvin samankaltaisesti kuin muunkin olion Phaserissa. Lisää seuraavanlainen rivi luonti-aliohjelman sisälle:

game.add.button(leveys * 0.55, korkeus * 0.05, 'painikkeet', vaihdaPelaajanTilaa, this, 2, 1, 0);

Ensimmäiset kaksi parametria ovat painikkeen paikka x- ja y-koordinaatteina. Seuraavana kerrotaan kuva, joka tällä tavalla tehtynä oletetaan sisältävän useita kuvia. vaihdaPelaajanTilaa on aliohjelma, joka suoritetaan painaessa painiketta. Viimeiseti kolme parametria määrittävät kuvien järjestyksen.

Jos pidät 2 1 0 järjestyksen, tulee kirkas painike painettaessa. Kevyesti korostettu painike, kun hiiri on näppäimen päällä ja tummin, kun hiiri ei ole painikkeen lähellä.

\(\large{\Leftarrow \textrm{Vaihe 6-sivulle}}\)

Tee runko aliohjelmalle vaihdaPelaajanTilaa seuraavanlaiseksi:

function vaihdaPelaajanTilaa(){
    
}

Nyt koodin pitäisi kääntyä ja voit testata klikata näppäintä. Maila liikkuu klikatessa painikkeesta, mutta tästä ei tarvitse välittää.

Laita vielä seuraavanlainen rivi vaihdaPelaajanTilaa-aliohjelmaan:

tekoalyPaalla = !tekoalyPaalla;

Voit nyt vapaasti vaihtaa tekoälyn päälle ja pois päältä!

Koodi vaiheen lopuksi:

var tekoalyPaalla = true;
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() {
    game.load.image('pallo','kuvat/Pallo.png');
    game.load.spritesheet('painikkeet', 'kuvat/kuvakkeet.png', 50, 50);
}

function luonti() {
   game.physics.startSystem(Phaser.Physics.ARCADE);
   game.stage.backgroundColor = "#000000";
   salliKuuntelu();
   
   var kuva = luoPallonKuva(32,"#FFFFFF");
   pallo = luoOlio(leveys/2, korkeus/2, 'pallo');
   pallo.body.bounce.set(1.1);
   pallo.body.velocity = new Phaser.Point(250, 0);
   pallo.body.onWorldBounds = new Phaser.Signal();
   pallo.body.onWorldBounds.add(tormasiSeinaan);
   pallo.body.setCircle(32);
   
   game.add.button(leveys * 0.55, korkeus * 0.05, 'painikkeet', vaihdaPelaajanTilaa, this, 2, 1, 0);
   
   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 vaihdaPelaajanTilaa(){
    tekoalyPaalla = !tekoalyPaalla;
}

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 tarkistaOsoitin(osoitin, xRaja, yRaja, ekaLiikutettava, tokaLiikutettava, nopeus){
    if(osoitin.isDown){
        var suunta = 0.0;
        if (osoitin.position.y > yRaja){
            suunta = 1.0;
        }
        else{
            suunta = -1.0;
        }
        if(osoitin.position.x > xRaja){
            ekaLiikutettava.body.velocity.y = suunta * nopeus;
        }
        else{
            tokaLiikutettava.body.velocity.y = suunta * nopeus;
        }
    }
}


function kasitteleTekoaly(maila, kohde, liikutusNopeus){
    var suunta = 0.0;
    
    //if (maila.y > kohde.y){
    //    suunta = -1.0;
    //}
    //else{
    //    suunta = 1.0;
    //}
    suunta = (kohde.y - maila.y) / (korkeus * 0.01);
    suunta = Math.min(suunta, 1.0);
    suunta = Math.max(suunta, -1.0);
    maila.body.velocity.y = suunta * nopeus;
}


function paivitys() {
    game.physics.arcade.collide(pallo, maila1);
    game.physics.arcade.collide(pallo, maila2);
    
    
    tarkistaLiike(maila1, cursors.up, cursors.down);
    if(!tekoalyPaalla){
        tarkistaLiike(maila2, wButton, sButton);
    }
    else{
        kasitteleTekoaly(maila2, pallo, nopeus);
    }
    
    tarkistaOsoitin(game.input.mousePointer, leveys/2, korkeus/2, maila1, maila2, nopeus);
    tarkistaOsoitin(game.input.pointer1, leveys/2, korkeus/2, maila1, maila2, nopeus);
    tarkistaOsoitin(game.input.pointer2, leveys/2, korkeus/2, maila1, maila2, nopeus);
}