introduksjonshefte til micro:bit · sdiodene på forsiden kortet. ordet ”grafikk” er kanskje et...

Introduksjonshefte til micro:bit

Lag et romskip-spill på 90-minutter mens du lærer å bruke komponentene og sensorene på micro:bit via visuell dra-og-slipp programmering

Joachim Haagen Skeie

©2017-2018 Kodegenet AS, Joachim Haagen Skeie

For ytterligere informasjon og bestilling av denne og andre bøker fra Kodegenet, venn-ligst besøk Kodegenets nettsider på: kodegenet.no. Spørsmål, tilbakemeldinger eller andre henvendelser kan sendes via epost til [email protected].

Layout og design: Joachim Haagen Skeie og Thomas Orveland/LOUD AND CLEAR AS

Papir omslag: 200gPapir innmat: 100g

ISBN (trykket bok): 978-82-93577-00-3ISBN (e-bok): 978-82-93577-01-02. opplag 2018

Kodegenet ASCecilie Thoresensvei 9, 1153 Oslo, [email protected]

3Introduksjonshefte til micro:bit

Del 1Introduksjon til micro:bit

Dette heftet, som er del 1 av boken micro:bit fra scratch, er en første introduksjon til micro:bit og inneholder fire kapitler. Vi starter med å lage en svært enkel animasjon på skjermen til micro:bit, før vi steg-for-steg går gjennom hvordan man kan bygge opp et enkelt romskip-spill ved å bruke de innebygde sensorene og lysdiode-skjermen på forsiden av micro:bit.

Mot slutten av heftet har vi laget et komplett romskipspill som vi kan styre ved å vippe micro:bit fra side til side for å unngå fallende asteroider.

Underveis blir vi kjent med dra-og-slipp verktøyet MakeCode til micro:bit og vi lærer noen av de grunnleggende konseptene som ligger til grunn for all programmering underveis.


Innhold

Hva er micro:bit og hvordan programmeres den? 6

1.1 Hva er BBC micro:bit og hvordan programmeres den? 6

1.2 Hvordan programmeres micro:bit? 8

Romfergen tar av 10

2.1 Tegne romfergen på micro:bit skjermen 11

2.2 Få raketten til å lette 16

2.4 Få micro:bit til å telle ned før raketten letter 20

Bevege romskipet sammen med micro:bit 23

3.1 Tegne romskipet med en lag bilde-kloss 24

3.2 Flytte på romskipet når vi vipper på micro:bit 28

Legge til fallende asteoider 33

4.1 Få asteroiden til å falle nedover skjermen 34

4.2 Romskipet kolliderer med asteroiden 38

Veien videre 43

micro:bit fra scratch 43

6

1 Hva er micro:bit og hvordan programmeres den?

I dette kapittelet• Lær hva en micro:bit er• Lær hvilke programmeringsverktøy som kan brukes• Lær hvilke komponenter og sensorer micro:bit har innebygget

1.1 Hva er BBC micro:bit og hvordan programmeres den?

Micro:bit er en liten mikrokontroller som inneholder en rekke innebygde sen-sorer, knapper og LED lamper. Micro:bit programmeres via datamaskinens USB inngang og nettleseren, eller via Bluetooth via nettbrett. I samarbeid med indus-trien utviker The micro:bit Foundation programvare for å programmere micro:bit ved hjelp av forskjellige programmeringsspråk. Dermed kan micro:bit program-meres med blant annet visuell dra-og-slipp kloss-basert programmering eller tekstbaserte språk som JavaScript og Python.


I denne boken skal vi holde oss til dra-og-slipp programmering via MakeCode editoren. Denne er oversatt til Norsk.

For å komme i gang med å programmere micro:bit trenger vi kun en micro:bit, en USB kabel og en datamaskin med nettleser eller et nettbrett.

På forsiden av micro:bit sitter det 25 programmerbare LED lamper, samt to tryk-knapper.

Figur 1.1 – Forsiden til micro:bit

På baksiden av micro:bit sitter prosessoren, Bluetooth moduken og antennen, sensorene, samt USB og batteri inngangene. I tillegg har micro:bit et sett med tilkoblingspunkter (pinner) langs den nederste kanten. Her finner vi en 20-pins kant-tilkobling som kan benyttes dersom vi ønsker å koble micro:bit til andre elektriske kretser. Da kan vi enten styre komponenter som lamper, motorer og brytere eller lese data fra andre sensorer enn de micro:bit har innebygget.

8

Figur 1.2 – Baksiden av micro:bit

1.2 Hvordan programmeres micro:bit?

Når micro:bit kobles til en datamaskin blir den tilgjengelig som en helt vanlig USB minnebrikke. Her finner vi to filer, en DETAILS.TXT fil som inneholder litt informasjon om micro:biten, samt en MICROBIT.HTM fil som vi kan åpne i net-tleseren.

Micro:bit fungerer som en mikrokontroller. Det betyr at vi må laste opp ferdig kompilerte programmer til den for at den skal fungere som vi forventer. Pro-grammene som vi ønsker å laste over blir kompilert til .HEX filer som deretter kan lastes opp til micro:bit ved at man drar og slipper filen inn til micro:bit USB-disken.

