Verkkokilpailu: matalan latenssin peli BBC Micro: bitille: 10 vaihetta (kuvilla)

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

Tässä opetusohjelmassa selitän kuinka toteuttaa perusmoninpeli BBC micro: bit -laitteessa seuraavilla ominaisuuksilla:

• Yksinkertainen käyttöliittymä
• Pieni viive painikkeiden painamisen ja näytön päivitysten välillä
• Joustava osallistujamäärä
• Helppo pelin hallinta pääkaukosäätimellä ("root")

Peli on pohjimmiltaan politiikan simulaatio. Kaikki pelaajat aloittavat nimittämättä mihinkään joukkueeseen, paitsi kaksi pelaajaa. Toinen näistä pelaajista on A -tiimissä ja toinen B -tiimissä.

Pelin tavoite on, että jokainen pelaaja on joukkueessa useimpien pelaajien kanssa silloin, kun kaikki muuttuvat.

Yllä oleva kaavio havainnollistaa äärellisen tilan konetta, eli erittelyä tiloista, joissa laite voi olla, ja siirtymiä näiden tilojen välillä.

Tilaa voidaan ajatella nykyisenä tietojoukkona, joka kuvaa laitteen muistia sen käynnistyksen jälkeen. Näiden tietojen perusteella laite voi suorittaa tiettyjä toimintoja tai reagoida eri tavalla käyttäjän antamiin tietoihin.

Siirtyminen on looginen ehto, joka, jos se on totta, saa laitteen muuttamaan tilaa. Siirtyminen voi tapahtua tilasta toiseen tilaan. Tilassa voi olla useita siirtymiä.

Yllä oleva kaavio määrittää seuraavat tilat:

• Määrittämätön
• Kuuntele A.
• Kuuntele B.
• Joukkue A
• Joukkue B

Pelikoodia käyttävä laite voi olla missä tahansa näistä viidestä tilasta, mutta vain yksi kerrallaan ja vain nämä viisi.

Oletan läpi oppaan, että käytät Microsoftin MakeCode -editoria, joka löytyy osoitteesta:

Pelin täydellinen toteutus löytyy täältä:

makecode.microbit.org/_CvRMtheLbRR3 ("microbit-demo-user" on projektin nimi)

Ja pää ("root") verkko -ohjaimen toteutus löytyy täältä:

makecode.microbit.org/_1kKE6TRc9TgE ("microbit-demo-root" on projektin nimi)

Viittaan näihin esimerkkeihin koko opetusohjelmani aikana.

Vaihe 1: Suuria kuvansuunnittelun näkökohtia

Ennen kuin kirjoitamme mitään koodia, meidän on mietittävä, miltä haluamme lopputuotteemme näyttävän. toisin sanoen mitkä ovat sovelluksen vaatimukset? Mitä koodimme pitäisi kertoa laitteelle, kun se on valmis? Olen jakanut pääsovelluksen toiminnallisuuden kuuteen luokkaan, joista kutakin voidaan tarkastella eri suunnittelun näkökulmasta.

1. Haluamme hallita laitteen toimintaa sen nykyisen tilan perusteella
2. Haluamme laitteen reagoivan käyttäjän antamiin tietoihin
3. Saatamme haluta näyttää animaatioita ja grafiikkaa käyttämällä 5 x 5 LED -näyttöä
4. Haluamme alustaa data -arvot laitteen muistiin, kun laite käynnistyy
5. Haluamme lähettää dataa langattomasti laitteen radion avulla
6. Haluamme kuunnella ja vastaanottaa tietoja laitteen radion kautta ja käsitellä niitä sen mukaisesti

Sallikaa minun perehtyä hieman tarkemmin jokaiseen.

1. Haluamme ohjata laitteen toimintaa sen nykyisen tilan perusteella

