JavaScript Pong

Tutoriaalin lopuksi saat seuraavan näköisen pelin aikaiseksi . Vasen pelaaja pelaa W (ylös) ja S-painikkeilla ja oikea pelaaja nuoli ylös/alas -painikkeilla.

Lataa .zip-tiedosto koneelle. Pura kansion sisältö omaan kansioosi.

Saat pelin näkyviin avaamalla index.html-tiedoston selaimessa. Peliin liittyvä koodi löytyy pong.js-tiedostosta. Avaa kyseinen tiedosto Notepad++-ohjelmalla.

Aina kun teet muutoksia pong-tiedostoon, voit katsoa mitä tapahtui päivittämällä välilehden selaimessa painamalla F5-näppäimellä.

Perusrakenne

Tiedoston ensimmäinen rivi näyttää seuraavalta:

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

Rivillä luodaan uusi Phaser-peli, jonka koko on leveyssuunnassa 800 pikseliä ja korkeussuunnassa 600 pikseliä. Kolmas parametri on piirtomuoto. Tällä päätetään, käyttääkö Phaser Canvas-oliota piirtoon vai WebGL:ää. AUTO-kelpaa tässä tilanteessa. Neljäs parametri on pelin nimi. Siihen voit lisätä 'pong'. Viimeinen, aaltosuluilla merkitty parametri kertoo Phaserin aliohjelmien nimet koodin puolella.

Phaser-pelissä on oletuksena 3 erilaista metodia: preload, create ja update. Voit liittää nämä aliohjelmat vapaasti nimeämisiin aliohjelmiin koodissa. Esimerkkipohjassa on lataus, luonti ja paivitys-aliohjelmat valmiina.

• Lataus-aliohjelmassa ladataan kuvat peliä varten.
• Luonti-aliohjelmassa voidaan määritellä pelin alkuun liittyviä asioita, jotka vaikuttavat pelin kulkuun. Tämä vastaa Jypelin Begin-aliohjelmaa, missä yleensä määritellään suurin osa pelin sisällöstä.
• Paivitys-aliohjelmassa tapahtuu pelin päivittäminen. Täällä voidaan tehdä esimerkiksi näppäinkuuntelijoiden tarkistamista.

Taustan muuttaminen

Aloitetaan pohjan muokkaaminen sillä, että vaihdetaan pelin taustaväri mustaksi. Voit laittaa haluamasi värin myös.

Etsi seuraavanlainen rivi, jossa laitetaan sininen tausta peliin:

game.stage.backgroundColor = "#3399ff";

Vaihda värin kohdalle teksti "#000000", niin tausta muuttuu mustaksi. Voit käyttää apuna esimerkiksi W3Schoolin värin valitsinta sopivan värin etsimiseen.

Tallenna tiedosto ja päivitä selaimessa välilehteä painamalla F5-näppäintä.

Pallon lisääminen peliin

Phaserissa kaikilla peliolioilla on oltava kuva. Voimme luoda yksinkertaisella koodilla kuvia ilman erillistä lataamista. Näiden koodaamisen välttämiseksi peruspakettiin on lisätty tiedosto apufunktiot.js, jota voidaan käyttää suoraan pong.js tiedostossa.

luoKuva-aliohjelmaa voidaan käyttää uusien kuvien luomiseen apuna kutsumalla sitä antamalla haluttu leveys, korkeus ja väri hexamuodossa. Vaihtoehtoisesti pallojen luontiin on luoPallonKuva-aliohjelma, jota voidaan kutsua säteellä ja värillä.

Lisää taustavärin vaihtamisrivin jälkeen seuraavanlaiset rivit:

var kuva = luoKuva(64,64, "#FFFFFF");
var pallo = game.add.sprite(0,0, kuva);

Tallenna tiedosto ja päivitä välilehti.

Pelin pitäisi näyttää nyt seuraavan näköiseltä:

Rivillä var pallo = game.add.sprite(0,0, kuva); luodaan uusi peliolio, joka tulee koordinaatteihin 0, 0 peliin ja se käyttää äskön tehtyä aliohjelmaa apuna kuvan luomiseen.

Muutetaan vielä neliö palloksi.

Etsi rivi, joka näyttää tältä

var kuva = luoKuva(64,64, "#FFFFFF");

ja vaihda se muotoon

var kuva = luoPallonKuva(32,"#FFFFFF");

Koodin pitäisi näyttää nyt tältä:

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

function lataus() {
}

function luonti() {
    game.stage.backgroundColor = "#000000";
	
    var kuva = luoPallonKuva(32,"#FFFFFF");
    var pallo = game.add.sprite(0,0, kuva);
	
}

function paivitys() {
}

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