Det høres kanskje komplisert ut, men heldigvis kan vi bruke de nettbaserte verk-tøyene for å gjøre denne jobben for oss. Når vi er fornøyd med det vi har pro-grammert, kan vi enkelt og greit få nettsiden til å generere .HEX filen som vi deretter kan lagre til USB-disken for å kjøre programmet på micro:bit.

Når vi laster nettsiden til MakeCode, makecode.microbit.org, får vi opp et brukergrensesnitt som er inndelt i fem områder, hvor klosslisten, skriptområdet


og demonstrasjonsområdet tar mesteparten av nettsiden.

Figur 1.3 - Slik ser MakeCode ut

MakeCode er inndelt i 5 områder:

• Knapperad – Dette området befinner seg øverst på nettsiden. Her kan vi lage nye eller importere tidligere prosjekter, velge mellom dra-og-slipp programmering eller tekstbasert JavaScript programmering, samt hente opp hjelpe-menyen eller endre på innstillingene.

• Klosslisten – Her finner vi alle klossene vi kan bruke for å program-mere i dra-og-slipp modus. Klossene er delt inn i fargekodede overskrifter for å gjøre det enklere å finne igjen klossene

• Skriptområdet – Her trekker vi og slipper klosser fra klosslisten for å lage programmet vårt.

• Demonstrasjonsområdet – Her forsøker MakeCode å vise hva vi kan forvente å se på micro:bit etter at vi har lastet opp programmet vi har kodet

• Nedlastingsområdet – Nederst på nettsiden kan vi laste ned .HEX filen som vi skal kopiere til micro:bit for å kjøre programmet vårt.

Nå har vi lært lite grann om hva micro:bit er, samtidig som vi har lært litt om hvordan MakeCode fungerer. Da er det på tide å programmere vårt aller første program, Romfergen tar av.

10

2 Romfergen tar av

I dette kapittelet• Lær å bruke MakeCode editoren for å laste opp programmer til micro:bit • Tegn et romskip som vi viser på skjermen til micro:bit• Utvide programmet slik at romfergen kan lette fra bakken og fly oppover• Utvide programmet slik at det kun starter når vi trykker på A-knappen til venstre for skjermen

Vi skal starte med å programmere micro:bit slik at den lager lysgrafikk med ly-sdiodene på forsiden kortet. Ordet ”grafikk” er kanskje et ord du ikke har hørt før, så du lurer kanskje på hva det betyr. Kort fortalt er grafikk ”alt som er tegnet eller skrevet”, og med lysgrafikk mener vi her det vi kan ”tegne” på skjermen til micro:bit ved hjelp av de 5 radene og 5 kolonnene med lamper på forsiden av kortet.


2.1 Tegne romfergen på micro:bit skjermen

I løpet av kapittel 2 skal vi bruke følgende klosser

Figur 2.1 - Vi trenger disse klossene i løpet av Kapittel 2

Når vi skal tegne lysgrafikk på skjermen, har vi en ganske stor begrensning siden micro:bit kun har 5x5 lamper som vi kan bruke til å tegne med. For å tegne noe som likner på et romskip må vi dermed være litt kreative og tenke enkelt. Vi kan for eksempel tegne noe som minner om et romskip ved hjelp av kun 6 LED lamper. Men før vi kan tegne lysgrafikken, må vi bestemme oss for om program-met vårt skal kjøres kun én gang, eller for alltid så lenge micro:bit er koblet til strøm.

Ettersom vi ønsker at programmet skal gå for alltid, må vi trekke ut en gjenta for alltid-kloss fra klosslisten til skriptområdet.

12

Figur 2.2 – Vi trekker ut en gjenta for alltid-kloss til skriptområdet

Deretter kan vi trekke ut en vis bilde-kloss. Denne plasserer vi inne i gjenta for alltid-klossen slik at lysgrafikken tegnes for alltid på skjermen til micro:bit.

Figur 2.3 – Vi trekker ut en vis bilde-kloss

Nå kan vi til slutt tegne selve romskipet vårt. Som nevnt kan vi tegne romskipet med å kun bruke 6 av LED lampene. Vi kan velge hvilke LED lamper som skal lyse ved å klikke inne i vis bilde-klossen. Marker følgende 6 lamper for å tegne et romskip.


Figur 2.4 – Vi tegner et romskip på skjermen via vis bilde-klossen

Nå har vi klossene vi trenger for å tegne et romskip og vi er klare til å laste opp programmet vårt til micro:biten. For å laste opp må vi gjøre følgende:

1. Trykk på Last ned-knappen for å få nettsiden til å lage en .HEX fil og laste den ned til datamaskinen din2. Kopiere HEX filen til micro:bit enheten via filsystemet

1. Hvis nettleseren din har en lagre som-knapp, kan denne brukes for å lagre direkte til micro:bit2. Nettleseren kan også konfigureres til å laste direkte opp til micro:-bit eller spørre hvor du ønsker å lagre filene før hver nedlasting