Kuten useimmat muut ohjelmat, koodin määrittämät ohjeet suoritetaan rivi kerrallaan. Haluamme, että laitteemme suorittaa tiettyjä ohjeita sen sisäisen tilan perusteella, kuten tämän opetusohjelman yläosassa oleva kaavio havainnollistaa. Voisimme kirjoittaa sarjan ehtoja jokaisen koodilohkon jälkeen, joka tarkistaa laitteen pitäisi tehdä, mutta tämä lähestymistapa voi muuttua erittäin sotkuiseksi nopeasti, joten käytämme sen sijaan ääretöntä silmukkaa, joka yksinkertaisesti tarkistaa yhden muuttujan ja perustuu tähän muuttujaan, suorittaa tiettyjä ohjeita tai ei tee mitään. Tämä muuttuja tunnistetaan jälkiliitteellä "_state" sekä käyttäjä- että juurisovelluksessamme.

2. Haluamme laitteen reagoivan käyttäjän antamiin tietoihin

Huolimatta koodin normaalista suorittamisesta, joka tapahtuu peräkkäin, toisin sanoen yksi rivi kerrallaan, tarvitsemme laitteemme reagoimaan painikkeiden painamiseen, kun päätilasilmukka määrittää, mitä laitteen pitäisi tehdä milloin tahansa. Tätä tarkoitusta varten laitteella on kyky lähettää signaaleja alemman tason ohjelmistolle, joka on vuorovaikutuksessa laitteiston kanssa ja laukaisee tapahtuman. Voimme kirjoittaa koodin, joka käskee laitteen tekemään jotain, kun se havaitsee tietyn tyyppisen tapahtuman.

3. Haluamme näyttää animaatioita ja grafiikkaa käyttämällä 5 x 5 LED -näyttöä

Mekanismi tämän tekemiseksi näyttää olevan yksinkertainen, mutta lohkon näyttämä kuva lisää piilotetun 400 ms: n viiveen. Koska haluamme laitteemme jatkavan tilasilmukan suorittamista mahdollisimman pienellä viiveellä, meidän on muokattava javascript -koodia viiveen minimoimiseksi.

4. Haluamme alustaa data -arvot laitteen muistiin, kun laite käynnistyy

Ennen kuin laitteemme tekee mitään, sovelluksen on ladattava tiedot muistiin. Tämä sisältää vakio muuttujat, jotka on nimetty koodin luettavuuden vuoksi, muuttujat, jotka sisältävät kuvia, jotka voivat olla osa animaatiota, ja laskurimuuttujat, joiden on aloitettava nollasta toimiakseen oikein. Lopulta saamme pitkän luettelon muuttujien nimistä ja niiden uusista arvoista. Henkilökohtaisena tyylivalintana käytän ALL_CAPS -arvoa vakioarvoja, ts. Arvoja, joita minun ei tarvitse koskaan muuttaa. Liitän myös päämuuttujan tunnisteiden eteen luokan nimen, joka viittaa sellaiseen objektiin tai tyyppiin, johon tunniste kuuluu. Tällä pyritään helpottamaan koodin seuraamista. En koskaan käytä muuttujan nimeä, kuten "item" tai "x", koska koodi on tulkittava epäselvästi.

5. Haluamme lähettää tietoja langattomasti laitteen radion avulla

Tämä on itse asiassa melko yksinkertainen tehtävä käytettäessä MakeCode -lohkojen kieltä. Asetamme kaikki laitteet samaan radioryhmään käynnistyksen yhteydessä ja sitten kun haluamme lähettää signaalin, voimme välittää yhden numeron meille lähetetylle "Radio send number" -lohkolle. On tärkeää, että lähettäjä ja vastaanottaja työskentelevät samassa radioryhmässä, koska jos ei, he lähettävät tai vastaanottavat eri taajuuksilla ja viestintä epäonnistuu.

6. Haluamme kuunnella ja vastaanottaa dataa laitteen radion kautta ja käsitellä sitä sen mukaisesti

Ottaen huomioon samat näkökohdat kuin edellinen kohde, kuuntelemme saapuvia lähetyksiä samalla tavalla kuin käyttäjän syötteitä: tapahtumakäsittelijän avulla. Kirjoitamme koodilohkon, joka tutkii saapuvat signaalit ja tarkistaa, onko mitään toimenpiteitä suoritettava häiritsemättä päätilasilmukkaa.

