Tämänkertaisen tunnin aiheena opetella tekemään pieni peli ja hahmottamaan peleissä tarvittavia toimintamekanismeja.
| Oppiaine | tietotekniikka |
| Pituus | 90 minuuttia |
| Pedagoginen lähestymistapa | tekemällä oppiminen, teknologian avulla oppiminen |
| Kompetenssit | algoritmit, ohjelmointi, uudet teknologiat |
| Luokka-aste | 5.lk, 6.lk |
| Teknologiat | tabletti, älypuhelin, tietokone |
Muut tarvittavat materiaalit
Tietokone, verkkoyhteys ja mielellään Android-puhelin
Kuvaus
MoleMash-pelissä myyrä ponnahtaa satunnaisiin paikkoihin pelikentällä ja pelaaja saa pisteitä lyömällä myyrää ennen kuin se hyppää pois. Näissä ohjeissa kerrotaan, kuinka MoleMash rakennetaan esimerkkinä yksinkertaisesta pelistä, joka käyttää animaatiota.
Aluksi
Avaa App Inventor –sivusto ja aloita uusi projekti. Anna sille nimeksi “MoleMash” ja aseta myös näytön otsikoksi “MoleMash”. Avaa Blocks Editor ja muodosta yhteys puhelimeen.
Lataa myös tämä kuva myyrästä ja tallenna se tietokoneellesi.
Johdanto
Suunnitellaan peli aluksi niin, että myyrä liikkuu puolen sekunnin välein. Jos sitä kosketetaan, pisteet kasvavat yhdellä ja puhelin värisee. ”Reset” tai ”Uudelleenkäynnistys” -napin painaminen palauttaa tuloksen nollaksi.
Opittavat asiat:
- Sprite-kuvat
- Ajastimet ja Kello-komponentti
- Satunnaisluvut välillä 0 ja 1
- Tekstilohkot
Ensimmäiset tarvittavat asiat
Vedä komponentit vasemmasta reunasta puhelimen kuvan päälle
Canvas, joka nimetään “MyCanvas”. Tämä on alue, jolla myyrä liikkuu.
- Label, joka nimetään “ScoreLabel”, joka näyttää pisteet eli kuinka monta kertaa pelaaja on osunut myyrään.
- Button-painike nimeltä “ResetButton”.
- Sound-komponentti
Vedä nämä komponentit vasemmasta valikosta Vieweriin ja määritä niiden nimet. Aseta MyCanvas päällimmäiseksi ”top” ja aseta sen leveydeksi ja korkeudeksi 300 pikseliä (width & height). Aseta ScoreLabel-tekstin arvoksi “Pisteet: —“. Aseta ResetButton-napin tekstin asetukseksi “Reset”. Lisää myös äänikomponentti.
Ajastimet ja Kello-komponentti
Myyrän pitää vaihtaa paikkaa ajoittain, ja teet tämän Clock (kello) -komponentin avulla. Kello-komponentti tarjoaa erilaisia ajankäyttöön liittyviä toimintoja, kuten päivämäärän kertomisen. Tässä käytät komponenttia ajastimena, joka antaa signaalin tietyin väliajoin. Ampumaväli määräytyy Kellon TimerInterval-ominaisuuden avulla. Nimeä se “MoleTimer”. Aseta TimeInterval-arvoksi 500 millisekuntia, jotta myyrä liikkuu puolen sekunnin välein. Varmista, että TimerEnabled on valittu.
Liikkuvan myyrän lisäämiseen käytämme sprite-toimintoa.
Spritet ovat kuvia, jotka voivat liikkua näytöllä Canvas-alueella. Jokaisella spritellä on nopeus ja suunta sekä aikaväli, joka määrittää kuinka usein spriteä liikutetaan määrätyllä nopeudella. Sprite voi myös havaita, kun niitä kosketetaan. MoleMashissa myyrän nopeus on nolla, joten se ei liiku itsestään. Sen sijaan asetat myyrälle uuden sijainnin aina, kun ajastin antaa signaalin. Vedä ImageSprite-komponentti Vieweriin. Löydät tämän komponentin vasemmasta reunasta Drawing and Animation -luokasta. Sijoita se MyCanvas-alueelle. Aseta nämä ominaisuudet ”Mole” spritelle:
- Picture: Käytä mole.png-tiedostoa, jonka latasit tietokoneellesi tämän opetusohjelman alussa.
- Enabled: valittu
- Interval: 500 (Välillä ei ole merkitystä tässä, koska myyrän nopeus on nolla: se ei liiku itsestään.)
- Heading: 0 Suunnalla ei ole merkitystä tässäkin, koska nopeus on 0.
- Speed: 0.0
- Visible: valittu
- Width: Automaattinen
- Height: Automaattinen
- X- ja Y-koordinaateissa pitäisi olla jo jotain, sillä ne määritettiin sen mukaan, mihin sijoitit myyrän, kun vedit sen MyCanvasiin. Voit vetää myyrän johonkin toiseenkin paikkaan. Jos puhelin on jo yhdistetty, myyrän pitäisi liikkua myös puhelimen ruudulla, kun vedät sitä Designerissa.
Olet nyt määrittänyt kaikki komponentit. Designer-ikkunan tulisi näyttää tältä. Huomaa, kuinka ”Mole” on sisennetty MyCanvas-osan komponenttirakenteiden luettelossa, mikä osoittaa, että sprite on Canvasin alikomponentti.
Komponenttikäyttäytyminen ja tapahtumankäsittelijät
Nyt määritetään komponentin käyttäytyminen. Tämä tehdään procedure-toiminnon avulla. Proseduuri on lausejoukko, johon voit viitata kerralla yhtenä komentona. Jos sinulla on käsky, jota sinun on käytettävä useammin kuin kerran ohjelmassa, voit määrittää sen proseduuriksi, eikä sinun tarvitse toistaa sarjaa joka kerta, kun käytät sitä. App Inventorin proseduurit voivat ottaa vastaan ja palauttaa arvoja, mutta niitä ei tässä harjoituksessa tarvita.
Proseduurien määritteleminen
Määritä kaksi menettelyä:
- MoveMole siirtää Mole-spriten uuteen satunnaiseen paikkaan pelikentällä eli Canvasilla.
- UpdateScore päivittää pisteet muuttamalla ScoreLabel-tekstiä
Aloitetaan MoveMolella:
Avaa Blocks-editorissa Built in -kohdassa Procedures -kansio. Vedä to Procedure -lohko ja vaihda nimi “procedure” muotoon “MoveMole”.
Huomaa: On olemassa kaksi samanlaista lohkoa: to procedure do ja to procedure result. Tässä käytetään to procedure do.
MoveMole-lohkossa on kohta, jonka nimi on “do”. Sinne laitetaan koodilohkot. Tässä tapauksessa on kaksi lausetta: yksi myyrän x-koordinaatin ja toinen y-koordinaatin asettamiseksi. Kummassakin tapauksessa asetat sijainnin satunnaisluvuksi välille 0 ja 1, kankaan koon ja myyrän koon välisestä erotuksesta. Luot kyseisen arvon käyttämällä satunnaisluvun ja kertolaskujen ja vähennysten lohkoja. Löydät nämä Math-laatikosta.
Rakenna MoveMole-proseduuri. Valmiiden määritelmien tulisi näyttää tältä
Kun MoveMole on valmis, seuraava vaihe on määritellä muuttuja nimeltä ”pisteet” tai ”score” pisteiden lukumäärän (osumien lukumäärä) arvon säilyttämiseksi. Sille annetaan alkuarvo 0. Määritä myös proseduuri UpdateScore, joka näyttää pisteet ScoreLabelissa. Todellinen ScoreLabelissa näytettävä sisältö on “Score:” -teksti, joka on liitetty pisteiden arvoon.
Luo label ”Score:” tai “Pisteet:” vetämällä tekstilohko Text -kansiosta. Muuta lohkon nimeksi “Pisteet:” tai ”score”.
Liitä tämä ”join” -lohkoon, joka antaa pistemuuttujan arvon. Löydät liitoslohkon Tekstilaatikosta.
Tuloksen pitäisi näyttää tältä:
Lisää ajastin
Seuraava askel on saada myyrä liikkumaan. Tässä käytetään MoleTimeria. Kellokomponenteilla on tapahtumankäsittelijä, kun sitä kutsutaan ajastimella, joka antaa signaalin toistuvasti TimerIntervalin määrittämällä nopeudella.
Määritä MoleTimer kutsumaan MoveMole –proseduuria joka kerta, kun ajastin lähettää signaalin, rakentamalla tapahtumankäsittelijä näin:
Huomaa, kuinka myyrä alkaa liikkua puhelimessa heti, kun määrität tapahtumankäsittelijän. Tämä on esimerkki siitä, miten App Inventorin asiat alkavat tapahtua heti, kun määrität ne.
Lisää Mole Touch Handler, eli koskettamiseen reagointi
Ohjelman tulisi kasvattaa pistemäärää joka kerta, kun myyrää kosketetaan. Spritet, kuten Canvas-komponentitkin, reagoivat kosketustapahtumiin. Luo siis kosketustapahtumankäsittelijä Molelle, joka:
- Lisää pistemäärää
- Kutsuu UpdateScorea näyttämään uuden tuloksen
- Panee puhelimen värisemään 1/10 sekunniksi (100 millisekuntia)
- Kutsuu MoveMolea niin, että myyrä liikkuu heti osumasta, eikä odota ajastinta.
Pisteiden nollaaminen
Viimeinen yksityiskohta on pisteiden nollaaminen. Tämä tapahtuu yksinkertaisesti niin, että ResetButton muuttaa pisteet 0: ksi ja kutsuu UpdateScore-proseduuria.
Valmis ohjelma
Tässä on täydellinen MoleMash-ohjelma
Muunnelmat
Kun saat pelin toimimaan, sitä voi muokata lisäämällä siihen ominaisuuksia, vaihtamalla myyrän kuva joksikin toiseksi kuvaksi tai vaihtamalla myyrän nopeutta. Esimerkiksi:
- Laita peli vaihtamaan myyrän nopeutta pistemäärän mukaan. Myyrän liikkumisnopeutta vaihtaaksesi, sinun täytyy muokata MoleTimerin interval -ominaisuutta
- Lisää pistemäärän yhteyteen myös lukema epäonnistumisista ja laske osumaprosentti.
Arviointi
Jos kaikki saavat pelin ajoissa valmiiksi, voi pelejä antaa kokeiltavaksi perheille ja kavereille, jotka voivat antaa oman arvionsa. Tällä tavoin oppilaat saavat todennäköisesti ihmetteleviä kehuja vertaisiltaan ja vanhemmiltaan. Ulkopuolisille Android-ohjelmointi vaikuttaa miltei taikuudelta.
Muuta
Peli on alunperin julkaistu osoitteessa App inventor -verkkosivulla. Sivulla on useita saman tyyppisiä projekteja. Pelin ohjelmointi tapahtuu myös sivun kautta, tarvitset kirjautumiseen Google-tunnnukset. Jos sinulla on käytössäsi Android-puhelin, voit käyttää sitä ohjelman esikatseluun ja asentaa valmiin pelin sille.