Väistelypeli

Ohjeet

Alkuvalmistelut

Kopioi aloituspohja (kankaan kokoa ja väriä voi muuttaa halutessaan:

Käytämme tehtävässä seuraavia funktioita kahden hahmon etäisyyden laskemiseen ja hahmon liikuttamiseen. Kopioi ne <script>-tagien väliin.

Määrittele piirtäjä-muuttuja piirtämistä varten:

Hahmojen muuttujat

Muistutuksena hahmo-olion ja sen sisältämät muuttujat luodaan näin:

Luo pelaaja, jolla on muuttujat X, Y ja pisteet. Lisäksi luo hiiri, joilla on vain X ja Y. Voit asettaa hahmojen X- ja Y-koordinaatit alussa miten haluat.

Hiiri-hahmon tarkoitus on olla siinä, missä hiiri on. JavaScriptissä emme voi selvittää milloin vain, missä hiiri on, vaan saamme tietää hiiren sijainnin vain, kun se liikkuu. Siirtämällä hiiri-hahmon kursorin päälle sen liikkuessa tiedämme aina, missä hiiri on. Käytä seuraavaa koodia:

Piirtosilmukka

Tee piirrä-funktiosta piirtosilmukka käyttäen requestAnimationFrame-funktiota:

Piirrä funktion sisällä pelaaja. Pelaajan koordinaatit ovat pelaaja.X ja pelaaja.Y. Voit piirtää joko neliön fillRect-komennolla tai kuvan drawImage-komennolla.

Hiiren kohdalle ei tarvitse piirtää mitään, näkyyhän siinä jo käyttöjärjestelmän oma kursori, mutta siihen voi halutessaan piirtää oman kuvan.

Piirrä myös teksti "Pisteet " + pelaaja.pisteet näkymän yläreunaan.

Kokeile nyt, toimiiko pelaajan piirtäminen. Pisteiden kohdalla pitäisi lukea tietysti 0.

Pelaajan liikuttaminen

Tee setInterval-silmukka hahmojen liikuttamista varten:

Lisää komento hahmon liikuttamista varten. Hahmoja liikutetaan alussa luodulla siirräKohti-funktiolla. Aluksi meidän tarvitsee vain siirtää pelaajaa kohti hiirtä: siirräKohti(pelaaja, hiiri, 1). Lopun 1 kertoo, millä nopeudella pelaaja liikkuu, ja voit muuttaa sitä halutessasi. Kokeile eri arvoja välillä 1–5.

Kokeile tässä vaiheessa, toimiiko peli ja hahmon liikuttaminen.

Vihollislista

Tallennamme viholliset listaan, johon voimme lisätä aina tarvittaessa lisää vihollisia. Tee uusi muuttuja vihollislistaa varten pelaaja- ja hiirihahmojen jälkeen:

Lista on alussa tyhjä. Siihen voi lisätä uuden vihollisen .push()-komennolla:

Voit kokeilun vuoksi lisätä yhden vihollisen listaan heti listan luomisen jälkeen.

Vihollisten piirtäminen

Piirrä viholliset piirtofunktiossa. Käytä for of -silmukkaa käydäksesi läpi kaikki viholliset. Käytä silmukan sisällä samanlaista komentoa kuin pelaajankin piirtämiseen (eri värillä/kuvalla). Silmukan sisällä vihollisen X ja Y ovat vihu.X ja vihu.Y.

Vihollisten liikuttaminen

Tee päivitysfunktion (missä pelaajaa liikutetaan) sisälle for of -silmukka, jossa käydään läpi kaikki viholliset. Voit siirtää vihollista pelaajaa kohti samalla tavalla kuin pelaajaa hiirtä kohti, eli siirräKohti-funktiolla. Pelistä tulee kiinnostavampi, jos viholliset eivät vain jahtaa pelaajaa, vaan myös liikkuvat vasemmalle samalla kuin esimerkissä. Tämän saa aikaan komennolla vihu.X -= 2. Kokeile taas eri nopeuksia sekä pelaajaa päin liikuttaessa että vasemmalle liikuttaessa.

Jos viholliset liikkuvat vasemmalle, ne törmäävät lopulta seinään ja ne on siirrettävä takaisin oikeaan reunaan. Tämän voi tehdä seuraavanlaisella ehtolauseella. Lisää se for of -silmukan sisälle.

Tarkista for of -silmukan sisällä myös, törmääkö pelaaja viholliseen. Tähän voi käyttää keräilypelistä tuttua ehtoa:

Tee ehtolauseen sisällä mitä haluat. Voit esimerkiksi asettaa pisteet nollaan ja poistaa viholliset pelistä komennolla viholliset.splice(0, viholliset.length).

Uusien vihollisten luominen

Luo uusi setInterval-silmukka uusien vihollisten luomista varten (aseta silmukan ajaksi esim. 5 000 ms). Käytä sen sisällä aiemmin mainittua komentoa, jolla voi lisätä vihollisen listaan. Vihollisen X:ksi kannattaa asettaa 900, joka on juuri kankaan ulkopuolella, jotta vihollinen ei ilmesty rumasti keskelle peliä.

Kasvata luomasi setInterval-silmukan sisällä pelaajan pisteitä. Pisteiden määrä on siis sama kuin vihollisten määrä kartalla.