Lisäksi meidän pitäisi lyhyesti harkita paljon yksinkertaisemman juurisovelluksen suunnittelua, joka mahdollistaa laitteen hallita koko verkkoa. En käytä paljon aikaa tähän, koska se on paljon yksinkertaisempi kuin yllä oleva malli ja suuri osa siitä on vain toistoa. Olen jakanut juurikasteen toiminnallisuuden kolmeen luokkaan.

1. Haluamme pystyä valitsemaan signaalin
2. Haluamme pystyä lähettämään signaalin

-

1. Haluamme pystyä valitsemaan signaalin

Tämä voidaan tehdä yksinkertaisesti painikkeella iteroimalla mahdolliset signaalit. Koska niitä on vain kolme, tämä lähestymistapa riittää. Samaan aikaan meillä voi olla silmukka, joka näyttää jatkuvasti valitun signaalin uudelleen, jolloin käyttäjä voi painaa painiketta ja nähdä valitun signaalin ilmestyvän LED -näyttöön hyvin pienellä viiveellä.

2. Haluamme pystyä lähettämään signaalin

Koska painikkeita on kaksi, voimme valita toisen valittavaksi ja toisen vahvistettavaksi. Kuten käyttäjäsovellus, lähetämme vain signaalin verkon kautta numerona. Muita tietoja ei vaadita.

Puhun lisää yksinkertaisesta signaaliprotokollasta seuraavassa osassa.

Vaihe 2: Signaaliprotokolla: yksinkertainen kieli verkkoviestintään

Seuraavia signaaleja voidaan ajatella joukkona kaikkia mahdollisia sanoja, joita laitteet voivat käyttää puhuakseen keskenään. Koska verkko on niin yksinkertainen, ei ole paljon sanottavaa, joten voimme esittää nämä kolme signaalia yksinkertaisilla kokonaislukuarvoilla.

0. Nollaa

• Tunniste koodissa: SIG-R
• Kokonaisluku: 0
• Tarkoitus: Kerro kaikille kantaman sisällä oleville laitteille, että he luopuvat tekemästään ja toimivat kuin ne olisi vain käynnistetty. Jos tämä signaali saavuttaa kaikki verkon laitteet, koko verkko nollataan ja käyttäjät voivat aloittaa uuden pelin. Tämän signaalin voi lähettää vain päälaite.

1. Muunnos A

• Tunniste koodissa: SIG-A
• Kokonaisluku: 1
• Tarkoitus: Kerro muunnossignaalin vastaanottamisen jälkeen kaikille laitteille, jotka ovat tilassa LISTEN_A, siirtymään tilaan TEAM_A.

2. Muunnos B

1. Tunniste koodissa: SIG-B
2. Kokonaisluku: 2
3. Tarkoitus: Kerro muunnossignaalin vastaanottamisen jälkeen kaikille laitteille, jotka ovat tilassa LISTEN_B, siirtymään tilaan TEAM_B.

Vaihe 3: Haluamme hallita laitteen toimintoja sen nykyisen tilan perusteella

Lopuksi voimme alkaa kirjoittaa koodia.

Avaa ensin uusi projekti Make Code -sovelluksessa

• Luo uusi toiminto. Soitin mine loopille, koska tämä on sovelluksen ydinsilmukka
• Lisää silmukkalohko, joka toistuu loputtomiin. Käytin aikaa (tosi), koska kirjaimellinen tosi ei koskaan ole väärä, joten sovelluksen ohjausvirta ei koskaan poistu silmukasta
• Lisää tarpeeksi if-else-lohkoja tarkistaaksesi, onko laite jossain viidestä mahdollisesta tilasta
• Luo muuttuja laitteen nykyisen tilan säilyttämiseksi
• Luo muuttujia edustamaan kutakin viidestä mahdollisesta tilasta

  Huomautus: On OK, että näille muuttujille ei ole vielä määritettyjä arvoja. Siihen päästään. Tässä vaiheessa on tärkeämpää kirjoittaa puhdas, helppolukuinen koodi