14

'Avhengig av hvilken nettleser du bruker og hvilken type datamaskin du har (Windows, Mac eller Linux, Internet Explorer, Chrome, Safari, Firefox) vil denne prosessen være litt annerledes.

Det første steget er derimot helt likt. Vi trykker rett og slett på Last ned-knappen. Vi vil da få lastet ned en fil som har en .hex filendelse.

Du kan få nettleseren til å lagre .HEX filen direkte til micro:bit ved å endre litt på instillingene til nettleseren. I Google Chrome kan man be om å velge hvor alle filer som lastes ned skal lagres.

Visste du at?


Figur 2.5 – Vi laster ned .hex filen som Micro:bit trenger

Vi har nå fått lastet ned en ny fil til datamaskinen vår. Denne filen skal vi kopiere over til micro:bit. Det gjør vi ved at vi navigerer til Nedlastinger-mappen på datamaskinen din (som også kan hete Downloads om du har engelsk språk på maskinen din). Deretter skal vi trekke filen over til enheten som heter MICROBIT.

Figur 2.6 – Trekk HEX filen over til MICROBIT-enheten

16

Når filen er kopiert over til MICROBIT-enheten kommer det til å skje et par ting:

1. micro:biten kommer til å laste programmet inn i hukommelsen sin. Dersom du har noe som beveger seg på skjermen kommer dette til å stoppe opp og skjermen blir sort mens opplastingen skjer2. micro:biten vil deretter starte på nytt. Da vil den også dukke opp på nytt som en MICROBIT-enhet. Enkelte operativsystemer vil da klage på at enheten ikke var skikkelig utløst først. Denne advarselen kan man se bort fra3. micro:biten kjører nå ditt nye programEtter at vi har kopiert filen over og micro:bit har fått tid til å starte om, ser vi at vi får tegnet romskipet på skjermen, gratulerer med ditt første micro:bit program! Det neste vi skal gjøre er å få romskipet til å lette og fly oppover.

2.2 Få raketten til å lette

Når vi nå skal få raketten til å lette, må vi legge til litt flere klosser i programmet vårt. Ved å kopiere vis bilde-klossen fem ganger kan vi få raketten til å lette og deretter fly avgårde oppover til den forsvinner helt, over skjermen. For å kop-iere vis bilde-klossen høyre-klikker vi på den og velger valget lag kopi fra sprettoppmenyen.

Figur 2.7 – Vi kopierer vis bilde-klossen


Vi får nå en ny kloss som er helt lik den vi kopierte. Nå kan vi enkelt ”flytte” romski-pet ett steg oppover ved å trykke av og på de lyse-blå feltene i klossen.

Figur 2.8 – Vi flytter romskipet ett steg oppover

Vi fortsetter å kopiere og flytte romskipet til det er helt utenfor skjermen vår.

Vi kan nå laste ned den nye HEX filen, og kopiere denne til micro:bit for å programmere micro::bit med det nye programmet vårt.

Vi vil da se at romskipet går ett steg oppover før den går ett steg tilbake igjen.

18

Figur 2.9 – Vi kopierer og flytter romskipet oppover til det flyr over skjermen

Det neste steget er dermed å sørge for at romskipet ikke tar av før etter at vi har trykket på A-knappen til venstre for skjermen på micro:bit.

2.3 3, 2, 1… Lift-offNår vi nå skal utvide programmet vårt til å ta hensyn til knappen, skal vi samtidig endre litt på flyten. Hittil har vi egentlig laget en animasjon, det vil si en serie med bilder som vi viser etter hverandre. Vi har ikke benyttet noen av knappene eller sensorene på micro:bit for å ta avgjørelser i programmet vårt.

Vi kan nå laste ned og kopiere HEX filen til micro:bit og se at romskipet tar av og forsvinner ut av skjermen.

Nå har vi fått laget en enkel animasjon på skjermen.


For å fikse på det og for å gjøre programmet vårt til et ekte program skal vi gjøre følgende:

• Vi skal bruke en hvis-ellers-kloss for å avgjøre når raketten skal ta av

• Når vi ikke har trykket på knappen, skal vi få skjermen til å peke mot A-knappen for vise spilleren at knappen kan trykkes på• Når A-knappen trykkes ned, skal vi vise raketten og få den til å ta av

Det første vi skal gjøre er å flytte alle vis bilde-klossene vår ut fra gjen-ta for alltid-klossen. Vi skal bruke dem igjen senere, så vi legger dem til siden for gjenta for alltid-klossen foreløpig. Deretter skal vi trekke inn en hvis-ellers-kloss fra Logikk-overskriften og en knapp trykket på-kloss fra Inndata-overskriften.

Figur 2.10 – Vi peker på A-knappen helt til knappen trykkes ned

Nå kan vi prøve å laste opp programmet vårt til mi-cro:bit. Det som skjer da, er at vi får tegnet en pil som peker til venstre mot knapp A. Foreløpig skjer det in-genting når vi trykker på knappen.

