Introduksjonshefte til micro:bit

Transkript

1 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

2 Kodegenet AS, Joachim Haagen Skeie For ytterligere informasjon og bestilling av denne og andre bøker fra Kodegenet, vennligst besøk Kodegenets nettsider på: kodegenet.no. Spørsmål, tilbakemeldinger eller andre henvendelser kan sendes via epost til Layout og design: Joachim Haagen Skeie og Thomas Orveland/LOUD AND CLEAR AS Papir omslag: 200g Papir innmat: 100g ISBN (trykket bok): ISBN (e-bok): opplag 2018 Kodegenet AS Cecilie Thoresensvei 9, 1153 Oslo, Norway

3 Del 1 Introduksjon 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 stegfor-steg går gjennom hvordan man kan bygge opp et enkelt romskipspill 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. Introduksjonshefte til micro:bit 3

4 4

5 Innhold Hva er micro:bit og hvordan programmeres den? Hva er BBC micro:bit og hvordan programmeres den? Hvordan programmeres micro:bit? 8 Romfergen tar av Tegne romfergen på micro:bit skjermen Få raketten til å lette Få micro:bit til å telle ned før raketten letter 20 Bevege romskipet sammen med micro:bit Tegne romskipet med en lag bilde-kloss Flytte på romskipet når vi vipper på micro:bit 28 Legge til fallende asteoider Få asteroiden til å falle nedover skjermen Romskipet kolliderer med asteroiden 38 Veien videre 43 micro:bit fra scratch 43 Introduksjonshefte til micro:bit 5

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 sensorer, knapper og LED lamper. Micro:bit programmeres via datamaskinens USB inngang og nettleseren, eller via Bluetooth via nettbrett. I samarbeid med industrien utviker The micro:bit Foundation programvare for å programmere micro:bit ved hjelp av forskjellige programmeringsspråk. Dermed kan micro:bit programmeres med blant annet visuell dra-og-slipp kloss-basert programmering eller tekstbaserte språk som JavaScript og Python. 6

7 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 trykknapper. 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. Introduksjonshefte til micro:bit 7

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 nettleseren. 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. Programmene 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 USBdisken. Det høres kanskje komplisert ut, men heldigvis kan vi bruke de nettbaserte verktøyene for å gjøre denne jobben for oss. Når vi er fornøyd med det vi har programmert, 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 8

9 og demonstrasjonsområdet tar mesteparten av nettsiden. MakeCode er inndelt i 5 områder: Figur Slik ser MakeCode ut 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 å programmere 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. Introduksjonshefte til micro:bit 9

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 lysdiodene 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. 10

11 2.1 Tegne romfergen på micro:bit skjermen I løpet av kapittel 2 skal vi bruke følgende klosser Figur 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 programmet 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. Introduksjonshefte til micro:bit 11

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. 12

13 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 din 2. 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:bit 2. Nettleseren kan også konfigureres til å laste direkte opp til micro:- bit eller spørre hvor du ønsker å lagre filene før hver nedlasting Introduksjonshefte til micro:bit 13

14 Visste du at? 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. '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. 14

15 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 Introduksjonshefte til micro:bit 15

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 skjer 2. 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 fra 3. micro:biten kjører nå ditt nye program Etter 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 å kopiere vis bilde-klossen høyre-klikker vi på den og velger valget lag kopi fra sprettoppmenyen. Figur 2.7 Vi kopierer vis bilde-klossen 16

17 Vi får nå en ny kloss som er helt lik den vi kopierte. Nå kan vi enkelt flytte romskipet ett steg oppover ved å trykke av og på de lyse-blå feltene i klossen. Figur 2.8 Vi flytter romskipet ett steg oppover 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. Vi fortsetter å kopiere og flytte romskipet til det er helt utenfor skjermen vår. Introduksjonshefte til micro:bit 17

18 Figur 2.9 Vi kopierer og flytter romskipet oppover til det flyr over skjermen 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. 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, 1 Lift-off Nå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. 18

19 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 gjenta 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 micro:bit. Det som skjer da, er at vi får tegnet en pil som peker til venstre mot knapp A. Foreløpig skjer det ingenting 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 trykkes inn (og det skjer da ingenting). Introduksjonshefte til micro:bit 19

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-ellersklossen 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 20

21 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-overskriften. Figur 2.12 Vi tømmer skjermen og scroller nedtellingen over 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. 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. Introduksjonshefte til micro:bit 21

22 Betingede handlinger hvis og hvis-ellers 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 betingelsen 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 poengsummen 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] 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 operatoren større enn eller liki Makecode finner du alle de betingede handlingene under den Logikk-overskriften: 22

23 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 innebygget noe som heter et akselerometer som brukes for å finne ut hvordan micro:bit Introduksjonshefte til micro:bit 23

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. 24

25 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 variabel-knappen inne i Variabler-overskriften. Figur 3.3 Vi lager en ny variabel vi kaller romskip Introduksjonshefte til micro:bit 25

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 26

27 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. 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 Da er alt på plass for neste steg å flytte på romskipet når vi beveger på micro:bit. Introduksjonshefte til micro:bit 27

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 offset. 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å skjermen 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 alltid-klossen. Figur 3.7 Vi lager en enkel animasjon 28

29 Forsøk nå å laste opp programmet til micro:bit. Når programmet er lastet opp, ser vi at vi har laget en enkel animasjon 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. Deretter 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 Introduksjonshefte til micro:bit 29

30 Deretter skal vi lese fra akselerometeret. Når vi leser fra akselerometeret får vi tilbake et tall som er mellom og 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 hvisellers-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 (mindre-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. 30

31 Figur 3.10 Vi legger til ekstra ellers-hvis deler 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. 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. Introduksjonshefte til micro:bit 31

32 Figur 3.11 Vi får romskipet til å bevege seg mot venstre Nå kan vi laste opp det oppdaterte programmet til micro:bit og sjekke at vi får flyttet romskipet både til venstre 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. Da er alt på plass for å fortsette med neste steg legge til asteroider som romskipet må unngå å kollidere med. 32

33 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. Introduksjonshefte til micro:bit 33

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 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 34

35 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 asteroidey-variablene. Vi finner klossen tenn under overskriften Skjerm. Figur 4.3 Vi tenner lampen som hører til asteroidex og asteroidey Introduksjonshefte til micro:bit 35

36 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 nedover skjermen. Men vi ønsker jo at asteroiden skal falle nedover. For å få til det, så må vi jo oppdatere asteroidey-variabelen og la den øke med 1. Dermed trekker vi ut en endre variabel med-kloss og plasserer denne nederst i gjenta for alltid-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. 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-klossen. 36

37 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 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å 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å 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. Last opp programmet og prøv hvordan det ser ut på micro:bit. Nå ser vi at asteroiden faller nedover skjermen på en tilfeldig kolonne hver gang den starter fra toppen av skjermen igjen. Introduksjonshefte til micro:bit 37

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 kollidert 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. 38

39 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-koordinatene 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 Introduksjonshefte til micro:bit 39

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 kollidere 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 vanskelig å 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 dersom 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 romskipet og asteroiden kolliderer. Vi skal dermed legge til den litt vanskelige sammenlikningen 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 klossbasert 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. 40

41 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. 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? 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. Introduksjonshefte til micro:bit 41

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

43 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 micro:bit fra Scratch er en komplett introduksjon til micro:bit og programmerbar 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 eksemplene i boken som er enkelt forklart med både tekst og utfyllende figurer! Introduksjonshefte til micro:bit 43

44 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 stegfor-steg går gjennom hvordan man kan bygge opp et enkelt romskipspill 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