Matopeli

Alkuvalmistelut

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

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

Madon pää

Aluksi teemme madon, jolla ei ole häntää ja joka ei kasva.

Määrittele mato-niminen olio, jossa on muuttujat X, Y ja suunta. X ja Y ovat alussa 100, ja suunta on alussa "oikea".

Piirtäminen

Tee piirrä-funktio requestAnimationFrame-komennon avulla:

Piirrä mato funktion sisällä piirtäjä.fillRect-komennolla. Käytä muuttujia mato.X ja mato.Y ja ilmoita madon kooksi 100x100 pikseliä. Valitse haluamasi väri madolle piirtäjä.fillStyle-komennolla.

Liikkuminen

Luo tapahtumakäsittelijä document.onkeydown suunnan muuttamista varten:

Käsittelijä suoritetaan aina, kun pelaaja painaa näppäintä. Painettu näppäin on muuttujassa event.key. Tee if-lause jokaista nuolinäppäintä varten, ja aseta mato.suunta alla olevan taulukon mukaan.

Näppäin	Suunta
"ArrowUp"	"ylös"
"ArrowDown"	"alas"
"ArrowLeft"	"vasen"
"ArrowRight"	"oikea"

Tee setInterval-silmukka madon liikuttamista varten. Aseta nopeudeksi 400.

Tee silmukan sisälle 4 if-lausetta jokaiselle suunnalle, joissa tarkistat onko mato.suunta kyseinen suunta ja jos on, muuta madon koordinaatteja niin, että mato liikkuu 100 pikseliä kyseiseen suuntaan.

Kokeile nyt, toimiiko madon pään liikuttaminen.

Madon häntä

Madon häntä on lista, joka sisältää hännän osa -olioita. Idea on, että se hännän osa, joka on lähinnä madon päätä, on listan alussa, ja vastaavasti kauimmainen osa listan lopussa. Kun madon päätä liikutetaan, listan alkuun lisätään uusi hännän osa pään ja vanhan hännän väliin. Samalla listan lopusta poistetaan yksi osa. Yksittäiset hännän osat eivät siis koskaan muutu, vaan niitä lisätään ja poistetaan.

Lisää mato-olioon muuttuja häntä, jonka arvo on alussa [] (eli tyhjä lista). Lisää myös muuttuja aikaaKasvamiseen, jonka arvo on alussa 5.

Lisääminen

Kun madon pää liikkuu, lisätään hännän osa siihen, missä pää oli aiemmin. Se onnistuu seuraavalla komennolla:

Lisää komento setInterval-silmukkaan ennen if-lauseita. Komento lisää hännän osan, jolla on sama X ja Y kuin madon päällä, eli hännän osa ja madon pää ovat samassa kohtaa. Heti seuraavaksi if-lauseet siirtävät päätä, jolloin hännän osa on siinä, missä pää oli äsken.

Piirtäminen

Hännän osien piirtämisen tarvitsemme for of -silmukkaa. Lisää sellainen piirtofunktioon madon pään piirtämisen jälkeen.

Silmukan sisällä oleva koodi toistetaan jokaiselle hännän osalle erikseen. Vuorossa olevan osan X ja Y ovat hännänOsa.X ja hännänOsa.Y. Piirrä silmukassa hännän osa näihin koordinaatteihin piirtäjä.fillRect-komennolla. Aseta kooksi 100x100 pikseliä. Voit käyttää piirtäjä.fillStyle-komentoa valitaksesi hännälle eri värin kuin päälle.

Kokeile nyt peliä. Koska hännän osia ei poisteta, hännän pitäisi kasvaa loputtomiin.

Poistaminen

Jotta mato kasvaisi, emme halua poistaa hännän osia aina. Tätä varten käytämme mato.aikaaKasvamiseen-muuttujaa laskurina. Kun se pääsee nollaan, jätämme hännän osan poistamatta, jolloin pituus kasvaa.

Lisää setInterval-silmukkaan komento, joka vähentää mato.aikaaKasvamiseen-muuttujan arvoa hännän osan lisäämisen jälkeen.

Lisää if-lause, joka tarkistaa, onko mato.aikaaKasvamiseen-muuttujan arvo nolla. Jos ei ole, poista viimeinen hännän osa alla olevalla komennolla. Jos on, aseta muuttujan arvoksi taas 5.

Nyt madon häntä kasvaa joka viides vuoro.

Törmääminen

Törmääminen häntään

Tarkista setInterval-silmukassa onko mato törmännyt itseensä. Tee tämä ihan lopussa madon pään liikuttamisen jälkeen. Käytä for of -silmukkaa, jonka sisällä on if-lause, jossa tarkistat, onko mato.X sama kuin hännänOsa.X ja mato.Y sama kuin hännänOsa.Y. Jos on, peli on hävitty!

Päätä mitä tapahtuu, kun peli hävitään. Pelin voi esim. aloittaa alusta poistamalla hännän (mato.häntä = []) tai pysäyttää kokonaan.

Törmääminen reunaan

Tarkista setInterval-silmukassa onko mato törmännyt seinään. Tee tämä katsomalla, onko joko mato.X tai mato.Y liian suuri (Y yli 600, X yli 800) tai pieni (alle 0). Myös tällöin peli on hävitty!