Årsaken til det er at vi ikke har lagt til noen kode inne i hvis-delen av klossen, kun i ellers-delen. Dermed vet ikke micro:bit hva som skal skje når knappen tryk-kes inn (og det skjer da ingenting).

20

Det vi ønsker skal skje, er jo at raketten tar av når vi trykker på knappen. Det kan vi løse enkelt ved at vi trekker vis bilde-klossene vi tok vare på tidligere inn i hvis-delen av hvis-ellers-klossen. Klossrekken vår ender dermed med å se slik ut.

Figur 2.11 – Vi trekker vis bilde-klossene inn i hvis-delen av hvis-ellers-klossen

Nå er det på tide å laste opp den nye koden til micro:biten igjen. Hva skjer når vi trykker på knappen nå?

Det neste vi skal gjøre er å få micro:bit til å telle ned fra 3 før raketten tar av. Forsøk om du kan få det til på egenhånd før du fortsetter.

2.4 Få micro:bit til å telle ned før raketten letter

Det er flere måter å få micro:bit til å telle ned på. Vi kan enten:

• Bruke tre nye vis bilde-klosser, ett for hvert tall• Bruke vis tekst-klossen

Vi har allerede sett hvordan vi kan bruke vis bilde-klossene til å tegne på skjermen. Dermed skal vi heller bruke vis tekst-klossen. Men før vi bruker


denne klossen skal vi sørge for at det ikke allerede er tegnet noe på skjermen ved å bruke en tøm skjermen-kloss. Denne finner vi under Basic og mer-over-skriften.

Figur 2.12 – Vi tømmer skjermen og scroller nedtellingen over skjermen

Legg merke til at det er et mellomrom foran 3-tallet og etter 1-tallet. Da får vi en liten pause rett før og rett etter nedtellingen. Prøv å laste opp programmet nå og se hvordan det ser ut på micro:bit!

Nå har vi sett litt på:

• Hvordan vi kan tegne lysgrafikk til skjermen• Hvordan vi kan ta avgjørelser i programmet vårt.

Da er det på tide å utforske sensorene som er plassert på micro:bit for å skape bevegelse på skjermen.

Da er det på tide å laste opp programmet til micro:bit for å se hvordan det fungerer der.

Micro:bit skal nå starte med å vise en pil som peker til venstre mot A-knappen. Når A-knappen trykkes på sakl den telle ned før vi får se romskip-animasjonen vår.

22

Vi mennesker gjør betingede handlinger hundrevis av ganger hver eneste dag, faktisk hver gang vi tar en avgjørelse! I MakeCode har vi to måter å undersøke be-tingelsen for en handling, hvis og hvis-ellers.

I hverdagen vår sjekker vi ofte om betingelser gjelder, ofte helt automatisk, og uten å tenke noe særlig over det. Vi kunne kanskje programmert morgenen vår slik:

• [Når] vekkeklokken ringer [så] stå opp [og] gå i dusjen • [Hvis] klokka er [mindre enn] 07:45 [så] fortsett å dusje • [Ellers] gå ut av dusjen [og] tørk deg [og] kle på deg • [Gjenta] Spis frokost [til] klokken blir 08:15 • Ta på deg skolesekken [og] ta på deg ytterklær [så] gå til skolen

Hvis vi programmerer et spill, kan vi bestemme at spilleren vinner spillet når po-engsummen når 150 poeng. I dagligtalen kan vi si det slik:

”Hvis spillerens poengsum er 150 eller høyere, har spilleren vunnet”

Når vi skal gi instruksjoner til en datamaskin eller en micro:bit, må vi bruke litt færre ord og samtidig ha en fastere struktur:

”[Hvis] (poeng >= 150) [så] [spiller vunnet]”

Betingede handlinger – hvis og hvis-ellers

Her har vi benyttet oss av betingelsen hvis for å sjekke om spilleren har vunnet.

I tillegg har vi også benyttet oss av variabelen poeng og ope-ratoren større enn eller likI Makecode finner du alle de betingede handlingene under den Logikk-overskriften:


3 Bevege romskipet sammen med micro:bit

I dette kapittelet• Lære å bruke akselerometeret på micro:bit• Flytte romskipet til høyre og venstre når micro:bit vippes fra side til side• Lære å bruke variabler for å holde styr på hvor romskipet er tegnet på skjermen

Det er flere måter vi kan fortelle micro:bit at den skal bevege romskipet på. Vi kan for eksempel:

• Bruke de to knappene til venstre og høyre for skjermen (A og B)• Bruke akselerometeret• Bruke kompasset

I tillegg finnes det også andre metoder vi kunne benyttet, men disse er de metodene som er innebygget på micro:bit kortet. Vi har allerede sett hvordan vi kan bruke knappene til å få noe til å skje på micro:bit, så nå skal vil få romskipet til å bevege seg når vi vipper på micro:bit fra side til side. Micro:bit har innebyg-get noe som heter et akselerometer som brukes for å finne ut hvordan micro:bit

24

beveger seg, enten side til side (X og Y-retningen) eller oppover og nedover (Z-retningen).

I kapittel 3 skal vi benytte oss av følgende nye klosser:

