Viime viikolla piirsimme neliönmuotoisista paloista erilaisia kuviota. Pelkästään paikallaanolevien kuvioden piirtely on valitettavasti hieman tylsää. Tämän kurssinhan pitäisi olla peliohjelmointikurssi eikä piirtokurssi. Olisiko mahdollista saada edellisen viikon kuviosta aikaiseksi peli?
Neliöistä piirretyistä viivoista tulee auttamatta mieleen matopeli. Jos loisimme madon viime viikon viivojen tapaan, laittaisimme sen olemaan tietyn pituinen ja lisäisimme omenan, meillä melkein olisi jo pieni peli valmiina. Kuullostaa paremmalta! Lähdetään liikkeelle!
Tässä matopelissä uuden madon luonti on yksinkertaista. Se onnistuu asettamalla yksi madon palanen pelialueelle. Sen jälkeen mato alkaa itsestään kasvamaan, kunnes se saavuttaa oikean pituudensa. Madon pituus on tallennettu koko-muuttujaan.
Alla olevassa tehtäväpohjassa asetetaan yksi palanen pelialueelle. Mato alkaa kasvamaan suunta-muuttujan mukaiseen suuntaan kunnes siitä on tullut koko:n kokoinen.
Kuten viime viikon piirtotehtävissä, koordinaatisto alkaa pelialueen vasemmasta yläkulmasta. Pelialueella x-koordinaatti voi saada arvoja välillä 0..39 ja y-koordinaatti voi saada arvoja välillä 0..29. Jos esimerkiksi haluaisit lisätä madon osan pelialueen vasempaan yläkulmaan, se onnistuisi komennolla: luoMadonOsa(0, 0). Madon osan piirtäminen pelialueen oikeaan alakulmaan onnistuu komennolle luoMadonOsa(39, 29).
Matopelin tehtävät eivät automaattisesti kerro milloin tehtävä on oikein.
this.game.time.slowMotion:in arvoa. Saatko pelistä toimivan?
Jos haluamme matopelin on olevan jotekin järkevä, haluamme rajoittaa sen kokoa. Tehtäviemme mato kasvaa kunnes se on saavuttanut pituuden, joka löytyy muuttujasta: koko. Funktiossa create asetetaan koko-muuttujaan madon alkukoko. Madon alkukoko määrää miten isoksi mato alussa kasvaa.
koko-muuttujan arvo kasvaa. Tehtävässä on funktio kerranSekunnissa, jonka koodi ajetaan aina kerran sekunnissa. Nosta siellä muuttujan koko arvoa ja katso, mitä tapahtuu.
Toteutetaan seuraavaksi madon liikkumisen. Haluamme saada madon muuttamaan suuntaansa, kun pelaaja painaa nuolinäppäintä. Emme kuitenkaan halua mahdollistaa madolle mahdottomia käännöksiä, esim. jos mato on menossa oikealle, emme voi lähteä menemään vasemmalle.
x ja y arvoa samaan tapaan kuin tehtäväpohjassa olevissa esimerkeissä.
Haluasimme tunnistaa, kun mato saa syötyä omenan. Olemme luoneet törmäykset-tiedostoon metodin törmääOmenaan, joka kertoo onko mato törmännyt omenaan. Jos mato on törmännyt omenaan, pelistä poistetaan nykyinen omena, pelin pisteitä kasvatetaan ja luodaan uusi omena.
Pääsemme omenan x- ja y-koordinaatteihin käsiksi koodinpätkillä omena.x ja omena.y. Voimme käyttää omenaa suoraan näin, koska omena-muuttuja on määritelty create.js-tiedostossa kaiken mahdollisen ulkopuolella.
Funktiossa törmääOmenaan on madon pää otettu muuttujaan madonPää. Saamme madon pään x-koordinaatin komennolla madonPää.x ja y-koordinaatin komennolla madonPää.y.
Mato on syönyt omenan, kun madon pään ja omenan sekä x että y-koordinaatit ovat samoja.
xKoordinaatitOvatSamat ja yKoordinaatitOvatSamat tarkistukset ovatko muuttujien madonPää ja omena x- ja y-koordinaatit samat. Muista, että yhtäsuuruden tarkistus onnistuu ==-operaatiolla. Koordinaattehin pääsee käsiksi kirjoittamalla muuttuja.x tai muuttuja.y.
uusiOmena() luo uuden omenan ja asettaa sen muuttujaan omena. Alla olevassa tehtäväpohjassa luodaan pelin alussa yksi uusi omena. Kokeile lisätä useita uusia omenoita. Mikä ei toimi? Miksi näin käy? Millä tämän voisi korjata? (Ei tarvitse tehdä.)
Pelimme toimiin nyt hyvin, mutta haluamme sen myös loppuvan joskus. Toteutetaan seuraavaksi toiminnallisuus, jossa peli loppuu madon törmättyä seinään.
Tunnistaaksemme seinään törmäyksen meidän täytyy joka kierroksella tarkistaa, onko törmäys tapahtunut. Tarkastus on yksinkertaista tehdä tarkastamalla yrittääkö madon pää mennä pelialueen ulkopuolelle.
Törmäykset-tiedostossa olemme toteuttaneet metodin seiniintörmäysen varaalle. Metodi toimii eräänlaisena kysymyksenä: "Onko mato törmäännyt seinään". Jos törmäys on tapahtunut, metodi sanoo joo eli "return true". Jos törmäystä ei ole tapahtunut, metodi sanoo että ei ole tapahtunut eli: "return false". Eli käytännössä metodissa olevan if-ehdon toteutuessa todetaan törmäyksen tapahtuneen.
Olemme ottaneet madon pään talteen muuttujaaan madonPää. Saat madon pään nykyisen x-koordinaatin komennolla: madonPää.x ja y-koordinaatin komennolla madonPää.y.
Tunnistaaksemme madon menemisen pelialueeen ulkopuolelle, meidän täytyy tarkistaa erikseen onko se mennyt vasemman laidan yli, onko se mennyt oikean laidan yli, onko se mennyt ylälaidan yli ja onko se mennyt alalaidan yli. Tämä tapahtuu vertailemalla madon pään sijaintia pelialueen rajoihin.
Esimerkki: tarkistetaan onko mato mennyt pelialueen oikean laidan yli. Mennäkseen oikean laidan yli, madon täytyy kulkea vaakatasossa, joka on x-akselin suuntainen. Olemme siis kiinnostuneet tarkistelemaan miten suureksi miten pitkällä madon pää on x-akselin suhteen. Mato on mennyt oikean laidan yli, kun madon pää on mennyt enemmän oikealle kuin pelialueen raja. Koska oikealle mennessä x-akselin arvo kasvaa, haluamme tarkistaa onko nykyinen x-akslin arvo suurempi kuin pelin rajat. Tämä onnistuu koodissa lauseella var onMennytOikealtaYli = madonPää.x >= pelinLeveys. Tällä koodilla muuttujan onMennytOikealtaYli arvoksi tulee totta, jos mato on mennyt oikean laidan yli ja ei totta jos näin ei ole tapahtunut. Voimme käyttää tätä muttujaa myehemmin ehdon vertailussa.
Vastaavasti jos haluamme tarkistaa onko mato mennyt vasemmasta reunasta yli, huomaamme että haluamme tässäkin tarkastella x-akselin arvoa. Koska pelin vasen reuna alkaa nollasta ja vasemmalle mentäessä x-koordinaatin arvot pienenevät, haluamme tarkastella onko x-akselin arvo päässyt pienemmäksi kuin 0. Koodina tämä onnistuisi lausekkeella: var onMennytVasemmaltaYli = madonPää.x < 0
mennytAlhaaltayli ja mennytYlhäältäYli toimimaan samalla tavalla kuin muuttujat mennytYlhäältäYli ja mennytYlhäältäYli.
Pelin pitäisi myös loppua, kun mato törmää itseensä. Mato on törmännyt itseensä, silloin kun sen pää on osunut samoihin koordinaatteihin kun mikään sen osista. Tämä on kuitenkin hankalampaa kuin edelliset tarkistuksemme, sillä matopelin mato pidentyy pelin kuluessa ja emme voi tietää kuinka monta tarkastelua meidän täytyy tehdä.
Toistolauseet pelastavat meidät hankalasta tilanteesta. Voimme tehdä tarkistuksen jokaisessa taulukossa olevalla madon osalla viime viikolta tutulla while-toistorakenteella. Tässä vaiheessa aloitamme poikkeuksellisesti indeksoinnin ykkösestä, ohittaen madon pään.
var indeksi = 1
while(true) {
var nykyinenMadonOsa = mato[indeksi]
// Täällä voimme tehdä tarkistuksia madon osille käyttämällä nykyinenMadonOsa-muuttujaa
indeksi = indeksi + 1
if (indeksi >= lista.length) {
break
}
}
Koodi käy jokaisen madon osan peräkkäin läpi toistorakenteen sisällä. Tämä on siis ihanteellinen paikka tarkistaa onko madon pää törmännyt johonkin madon osaan. Pääsemme madon osiin toistolauseessa käsiksi osa-muuttujan kautta käsiksi.
onTörmännytItseensä tarkistus, onko mato törmännyt itseensä.
Olemme saaneet matopelin valmiiksi. Hienoa työtä! Alla on toimiva peli.
Voit tässä vaiheessa täyttää kurssipalautteen.