• Muuta if-else-lohkojen jokainen ehto vertaamaan nykyistä tilaa johonkin mahdolliseen tilaan
• Lisää if-else-lohkojen alaosaan tauko muutamalle millisekunnille ja luo muuttuja, joka pitää numeron. Alustamme sen myöhemmin. Varmista, että muuttujalla on kuvaava nimi, kuten rasti tai syke. Koska tämä on laitteen ydinsilmukka, tämä tauko määrittää nopeuden, jolla laite suorittaa pääsilmukan, joten se on erittäin tärkeä arvo ja liian tärkeä ollakseen maaginen numero ilman nimeä.

Huomautus: Älä huolehdi kolmannen kuvan harmaista lohkoista. Palaan niihin myöhemmin.

Vaihe 4: Haluamme reagoida käyttäjän syötteisiin

Nyt haluamme kertoa laitteelle, kuinka painikkeiden painalluksia käsitellään. Ensimmäinen ajatus voisi olla yksinkertaisesti käyttää "Kun painiketta painetaan" -lauseita syöttökategoriassa, mutta haluaisimme enemmän rakeista hallintaa. Käytämme "on event from (X) with value (Y)" -lohkoa hallintaluokasta Advanced -osiossa, koska olemme edistyneet tässä opetusohjelmassa.

• Luo neljä "tapahtumasta alkaen" -lohkoa.

  • Kahdesta näistä pitäisi tarkistaa tapahtuman lähde "MICROBIT_ID_BUTTON_A"
  • Kahdesta näistä pitäisi tarkistaa tapahtuman lähde "MICROBIT_ID_BUTTON_B"

  • Kaksi tapahtumaa, jotka kohdistavat jokaista painiketta:

    • Kannattaa tarkistaa tapahtuman tyyppi "MICROBIT_BUTTON_EVT_UP"
    • Kannattaa tarkistaa tapahtuman tyyppi "MICROBIT_BUTTON_EVT_DOWN"
  • Huomautus: Nämä vaihtoehdot isoilla kirjaimilla ovat tarroja, joita käytetään alemman tason mikro: bittikoodissa. Ne ovat yksinkertaisesti paikkamerkkejä, jotka korvataan myöhemmin kokonaisluvuilla, kun koodi käännetään suoritettavaan binaariin. Ihmisten on helpompi käyttää näitä tarroja kuin etsiä, mikä kokonaisluku laitetaan, vaikka molemmat toimisivat samalla tavalla.

• Valitsin tyylinä, että jokainen "on event from …" -lohko kutsuu funktion, joka kuvaa korotettua tapahtumaa. Vaikka se ei ole ehdottoman välttämätöntä, mielestäni tämä parantaa luettavuutta. Jos joku haluaa tehdä niin, he voivat laittaa tapahtumakäsittelykoodin "on event from …" -lohkoon.

  Huomautus: Koodilohkoa, joka käsittelee laitteen vastauksen tapahtumaan, kutsutaan intuitiivisesti "tapahtumakäsittelijäksi"

• Lisää kussakin tapahtumakäsittelijässä sama if-else-rakenne, jota käytetään ohjausvirran jakamiseen laitteen tilan perusteella, kuten päätilasilmukan rakenne.

• Lisää määrityslohkoja, jotka muuttavat laitteen tilaa tilakaavion mukaisesti

  • Tiedämme, että kun laite on tilassa UNASSIGNED, laitteen tulee reagoida painikkeeseen A, jota painetaan siirtymällä tilaan LISTEN_A, ja painikkeeseen B, jota painetaan siirtymällä tilaan LISTEN_B.
  • Tiedämme myös, että kun laite on tilassa LISTEN_A tai LISTEN_B, laitteen tulee reagoida painikkeeseen A vapautettu ja painike B vapautettu siirtymällä takaisin tilaan UNASSIGNED.

  • Lopuksi tiedämme, että kun laite on tilassa TEAM_A tai TEAM_B, laitteen tulee reagoida painettuun painikkeeseen A ja painettuna painikkeeseen B lähettämällä SIG_A ja lähettämällä SIG_B.

    Tässä vaiheessa ei ole tarpeen täyttää lähetyssignaalien tietoja. Tulemme siihen myöhemmin. Tärkeää on, että opastamme näitä toimintoja käyttämään kirjoittamaamme koodia antamalla tälle toimintolohkolle nimen, kuten broadcastSignalSIG_A, joka kuvaa mitä tässä vaiheessa pitäisi tehdä