Figur 3.1 – Vi skal bruke følgende klosser i løpet av kapittel 3

Men før vi starter med å legge inn bevegelsen må vi gjøre om på programmet vårt slik at vi kan flytte romskipet til venstre og høyre over skjermen. Da skal vi tegne romskipet på nytt slik at vi kan lagre bildet av romskipet i en variabel.

3.1 Tegne romskipet med en lag bilde-kloss

I og med at endringen vi gjør fra kapittel 2 er såpass stor, starter vi like greit helt på nytt med to nye, tomme start klosser.


Figur 3.2 – Vi starter på et nytt program

Innholdet til ved start-klossen kjører kun én gang, rett etter at micro:bit har fått strøm, eller rett etter at vi laster opp et nytt program til micro:bit. Inne i denne klossen skal vi utføre 2 hendelser.

• Vi skal lage en ny variabel som vi kaller romskip.• Vi skal lage et bilde som vi skal gi som verdi til romskip-variabelen

Vi starter dermed med å lage den nye variabelen ved å trykke på lag en varia-bel-knappen inne i Variabler-overskriften.

Figur 3.3 – Vi lager en ny variabel vi kaller romskip

26

Deretter skal vi sette verdien til romskip-variabelen til et bilde. Vi starter med å trekke ut en sett variabel til-kloss fra Variabler-overskriften, og velger romskip-variabelen fra sprettoppmenyen.

Figur 3.4 – Vi trekker ut en sett variabel til-kloss og velger romskip-variabelen

Vi kan nå endre verdien til romskip-variabelen til et bilde ved å trekke en lag bilde-kloss fra Avansert->Bilder-overskriften. Lag bilde-klossen skal vi bytte ut med 0-tallet til romskip-variabelen. Inne i lag bilde-klossen tegner vi helt enkelt romskipet vårt, akkurat som vi har gjordt tidligere.

Figur 3.5 – Vi oppdaterer romskip-variabelen med ett bilde


Nå trenger vi bare å legge til én enkel kloss til for å få tegnet romskipet vårt på skjermen til micro:bit igjen. Vi trekker enkelt og greit ut en vis bilde-kloss og legger den til inne i gjenta for alltid-klossen. Legg merke til at vis bilde-klossen også har et felt som heter offset. Vi skal utforske hva offset-feltet gjør, men om offset har verdien 0, tegnes romskipet akkurat slik som vi tegnet den inne i vis bilde-klossen, dvs. på midten av skjermen.

Figur 3.6 – Vi tegner romskipet på skjermen igjen

Det er nå på tide å laste opp programmet til micro:bit for å se at vi får tegnet romskipet på skjermen igjen.

Da er alt på plass for neste steg – å flytte på romskipet når vi beveger på mi-cro:bit.

Det er nå på tide å laste opp programmet til micro:bit for å se at vi får tegnet romskipet på skjermen igjen.

Programmet vårt fungerer akkurat som vi forventer. Vi får tegnet romskipet midt på skjermen til micro:bit

28

3.2 Flytte på romskipet når vi vipper på micro:bit

Hvis vi ser på vis bilde-klossen ser vi at vi kan legge til noe som heter et off-set. Det betyr at vi kan bestemme hvor på skjermen vi ønsker å starte å tegne bildet i forhold til x-aksen (fra venstre til høyre):

• Når offset er lik 0 tegnes romskipet akkurat slik vi tegnet det i lag bilde-klossen• Dersom offset er lavere enn 0 flyttes lysbildet mot høyre• Dersom offset er høyere enn 0 flyttes lysbildet mot venstre

På denne måten kan vi enkelt flytte romskipet vårt fra høyre til venstre på sk-jermen ved å sette offset lik et tall mellom -2 og +2. For å få til det, kopierer vi vis bilde-klossen slik at vi ender opp med 5 klosser inne i gjenta for all-tid-klossen.

Figur 3.7 – Vi lager en enkel animasjon


Forsøk nå å laste opp programmet til micro:bit. Når pro-grammet er lastet opp, ser vi at vi har laget en enkel ani-masjon på skjermen til micro:bit.

Romskipet flytter seg fra helt til høyre, ett og ett steg mot venstre til den ender opp helt til venstre på skjermen. Der-etter starter animasjonen på nytt.

Hvordan er dette annerledes enn animasjonen vi laget i kapittel 2?

Forsøk å laste opp programmet til micro:bit og se at vi nå har laget en enkel animasjon på skjermen til micro:bit.

Da er alt klart for å kunne bevege romskipet via akselerometeret til micro:bit. For å få til det må vi endre programmet vårt litt:

• Vi må lagre offset i en egen variabel. Denne kan vi for enkelthets skyld rett og slett kalle offset

• Vi må lese fra akselerometerets x-akse og bruke det vi leser hefra til å endre offset-variabelen

• Vi må slette 4 av vis bilde-klossene slik at vi ender opp med kun én vis bilse-kloss. Denne må benytte offset-variabelen for å bestemme hvor romskipet skal tegnes på skjermen

