Keräilypeli

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 tässä vaiheessa, toimiiko peli ja hahmon liikuttaminen.

Aarre

Luo uusi hahmo-olio aarre samaan tapaan kuin pelaaja ja hiiri on luotu. Aarteella on vain X ja Y. Voit asettaa koordinaatit aluksi miten haluat.

Aarteeseen koskettaminen

Käytämme alussa luotua etäisyys-funktiota tarkistaaksemme, miten lähellä olemme aarretta. Tee if-lause, jonka ehto on etäisyys(pelaaja, aarre) < 100:

if-lauseen sisällä kasvata pelaajan pisteitä (pelaaja.pisteet) yhdellä.

Haluamme arpoa aarteelle uuden sijainnin osuman jälkeen. Käytämme siihen Math.random()-funktiota:

Kokeile nyt peliä. Saatat huomata, että pistemäärä kasvaa joskus enemmällä kuin yhdellä. Tämä johtuu siitä, että joskus aarteen uusi sijainti koskettaa myös pelaajaa, ja tästä tulee ylimääräinen piste. Estääksemme tämän meidän on varmistettava, että uusi paikka ei kosketa pelaajaa. Tämä on helpointa tehdä while-silmukalla, joka arpoo sijainnin uudestaan, kunnes etäisyys on tarpeeksi suuri. Lisää silmukka sijainnin arpomisen ympärille:

Kokeile taas, toimiiko peli.

Vihollinen

Haluamme peliin vihollisen, joka jahtaa pelaajaa. Tätä varten tee uusi hahmo-olio nimeltä vihollinen, jolla on vain X ja Y. Niiden alkuarvot kannattaa asettaa mahdollisimmat kauas pelaajan alkukoordinaateista, jotta peli ei ole liian vaikea.

Lisää setInterval-silmukan sisään komento vihollisen liikuttamiseksi hahmoa päin: siirräKohti(vihollinen, pelaaja, 0.5). Nopeuden kannattaa olla pienempi kuin pelaajan nopeus, jotta viholliselta voi päästä karkuun. Kokeile peliä ja eri nopeuksia ja koeta valita hyvä nopeus.

Lopuksi tarkistetaan, osuuko vihollinen pelaajaan. Tehdään tätä varten samanlainen if-lause kuin aarteen osuman tarkistukseen, mutta tarkastetaankin pelaajan ja vihollisen välinen etäisyys. Ehtolauseen sisällä resetoi peli:

1. Aseta pelaajan X ja Y takaisin alkupisteeseen.
2. Aseta vihollisen X ja Y takaisin alkupisteseen.
3. Aseta pelaajan pisteet nollaan.

Voit asettaa pisteet myös johonkin muuhun arvoon. Ehkä tilanne ei olekaan täysi häviö, vaan pisteitä vain vähennetään jollain määrällä. Voit muuttaa pelilogiikan mieleiseksesi.