Vaihe 5: Haluamme alustaa data -arvot laitteen muistiin, kun laite käynnistyy

Tässä vaiheessa olemme käyttäneet paljon muuttujia (tietojen nimet), mutta emme ole itse määrittäneet arvoja näille nimille. Haluamme, että laite lataa kaikkien näiden muuttujien arvot muistiin, kun se käynnistyy, joten sijoitamme näiden muuttujien alustuksen käynnistyslohkoon.

Nämä arvot on alustettava:

• Signaalivakiot signaaliprotokollan mukaisesti. Arvot PITÄÄ olla:

  • SIG_R = 0
  • SIG_A = 1
  • SIG_B = 2
  • Huomautus: Olen lisännyt nämä vakiot "EnumSignals" -merkinnällä merkiksi siitä, että nämä muuttujat käyttäytyvät ikään kuin ne olisivat osa luetteloitua tyyppiä nimeltä Signals. Nämä muuttujat voidaan toteuttaa muilla ohjelmointikielillä. Lueteltujen tyyppien määritelmä ja selitys ovat opetusohjelmani ulkopuolella. Googlettaa voi jos haluaa. Nämä etuliitteet ovat yksinkertaisesti tyylillisiä valintoja, eivätkä ne ole lainkaan välttämättömiä ohjelman asianmukaisen toiminnan kannalta.

• Tilavakioita, jotka voivat olla mielivaltaisia, kunhan niillä on arvo. Tein tyylivalinnan käyttääkseni yksinkertaisesti 0: sta nousevia kokonaislukuja, kuten näin:

  • UNASSIGNED = 0
  • LISTEN_A = 1
  • LISTEN_B = 2
  • TEAM_A = 3
  • TEAM_B = 4
  • Huomautus: Tein saman tyylipäätöksen myös näiden muuttujien etuliitteiden suhteen. Lisäksi mainitsen, että kaikki näissä tehtävissä, arvot ja järjestys, on täysin mielivaltaista. Ei ole edes väliä, että nämä arvot ovat yhdenmukaisia laitteesta toiseen, koska niitä käytetään vain sisäisesti eikä verkon kautta tapahtuvaan viestintään. Tärkeää on vain, että muuttujilla on arvo ja että niitä voidaan verrata toisiinsa nähdäkseen, ovatko ne vastaavia vai eivät.
• Luettavuuden vuoksi vakio nimeltä BOOT_STATE ja aseta se UNASSIGNED. Tämä tekee siitä, että palautamme käynnistystilaan mielivaltaisemman tilan sijaan, selkeämmin, kun laite vastaanottaa nollaussignaalin, jonka otamme käyttöön myöhemmin.

• Animaatiovakiot, joita käytetään seuraavassa vaiheessa animaatioiden luomiseen, jotka mahdollistavat erittäin pienen viiveen keskeytyksen käyttäjän syötteen kautta. Emme ole käyttäneet näitä toistaiseksi, mutta ne selitetään ja käytetään varmasti seuraavassa osassa. Joidenkin näiden merkitysten pitäisi olla intuitiivisia niiden nimien vuoksi.

  • TICKS_PER_FRAME_LOADING_ANIMATION = 50
  • MS_PER_DEVICE_TICK = 10
  • MS_PER_FRAME_BROADCAST_ANIMATION = 500
  • MICROSECONDS_PER_MILLISECOND = 1000
  • NUMBER_OF_FRAMES_IN_LOADING_ANIMATION = 4

• Toinen muuttuja animaatioon, tällä kertaa laskuri, joka ei todellakaan ole vakio. Kuten useimmat laskurit, alustamme sen arvoon 0

  iTickLoadingAnimation = 0