Vi starter med å sette offset-variabelen til verdien 0. Dette trenger vi kun å gjøre én gang, så vi legger den til i ved start-klossen.

Figur 3.8 – Vi lager en ny offset-variabel

30

Deretter skal vi lese fra akselerometeret. Når vi leser fra akselerometeret får vi tilbake et tall som er mellom -1023 og +1023. Dette tallet varierer avhengig av hvor mye micro:bit er vippet i forhold til enten x, y eller z-aksen.

• Dersom verdien for x-aksen er under 0, har vi rotert micro:bit mot venstre

• Dersom verdien for x-aksen er over 0, har vi rotert micro:bit mot høyre

Romskipet vårt har 5 mulige posisjoner på skjermen, hver med sin egen offset, som vi så tidligere. Dersom micro:bit ikke er rotert mot verken høyre eller venstre, kan vi enkelt og greit tegne romskipet i midten av skjermen med offset 0. Når vi roterer micro:bit litt mot høyre, ønsker vi å plassere romskipet på offset -1 (ett steg mot høyre). Roterer vi micro:bit enda mer mot høyre, kan vi plassere romskipet på offset -2 i stedet. Vi starter dermed med følgende hvis-ellers-kloss.

Figur 3.9 – Vi flytter på romskipet når micro:bit roterer mot høyre

Nå skal vi legge til klossene for å hente ut akselerasjonen fra micro:bit. Du finner akselerasjon-klossen under Inndata-overskriften, sammenlikningen (min-dre-enn-klossen) og hvis-ellers-klossen under Logikk-overskriften. For å legge på en ekstra ellers-hvis del til hvis-ellers-klossen, trykker vi på pluss-tegnet nederst til venstre i klossen. Her kan vi enkelt velge hvor mange ellers-hvis deler klossen vår skal ha.


Før vi går videre skal vi laste opp programmet til micro:bit.

Når programmet er lastet opp skal vi kunne bevege romskipet til høyre på skjremen ved å vippe micro:bit mot høyre.

Hvis vi vipper micro:bit litt flytter romskipet seg ett steg mot høyre, mens om vi vipper micro:bit mer, flytter romskipet seg to steg mot høyre.

Figur 3.10 – Vi legger til ekstra ellers-hvis deler

Nå er vi nesten i mål med å bevege på romskipet, men vi mangler å bevege romskipet til venstre når vi roterer micro:bit mot venstre. For å få til det trenger vi to ekstra ellers-hvis-deler til hvis-ellers-klossen.

32

Figur 3.11 – Vi får romskipet til å bevege seg mot venstre

Da er alt på plass for å fortsette med neste steg – legge til asteroider som romski-pet må unngå å kollidere med.

Nå kan vi laste opp det oppdaterte programmet til micro:bit og sjekke at vi får flyttet romskipet både til ven-stre og til høyre.

Tallene 400 og 200, samt -200 og -400 fungerer greit for meg på min micro:bit, men det kan hende du må justere litt på disse tallene for at spillet skal fungere best for deg på din micro:bit. Prøv å finne verdier som gjør det enkelt å få romskipet til å flytte seg mellom de tre posisjonene vi har programmert foreløpig.


4 Legge til fallende asteroider

I dette kapittelet• Lær å tegne en asteroide• Flytte asteroiden automatisk nedover skjermen• Beregne når asteroiden og romskipet kolliderer• Avslutte spillet ved å eksplodere romskipet

For at spillet vårt skal bli et skikkelig spill, må romskipet vårt ha noen hindringer. Vi skal dermed legge til noen fallende asteroider som romskipet vårt må unngå. Vi skal begrense oss slik at det kun er én og én asteroide som faller nedover av gangen. Programmet vårt må dermed vite hvor på skjermen denne befinner seg hele tiden. Både for å kunne flytte den nedover, men også for å vite om romskipet vårt kolliderer med asteroiden.

34

I løpet av kapittel 4 skal vi bruke følgende nye klosser

Figur 4.1 – Vi trenger disse klossene for å gjennomføre hele kapittel 4

4.1 Få asteroiden til å falle nedover skjermen

Når vi skal få en asteroide til å falle nedover på skjemen, må vi til enhver tid vite hvor den befinner seg. En enkel måte å lagre denne informasjonen på er ved hjelp av X- og Y-koordinatene til asteroiden.

Vi lager dermed to nye variabler og gir dem følgende navn og verdier i ved start-klossen:

• asteroideX = 0• asteroideY = 0


Figur 4.2 – Vi oppretter variablene asterioideX og asteriodeY

Nå kan vi få asteroiden til å falle nedover på skjermen. Vi starter med å la den falle på X lik 0 (det vil si helt til venstre på skjermen). Inne i ved start har vi allerede satt både asteroideX og asteroideY til verdien 0. Dermed kan vi nå legge til en tenn-kloss for å tenne lyset som hører til asteroideX og aster-oideY-variablene. Vi finner klossen tenn under overskriften Skjerm.

Figur 4.3 – Vi tenner lampen som hører til asteroideX og asteroideY

36

