Osa 7

Oliot, piirtosilmukka ja päivityssilmukka

Nyt tutustumme funktioiden käyttämiseen pelien teossa. Useimmissa peleissä on kaksi tärkeää funktiota: piirtosilmukka ja päivityssilmukka. Nämä molemmat ovat ikuisia silmukoita: piirtosilmukka piirtää ikuisesti uudestaan näytöllä näkyvät asiat ja päivityssilmukka päivittää tietokoneen muistia. Ne ovat hieman erilaisia, koska ne suoritetaan vähän eri aikoihin.

Oliot

Ennen kuin voimme tutustua silmukoihin, tutustutaan siihen miten tietokoneen muisti toimii (muuten emme osaisi päivittää muistia päivityssilmukassa). JavaScriptissä muisti koostuu olioista. Kaikki arvot ovat olioita: luvut, merkkijonot, jopa funktiot. Yleensä sanalla olio kuitenkin viitataan avain-arvopareja sisältäviin olioihin. Näitä käytetään esimerkiksi pelihahmojen kuvaamiseen. Alla on esimerkki.

Yllä luomme muuttujan hahmo, joka on nimi oliolle, jonka luomme. Itse oliota merkitään aaltosuluilla ({ ja }). Sulkujen välissä on avain-arvopareja, joista jokaisessa on aluksi avain (X, Y, väri) ja sitten arvo (200, 100, “green”). On tärkeää muistaa kaksoispisteet ja pilkut oikeissa kohdissa.

Olio on siis tietopaketti, johon on tallennettu useita eri tietoja. Voimme käyttää näitä tietoja pisteoperaattorilla, joka vastaa suomen kielen genetiiviä. Esimerkiksi jos haluamme puhua hahmon väristä, sanomme hahmo.väri.

Oliota voi muokata. Tällöin käytämme sekä pisteoperaattoria että yhtäsuuruusoperaattoria. Alla on esimerkki, jossa asetamme hahmon väriksi punaisen.

Huomaa, että oliota luotaessa avaimen ja arvon välissä on kaksoispiste. Olemassa olevaa oliota muokatessa avaimen ja arvon välissä on yhtäsuuruusmerkki.

TODO: Tehtävä, jossa luodaan hahmo-olio ja piirretään se kankaalle. Toinen, jossa muokataan hahmo-oliota ja piirretään se kankaalle

Piirtosilmukka

Piirtosilmukka on funktio, joka suoritetaan aina, kun selain haluaa piirtää näytöllä näkyvät asiat uudestaan. Sitä käytetään pelissä hahmojen piirtämiseen näytölle. Yleensä funktion sisällä tehdään ainakin kaksi asiaa: tyhjennetään ruutu vanhoista asioista ja piirretään uudet asiat.

Alla on esimerkki silmukasta, jolla voimme piirtää hahmon näytölle neliönä.

Pohjimmiltaan piirtosilmukka on nimetty funktio. Käytämme requestAnimationFrame-komentoa kertoaksemme selaimelle, että haluamme käyttää piirrä-funktiota piirtääksemme asioita näytölle. Selain suorittaa funktion silloin, kun on sen mielestä sopiva hetki. Komento on koodissa kahdesti. Se suoritetaan ensimmäisen kerran viimeisellä rivillä heti funktion luomisen jälkeen. (Itse funktion koodia ei suoriteta ennen kuin selain niin päättää.) Lisäksi se suoritetaan aina funktion suorittamisen jälkeen. Näin funktiota suoritetaan ikuisesti: aina suorittamisen jälkeen pyydämme selainta suorittamaan sen uudestaan.

Päivityssilmukka

Päivityssilmukka on funktio, jossa päivitämme ohjelman muistissa olevia asioita, kuten hahmojen sijainteja ja pistemäärää.

Piirtosilmukka suoritetaan siis silloin, kun selain itse haluaa. Selain päättää niin sanotun FPS:n (kuinka monta kertaa näyttö päivitetään sekunnissa) itse. Päivityssilmukka taas suoritetaan yleensä tietyin väliajoin, jotta asiat tapahtuvat pelissä jatkuvasti yhtä nopeasti. Käytämme tähän jo aiemmin mainittua setInterval-komentoa.

Alla on esimerkki päivityssilmukasta, joka siirtää hahmoa eteenpäin kasvattamalla X-koordinaattia. Silmukka suoritetaan 0,1 sekunnin välein.

Esimerkit yhdistettynä:

TODO: Tehtävä: Laatikon liikuttaminen nuolinäppäimillä TODO: Tehtävä/projekti: Kilpa-ajo, jossa yksi laatikko liikkuu kun nappia painetaan ja toinen liikkuu hitaasti itsestään. Kumpi pääsee toiseen reunaan ensin? ## Kysymyksiä