• Luo kaksi muuttujasarjaa animaatioiden kehysten pitämiseksi. Ensimmäisessä, jota kutsun "latausanimaatioksi", pitäisi olla neljä kuvaa (jonka olet saattanut arvata viimeisen jatkuvan alustuksen yhteydessä), ja toisessa, jota kutsun "lähetysanimaatioksi", jossa pitäisi olla kolme kuvaa. Suosittelen nimeämään muuttujat vastaamaan animaation kehyksiä, esim. ringAnimation0, ringAnimation1…

  Luo samat kuva -arvot kuin minä tai luo alkuperäisempiä ja viileämpiä kuvia

• Viimeisenä, mutta ei vähäisimpänä, meidän on asetettava laitteen radioryhmä 0 -arvoon käyttämällä "radioasetusryhmää (X)"
• Vaihtoehtoisesti kirjoita sarjalähtöön viesti "Alustus valmis" kertoaksesi käyttäjälle, että kaikki meni loistavasti.
• Nyt kun olemme määrittäneet laitteen, voimme kutsua tilasilmukkafunktiomme.

Vaihe 6: Haluamme näyttää animaatioita ja grafiikkaa 5 x 5 LED -näytön avulla

Ja nyt jotain aivan muuta.

Haluamme näyttää muutamia animaatioita ja muutamia merkkejä, mutta emme halua keskeyttää päätilasilmukkaa. Valitettavasti kuvien ja tekstimerkkijonojen näyttävien lohkojen viive on oletuksena 400 ms. Tätä ei voi muuttaa ilman koodin javascript -esityksen muokkaamista. Joten teemme tämän.

• Luo toiminto jokaiselle kuvalle. Tämä mahdollistaa yhden lohkon käyttämisen kuvan näyttämiseen sen sijaan, että muokkaat javascriptiä joka kerta. Tässä erityisessä ohjelmassa mitään kuvaa ei käytetä useammin kuin kerran, mutta uskon silti, että tämä tyyli helpottaa koodin lukemista.
• Lisää kussakin uudessa toiminnossa "näytä kuva (X) siirtymässä 0" -lohko ja vastaava kuvamuuttujan nimi korvaa (X)

• Lisää päätilasilmukassa. "Näytä merkkijono (X)" -lohkot jokaiselle lohkolle sen lisäksi, että se käsittelee tilaa UNASSIGNED. Lisää merkki näytettäväksi laitteen eri tilojen osoittamiseksi. Tässä on mitä tein:

  • LISTEN_A: "a"
  • LISTEN_B: 'b'
  • TEAM_A: 'A'

  • TEAM_B: 'B'

    Jos tila on UNASSIGNED, soita toimintoon, joka päivittää latausanimaation. Täytämme tämän toiminnon tiedot alla

• Vaihda javascript -tilaan.
• Löydä jokainen puhelu X.showImage (0): lle ja basic.showString (X): lle

• Muuta jokainen X.showImage (0, 0) tai basic.showString (X, 0)

  • Tämän lisäargumentin lisääminen asettaa toiminnon jälkeisen viiveen 0. Oletusarvoisesti tämä jätetään pois ja laite pysähtyy 400 ms: n kuluttua näiden lohkojen suorittamisesta.
  • Nyt meillä on lähes viiveetön mekanismi kuvien näyttämiseksi animaatiolohkoissamme, jotka voimme nyt rakentaa

Ensin rakennamme suhteellisen yksinkertaisen lähetysanimaatiotoiminnon. Se on yksinkertaisempaa, koska emme halua, että käyttäjä voi tehdä mitään ennen kuin toiminto on valmis, jotta estetään heitä lähettämästä roskapostia. Tämän saavuttamiseksi voimme yksinkertaisesti pitää ohjausvirran rajoitettuna lohkoon, kunnes toiminto on valmis, mikä on normaalia toimintaa.

• Luo toiminto, joka näyttää lähetysanimaation.
• Lisää lohkon sisälle kolme funktiokutsua, yksi kuhunkin animaation kehykseen, niiden näyttämisjärjestyksessä

• Lisää "odota (me) (X)" -lohko jokaisen puhelun jälkeen kuvanäyttötoimintoon.

  Huomautus: Tämä lohko edistyneestä ohjausosastosta menee jopa pidemmälle kuin "tauko (ms)", koska se jäädyttää suorittimen kokonaan, kunnes määritetty aika on kulunut. Kun taukolohkoa käytetään, on mahdollista, että laite suorittaa muita tehtäviä kulissien takana. Tämä on mahdotonta odotuslohkon kanssa