Men vi ønsker jo at asteroiden skal falle nedover. For å få til det, så må vi jo op-pdatere asteroideY-variabelen og la den øke med 1. Dermed trekker vi ut en endre variabel med-kloss og plasserer denne nederst i gjenta for all-tid-klossen.

Figur 4.4 – Vi øker asteroideY-variabelen med 1 hver ”runde”

Når vi nå laster opp programmet til micro:bit, ser vi at asteroiden faller nedover skjermen, men samtidig ser vi også at den forsvinner ned under skjemen og blir borte for alltid. Det var ikke helt det vi ønsker. Vi ønsker jo at asteroiden skal falle fra toppen av skjermen (Y lik 0) og at når asteroiden har falt fra toppen til bunnen, så skal en ”ny” asteroide falle nedover fra toppen igjen.

For å løse den utfordringen, må vi sjekke om asteroideY-variabelen har en verdi som er høyere enn 4 (det vil si under nederste rad på skjermen). Dersom den har det må vi sette den tilbake til 0 igjen. Her må programmet vårt ta en avgjørelse: Hvis asteroideY > 4´, sett asteroideY = 0.

Vi må dermed legge inn en hvis-kloss helt øverst i gjenta for alltid-klos-sen.

Når vi nå laster opp programmet til micro:bit, ser vi at asteroiden faller nedover skjermen, men samtidig ser vi også at den forsvinner ned under skjemen og blir borte for alltid.

Det var ikke helt det vi ønsker. Vi ønsker jo at asteroiden skal falle fra toppen av skjermen (Y lik 0) og at når aster-oiden har falt fra toppen til bunnen, så skal en ”ny” aster-oide falle nedover fra toppen igjen.

Vi kan nå laste opp programmet vårt til micro:bit og se at lyset helt øverst til venstre nå lyser. Det er et godt steg i riktig retning., selv om asteroiden ikke beveger seg ne-dover skjermen.


Figur 4.5 – Vi setter asteroideY tilbake til 0

Nå kan vi laste opp programmet vårt og se at asteroiden dukker opp på toppen av skjermen igjen etter at den har nådd bunnen. Men siden vi ikke endrer på as-teroideX-variabelen, dukker den likevel alltid opp helt til venstre på skjermen. Det vi ønsker er jo at det skal falle en ny asteroide på en tilfeldig kolonne på skjermen. Det kan vi løse ved å legge til følgende to klosser inne i hvis-klossen vi nettopp la til.

Nå kan vi laste opp programmet vårt og se at asteroiden dukker opp på toppen av skjermen igjen etter at den har nådd bunnen.

Men siden vi ikke endrer på asteroideX-variabelen, dukker den likevel alltid opp helt til venstre på skjermen. Det vi ønsker er jo at det skal falle en ny asteroide på et tilfeldig sted på skjermen

Last opp programmet og prøv hvordan det ser ut på micro:bit.

Nå ser vi at asteroiden faller nedover skjermen på en til-feldig kolonne hver gang den starter fra toppen av skjer-men igjen.

38

Figur 4.6 – Vi flytter asteroiden til et nytt sted på skjermen når den når bunn

Her ser vi at vi har lagt til en ny tilfeldig tall-kloss. Denne klossen kaster en virtuell terning med 4 sider hver gang micro:bit benytter klossen. Det vil si at vi får laget et tall som kan være 0, 1, 2, 3 eller 4. Dette tallet bruker vi for å bestemme hvor på skjermen vi skal la den nye asterioden falle ved å oppdatere asteroideX-variabelen. Last opp programmet og prøv hvordan det ser ut på micro:bit.

Nå er vi nesten i mål. Det siste steget er å avslutte spillet når romskipet treffer asteroiden.

4.2 Romskipet kolliderer med asteroiden

Når asteroiden kolliderer med romskipet, skal vi fortelle spilleren at vi har kollid-ert før vi starter spillet på nytt. Vi må dermed lagre informasjon om spillet er over eller ikke. Det gjør vi ved at vi lager en ny variabel som vi kaller gameover. Når vi starter spillet - inne i ved start-klossen - setter vi gameover-variabelen til usann. Dermed sørger vi for at vi starter spillet som vi skal når micro:bit starter spillet vårt.


Figur 4.7 – Vi legger til en gameover-variabel

Når vi skal finne ut om romskipet kolliderer med asteroiden må vi sjekke tre ting:

• Befinner asteroiden seg på rad 3 på skjermen?• Hvilke felter opptar romskipet (på rad 3)?• Hvilket X-koordinat har asteroiden?

Når vi vet disse tre verdiene kan vi bestemme om asteroiden og romskipet har kollidert. Her har vi gjort en forenkling for å gjøre det litt enklere for oss:

• Det er kun når asteroiden er på rad 3 på skjermen at den kan kollidere med romskipet

Men likevel er det vanskelig å se hvordan vi skal vite om de to kolliderer. Årsaken til det er jo at dersom romskipet er helt til venstre på skjemen, så opptar den jo X-koordinatene 2, 3 og 4. Men dersom romskipet er i midten, opptar den X-koor-dinatene 1, 2 og 3, osv. Vi har 2 fremgangsmåter for å finne ut om de kolliderer:

• Vi kan ha en hvis-kloss for hver posisjon (offset) romskipet har, og sjekke om asteroiden treffer noen av feltene vi vet romskipet befinner seg på nå

• Vi kan bruke litt matematikk for å beregne om asteroiden treffer

40

Med det første alternativet ender vi opp med svært mange klosser. Så vi går for alternativ 2. Denne har færre klosser, men er ikke like enkel å forstå. De to kolliderer nemlig når:

• Dersom asteroideY har verdien 3 (vi har bestemt at vi kun kan kolli-dere på denne raden)

• OG asteroideX + offset er større enn 0• OG asteroideX + offset er mindre enn 4

Her er det viktig å holde tunga rett i munnen, og klossene kan være litt vanske-lig å forstå. Enkelt forklart sammenlikner vi x-posisjonen til asteroiden med de tre feltene som romskipet opptar (på rad 3). Dersom asteroideX + offset er mindre enn 0, så faller asteroiden til venstre for romskipet. Tilsvarende der-som asteroideX + offset er større enn 4, så faller asteroiden til høyre for romskipet. Vi har med andre ord kollidert dersom asteroiden befinner seg på Y = 3, og asteroideX + offset har en verdi på enten 1, 2 eller 3.

Deretter må vi bestemme når spillet vårt skal avsluttes. Det skjer jo når romski-pet og asteroiden kolliderer. Vi skal dermed legge til den litt vanskelige sam-menlikningen vi beskrev lengre opp.

Her er det viktig at vi holder tunga rett i munnen. Vi skal løse problemet ved å plassere hele tre hvis-klosser inne i hverandre - en for hver av betingelsene våre fra punktlisten over. Normalt, dersom vi ikke hadde benyttet oss av kloss-basert programmering, ville vi heller ha benyttet oss av tre sammenlikninger som er knyttet sammen ved hjelp av og-uttrykk. Men det blir fort veldig lite oversiktlig når vi bruker kloss-baserte programmeringssystemer.


Figur 4.8 – Vi kan bruke tre hvis-klosser inne i hverandre

Nå har vi lagt til klossene vi trenger for å sjekke om romskipet kolliderer, og vi har også satt variabelen gameover til sann dersom de har kollidert. For å starte spillet på nytt etter at vi har vist at spilleren har tapt, kan vi pakke hele koden vår inn i en ny hvis-ellers-kloss.

Vi ender da opp med følgende kode til spillet vårt. Her har vi også lagt til en enkel liten animasjon når romskipet og asteroiden kolliderer.

Nå har vi lagt til klossene vi trenger for å sjekke om romskipet kolliderer, og vi har også satt variabelen gameover til sann dersom de har kollidert.

Da er det på tide å laste opp spillet for å sjekke om spillet fungerer som vi forventer.

Avsluttes spillet når asteroiden treffer romskipet? Fortsetter spillet når asteroiden bommer på romskipet?

42

Figur 4.9 – De endelige klossene til spillet vårt.


Veien videre

Vi er nå ferdig med spillet vårt, men her finnes det mye du kan utforske på egen hånd. Kanskje kan du:

• Bruke knappene til å få romskipet til å kunne skyte ned asteroidene?• Variere hastigheten til asteroidene• Telle poeng slik at man får vite hvor mange asteroider man har "bekjempet" i løpet av spillet• Hvis du har to micro:bit kan du få dem til å kommunisere via radio. Da kan en spiller styre romskipet, mens den andre styrer asteroidene Eller kanskje begge spillerne kan skyte på hverandre?

Her er det bare fantasien som setter grenser. Prøv å utforske mulighetene i MakeCode editoren, her finnes det mange spennende klosser som kan brukes til å gjøre spillet enda morsomere!

miro:bit fra scratch

Dette heftet utgjør første del av boken micro:bit fra scratc som er i salg fra og med desember 2018.

micro:bit fra Scratch er en komplett introduksjon til micro:bit og program-merbar elektronikk og tar for seg tema som:

• Programmering av micro:bit• Grunnleggende elektronikk• Styring av enkel elektronikk som lysdioder og transistorer• Motorer og bevegelse• Bruk av eksterne sensorer og avlesing av sensordata

Boken benytter MakeCode i alle ek-semplene i boken som er enkelt forklart med både tekst og utfyllende figurer!

978-82-93577-00-3

Dette heftet er del 1 av boken micro:bit fra scratch, som er en første introduksjon til micro:bit og inneholder fire kapitler. Vi starter med å lage en svært enkel animasjon på skjermen til micro:bit, før vi steg-for-steg går gjennom hvordan man kan bygge opp et enkelt romskip-spill ved å bruke de innebygde sensorene og lysdiode-skjermen på forsiden av micro:bit.

• Steg for steg instruksjoner• Over 30 detaljerte figurer• Pedagogisk oppbygning med enkel og grundig forklarende tekst

introduksjonshefte til micro:bit · sdiodene på forsiden kortet. ordet ”grafikk” er kanskje et...

Documents