• Korvaa (X) (MS_PER_FRAME_BROADCAST_ANIMATION x MICROSECONDS_PER_MILLISECOND)
• Animaation pitäisi nyt toimia kunnolla

Toiseksi rakennamme mekanismin latausanimaation näyttämiseksi. Tämän ajatuksena on päivittää LED -näyttö tietyin väliajoin, jotka määritellään muuttujassa MS_PER_DEVICE_TICK. Tämä arvo, laitteen rastipituus, on millisekuntien määrä, jonka laite keskeyttää tilasilmukan jokaisen iteroinnin päätyttyä. Koska tämä arvo on tarpeeksi pieni, voimme päivittää näytön kerran jokaisen näytön silmukan iteraation aikana, ja käyttäjälle näyttää siltä, että animaatio etenee saumattomasti ja kun tila muuttuu, käyttäjän syöttämien tietojen välillä on hyvin vähän viiveitä. näyttöä päivitetään. Laskemalla punkit, jotka teemme iTickLoadingAnimation -muuttujan kanssa, voimme näyttää animaation sopivan kehyksen.

• Luo toiminto, joka päivittää latausanimaation

• Lisää ehto tarkistaaksesi, onko rastilaskuri saavuttanut maksimiarvonsa. Tämä ehto pitää paikkansa, jos rastilaskurin arvo on suurempi kuin latausanimaation kehysten lukumäärä kerrottuna kunkin kehyksen näyttämien punkkien määrällä

  Jos ehto on totta, palauta iTickLoadingAnimation arvoon 0

• Lisää if-else-ehtojen lohko. Nämä määrittävät, mikä animaation kehys näytetään.

  Jos kullekin animaation kehykselle rasti on pienempi kuin kunkin animaation punkkien määrä kerrottuna animaation kehysnumerolla (alkaen 1: stä), näytä sitten tämä kehys, tarkista, onko seuraava kehys tulee näkyviin

• Lauseen alaosassa lisää iTickLoadingAnimation
• Animaation pitäisi nyt toimia kunnolla

Huomautus: Kaikki esimerkissäni näkyvät harmaat lohkot syntyvät, kun muokataan lohkon javascript -esitystä. Se tarkoittaa yksinkertaisesti sitä, että lohko edustaa javascript -koodia, jota ei voida esittää käyttämällä vakiomuotoista lohkoa ja jota on muokattava tekstimuodossa.

Vaihe 7: Haluamme lähettää tietoja langattomasti laitteen radion avulla

Tämä vaihe on paljon lyhyempi kuin edellinen. Itse asiassa se on luultavasti lyhin vaihe koko opetusohjelmassa.

Muista, että kun ohjelmoimme laitteen vastauksen käyttäjän syötteeseen, kuvakaappauksessa oli kaksi lohkoa, joita ei selitetty tässä osiossa. Nämä olivat kutsuja toimintoihin, jotka lähettävät signaaleja radion kautta. Tarkemmin:

• On -painiketta A painettu:

  • Jos laite on tilassa TEAM_A:

    Lähetyssignaali SIG_A

• Painiketta B painettu:

  • Jos laite on tilassa TEAM_B

    Lähetyssignaali SIG_B

Luo nämä toiminnot, jos niitä ei ole jo olemassa.

Kussakin toiminnossa:

• Soita lähetyksen animaatiotoiminto. Tämä estää mitään muuta tapahtumasta, ennen kuin se on valmis, eli MS_PER_FRAME_BROADCAST_ANIMATION * 3 = 1,5 sekuntia. Vakio kerrotaan kolmella, koska animaatiossa on kolme kuvaa. Tämä on mielivaltaista ja lisää voidaan lisätä, jos esteettinen päivitys on riittävän hyvä. Tämän animaation toinen tarkoitus on estää käyttäjää lähettämästä roskapostia lähetystoimintoon.
• Lisää "radiolähetysnumeron (X)" lohko, jossa on toiminnon nimessä mainittu signaalivakio

Se on kaikki mitä tarvitsee lähettää radion kautta.

Vaihe 8: Haluamme kuunnella ja vastaanottaa tietoja laitteen radion kautta ja käsitellä sitä sen mukaisesti

Tämä on viimeinen vaihe pääsovelluksen luomiseen.

Kerromme laitteelle kuinka käsitellä saapuvia radiosignaaleja. Ensinnäkin laitteemme nimeää vastaanotetun signaalin. Sitten se päättää kyseisen signaalin arvon perusteella, mitä toimenpiteitä on suoritettava.

Ensimmäinen:

1. Luo koodilohko, joka alkaa "radiossa vastaanotettu (X)" -lohkosta.
2. Voit halutessasi määrittää vastaanotetun arvon toiselle muuttujalle, jolla on kuvaavampi nimi.
3. Soita toiminto, joka käsittelee signaalin

Toiseksi, signaalinkäsittelytoiminnossa:

1. Luo lohko if-else-lausekkeita, jotka haaraavat ohjausvirran signaalin arvon perusteella.

2. Jos signaali oli SIG_R

   Aseta laitteen tilaksi BOOT_STATE (siksi loimme tämän vakion aiemmin)

3. Jos signaali oli SIG_A ja jos nykyinen tila on LISTEN_A

   Aseta laitteen tilaksi TEAM_A

4. Jos signaali oli SIG_B ja jos nykyinen tila on LISTEN_B

   Aseta laitteen tilaksi TEAM_B

Se siitä. Sovellus on valmis.

Vaihe 9: Päälaite: Haluamme pystyä valitsemaan signaalin

Kirjoitamme nyt yksinkertaisen sovelluksen "root" -laitteelle, toisin sanoen laitteelle, joka ohjaa verkkoa.

Tämän laitteen on suoritettava kaksi toimintoa:

• Haluamme antaa käyttäjän valita yhden signaaleistamme
• Haluamme antaa käyttäjän lähettää signaalin

Koska tämän sovelluksen tekniset tiedot ovat edellisen osan osa, annan yleiskatsauksen, mutta en mene niin yksityiskohtaisesti kuin aiemmin. Yllä oleva kuva sisältää tämän sovelluksen koko koodin.

Voit antaa käyttäjän valita signaalin seuraavasti:

1. Alusta viisi muuttujaa käynnistyslohkossa:

   1. Kolme signaalia (0, 1, 2)
   2. Signaalien määrä (3)
   3. Muuttuja, joka pitää valitun signaalin (alun perin asetettu ensimmäiseen signaaliin, 0)

2. Paina A -painiketta:

   1. Suurenna valittua signaalia

   2. Tarkista, onko valittu signaali suurempi tai yhtä suuri kuin signaalien lukumäärä

      Jos näin on, aseta valittu signaali arvoon 0

3. Suorita käynnistyslohkon jälkeen "ikuisesti" -silmukka, joka näyttää valitun signaalin arvon viipymättä

Antaa käyttäjän lähettää signaalin

1. Aseta radioryhmä arvoon 0 käynnistyksen yhteydessä

2. Paina B -painiketta:

   Lähetä valittu signaali "radiolähetysnumeron (X)" lohkolla

Se siitä. Juurisolmun sovellus on erittäin yksinkertainen.

Vaihe 10: Olemme valmiit

Yllä on kuva sovellusta käyttävistä laitteista. Oikealla olevat kaksi käyttävät pääkäyttäjäsovellusta ja vasemmanpuoleinen root -sovellusta.

Esittelin tämän pelin CS Connections 2018 -tapahtumassa, joka on viikon mittainen tietotekniikan opetusta käsittelevä keski- ja lukio-opettaja. Annoin opettajille noin 40 laitetta ja selitin säännöt. Useimmat pitivät peliä viihdyttävänä, ja monien mielestä se oli hämmentävää, kunnes he keksivät, miten pelata. Esittely oli lyhyt, mutta havaitsimme pelin nautittavaksi varsin monipuolisen yleisön keskuudessa.

Lisätietoja CS Connections 2018 -ohjelmasta löytyy täältä.