Hopscotch | skolekoding.no

skolekoding.no > Blokk-koding > Hopscotch

Hopscotch er et programmeringsspråk på iPad for barn og ungdom. Det er blokkbasert. Man programmerer ved å trekke ut blokker og legge de etter hverandre.

Nettsted: https://www.gethopscotch.com/

Bildene nedenfor viser videoveiledninger som ligger i appen. Med dem kan du selv kode samtidig som du følger veiledningen. Veiledningene er på ca 20 minutter. De viser ikke veien helt fram til det utseendet du ser på bildene, men spillene fungerer som de skal.

Crossy Road

Publisert desember 2016 (nyerere beskrivelser med bilder kommer etter hvert)

Vi skal lage en enkel versjon av Crossy Road, der en høne skal forsøke å krysse flere veier der biler kjører fram og tilbake. Veiledningen tar utgangspunkt i de innebygde videoene for Crossy Road og Flappy Bird.

Start Hopscotch.
Hvis du ikke har brukt appen før, må du registrere deg med brukernavn, passord og e-postadresse.
Du kan la Hopscotch velge brukernavn ved å trykke på snurrepila til høyre. Hvis du vil bruke gratisversjonen klikker du på teksten under det store grønne feltet. Hvis du ved en feiltagelse trykket på betalingsknappen ,kan du bare avslutte appen, og starte den på nytt: skyv opp med fire fingre eller trykk to ganger på den runde hjemknappen. Finn Hopscotch og bruk en finger til å skyve appen opp og ut av skjermen. Start på Hopscotch nytt.
Klikk på det grønne plusstegnet midt på skjermen nederst.
Gi programmet ditt et navn. Trykk på den grønne kappen. Du er nå på arbeidsbordet. Det er her du skal opprette og plassere de figurene du skal bruke. Her er det tre knapper. Øverst i venstre hjørne er det et hus. Det bringer oss tilbake til startskjermen. Øverst til høyre er det en trekant. Den starter programmet vårt. Da endrer trekanten seg til en blyant. Trykker vi på blyanten kommer vi tilbake til arbeidsbordet. I midten nederst er det et plusstegn. Det bruker vi for å legge til figurer i programmet. Klikk på plusstegnet.
Vi skal bruke emojis. Klikk på på knappen med smilefjesene under «TEXT»
Finn fram til Emojitastaturet ved å trykke på jordkloden nede til venstre på tastaturet. Hvis du ikke har noe emojitastatur, må du aktivere det på iPaden: Innstillinger > Generelt > Tastatur > Tastaturer > Legg til nytt tastatur > Emoji.Trykk på bjørnehodet nederst på emojitastaturet for å finne fram til dyre-emojis, eller bare sveip mot høyre. Velg en høne. Bekreft med den lange grønne knappen.
Trykk og hold på høna. Flytt høna rundt på arbeidsbordet. Legg merke til tallene som endrer seg til høyre for høna. Dette er figurens koordinatene. Det første tallet er x-koordinaten. Det andre tallet er y-koordinaten. X-aksen går vannrett bortover fra venstre mot høye. Y-aksen går loddrett oppover fra nedre kant til øvre kant. Nede i venstre hjørne er både x og y lik null. Mellom hver hvite strek i rutenettet er det 50 punkter. Skjermen er ca 1050 bred og ca 600 høy. Prøv selv ved å trekke høna rundt. Plusstegnet nederst blir til en søppelbøtte når du trekker i figuren. Hvis du vil slette figuren, kan du trekke den opp i søppelbøtta, og bekrefte sletting. Plasser høna nederst på skjermen like over plusstegnet/søppelbøtta.
Trykk på teksten under høna. Gi figuren din et navn. Skriv «Høne».
Nå skal vi lage tre knapper som vi skal bruke for å flytte på høna. Legg til tre piltaster ved å bruke plusstegnet og emojitastaturet tre ganger Piltastene ligger under kategorien med notetegn og andre tegn. Begynn med oppoverpil. Plasser den nede til venstre. Gi den navn «Opp». Gjør det samme med høyrepolitikk og venstrepil.
Nå skal arbeidsbordet se slik ut. Test programmet ved å trykke på trekanten oppe i høyre hjørne. Trykk på pilknappene. Hvorfor flytter ikke høna seg? Det er fordi vi ikke har fortalt høna hva den skal gjøre når vi trykker. Figurene i spillet gjør ingenting før vi har programmert dem.
Trykk på blyanten oppe i høyre hjørne for å kome tilbake til arbeidsbordet. Nå kommer en viktig ting som det er lett å gjøre feil. Hvilken figur er det som det skal skje noe med? Det er høna. Derfor er det på høna vi skal legge koden. NB! Ikke på piltastene! Klikk på høna. Klikk deretter på den hvite bobla med «+ Add code» ved siden av figuren.
Nå er vi i kodevinduet. Her ser vi et bilde av høna oppe på det turkise feltet. Det minner oss om at vi er på rett plass. Det første vi må gjøre er å bestemme hva som skal starte programmet som ligger på høna. Vi må velge en av de røde «When»-klossene.
Vi vil at høna skal bevege seg oppover når vi trykker på en opp-pila. Vi må derfor velge «isTapped». Hvis ikke de røde «When»-klossene synes trykker du på teksten «+ New when» øverst.
Nå har vi en «When»-blokk som vi skal putte andre kodeklosser inn i, men først på vi bytte utbildet av iPaden øverst. Vi vil at høna skal bevege seg oppover når vi trykker på oppoverpil. Trykkpå bildet av iPaden og velg i stedet bildet av oppoverpila.
Vi er klare til å legge til kodeklosser. Trykk på det hvite feltet inne i «When»-blokka, mellom «When» og «End». Vi vil flytte figuren oppover på skjermen, det er det samme som å endre ykoordinaten. Trykk på «Change Y by». Skriv inn en tollverdi med det svarte tall-tastaturet til venstre. Hus at hver rute på arbeidsbordet er 50. Det kan derfor passe å velge 25. Når du skal skrive inn en verdi kan du slette ved å bruke sletteknappen nederst til høyre. Hvis du vil slette en kloss trykker du og holder litt før du slipper. Da kan du velge å klippe, kopiere eller slette.
Trykk på trekanten oppe i høyre hjørne for å teste om oppoverpila fungerer som den skal. Hvis alt er i orden går du tilbake til arbeidsbordet med blyanten, og lager kode på høna som gjør at vi kan flytte den mot høyre og venstre. Trykk på «+ New when» for å legge til en ny «isTapped»- kloss. For å flytte høna mot venstre må vi sette inn et negativt tall. Vi flytter høna nedover på tall-linja. Da bruker vi +/- knappen. Hvis du synes høna beveger seg for kort her hang kan du endre 25 til 30, eller et annet tall.
Test spillet. For å kjøre testen om igjen trykker du på snurrepila oppe til høyre ved siden av blyanten. Det har også kommet en grønn «Publish»-knapp oppe til venstre. Ikke bruk den enda. Vi kommer tilbake til den.
Nå skal vi lage bilene som høna må passe seg for. Gå til arbeidsbordet og lag en bil med plussknappen og emoji-tastaturet. Plasser bilen ute på høyre kant. Gi bilen navnet «Bil1». Test spillet. Kjører bilen?
Nå skal vi få bilen til å kjøre. Trykk på bilen og på bobla med «+ Add code. Vi vil at bilen skal starte å kjøre med en gang spillet starter. Trykk på «Game Starts».
Vi vil at bilen skal flytte seg over skjermen fra høyre mot venstre. Det er to måter å gjøre dette på enten med «Change X by» eller med «Move Forward». Det blir færre kodeklosser med den siste, men den første er kanskje lettere å forstå. Vi velger «Change X by» og setter inn tallet -1050. Det er omtrent så bred skjermen er. Test spillet.
Nå vil vi at bilen skal snu seg å kjøre tilbake. Bruk «Flip», «Change X by» og enda en «Flip». Test spillet.
Nå vil vi at bilen skal gjøre dette om og om igjen. Da bruker vi et triks som gjør at disse fire kodeklossene gjentas i det uendelige. Trykk nedenfor den siste «Flip»-klossen, da står det «Pick a block». Sveip helt til høyre og finn de blå klossene. Velg «Repeat Forever»
Nå skal vi flytte de oransje klossene inn i den blå kodeblokken. Pass på at de kommer i samme rekkefølge. Ta tak i den høyre enden der det er tre striper. Trekk først ut til høyre før du trekker klossen ned og inn i den blå blokka. Det dukker opp en svart strek som viser hvor klossen vil havne. Gjør dette med alle. For å få bedre plass kan du sveipe nedover slik at feltet med de tilgjengelige klossene skjules. Du kan også klippe og lime ved å holde og slippe, og så velge blant alternativene som dukker opp. Hvis du trekker klossen helt ut på det gule arbeidsbordet og så slipper, vil klossen bli slettet. Da må du lage en ny. Test spillet. Går bilen fram og tilbake hele tiden? Skjer det noe når bilen treffer høna?
Vi må kode hva som skal skje når bilen treffer høna. Da må vi bestemme oss for om det er høna eller bilen det skal skje noe med. Vi vil at høna flyttes tilbake til start for å gjøre et nytt forsøk. Da er det på høna at koden skal ligge. Gå inn i kodevinduet til høna. For å skjule Kodevinduet til andre figurer trykker du bare utenfor vinduet på det gule arbeidsbordet. Rull nedenfor de andre «When-blokkene». For å få bedre oversikt kan vi trykke på den grå haken som peker opp til venstre for navnet på kodeblokkene. Da lukkes kodeblokken, slik at det bare er «When»-klossen som synes. For å vise innholdet, trykker du på den samme haken som nå peker mot høyre. Legg til en ny «When. Bruk en «bumps»-kloss. Velg «Høne» i første boble. Trykk på andre boble og velg «Bil1».
Vi vil at høna skal flyttes tilbake til start. Velg «Set Position». Sett inn 500 for x og 150 for y. Det blir omtrent midt på skjermen litt over nedre kant. Test spillet.
Det er litt kjedelig at bilen hele tiden har samme fart. Det skal vi rette på nå. Gå inn i kodevinduet til bilen. Plasser deg over den første «Change X by»-klossen. Legg inn en «Set Speed»-kloss. Velg «Random»-klossen, og skriv inn 300 i første rute og 900 i andre rute. Nå velges en tilfeldig hastighet mellom 300 og 900 hver gang bilen starter fra høyre. Hvis du vil at hastigheten skal endres hver gang, både fra høyre og venstre, kopierer du hastighetsklossen og limer inn kopien over den andre «Change X by»-klossen (trykk-hold-og slipp). Test spillet.
Nå skal vi legge til flere biler men før det skal vi gjøre et lite triks som gjør kodingen raskere. Vi lager en egen pakke av de kodeklossene som vi har brukt på den første bilen. Da kan vi bruke den pakka direkte på de nye bilene. Gå inn i koden til bilen. Skjul innholdet i «Repeat Forever» ved å trykke på haken til venstre for «Repeat». Trykk nedenfor for å legge til en kloss. Trykk «New Block» i feltet for regnbueklossene. Gi klossen navnet «Kjør». Bekreft med grønn knapp. Nå har du fått en regnbuekloss som heter kjør. Legg den inn under «Repeat Forever». Nå trekker du «Repeat Forever» ned i «Kjør». Ta tak i høyre kant med de tre stripene, trekk først mot høyre og så ned. Test spillet.
Nå lager du to biler til med emoji. Du kan også lage tog med lokomotiv og vogner. Gi bilene navn. I stedet for å legge inn alle de tidligere kodeklossene trenger du bare å legge inn regnbueklossen «Kjør». Ulempen med å bruke «Kjør»-klossen er at alle kjøretøyene får samme regel. Hvis du legger inn er racerbil eller en hest, så vil du kanskje at de alltid skal gå fortere eller langsommere enn bilene. Da må du lage egne regler for dem med egne grenser for laveste og høyeste hastighet. Da er det raskest å kopiere hele «Repeat Forever», lime den inn i koden til flyet, og endre på tallene.
Nå må gå inn i koden til høna og lage en ny «bump»-kode for hver nye bil du legger til. Kopier den gamle «When bumps», rull ned, lim inn nederst , og endre hvilken bil høna kolliderer med. Du trenger ikke kopier på nytt for hver gang. Lim inn så mange gange du vil. Det blir etter hvert mange kodeblokker. Skjul innholdet i kodeblokker ved å trykke på haken til venstre for teksten. Hvis du vil se all koden for alle figurene i samme skjermbildet trykker du på symbolet med øye og linjer til høyre på det turkise feltet når du er i et kodevindu. For bare å se koden til den figuren du gikk inn på fra arbeidsbordet, trykker du på øyet.
Nå må vi finne på noe som viser at vi kom helskinnet over veien. Vi lager et mål. Legg til en emoji-maiskolbe (Food & Drink). Plasser figuren øverst på skjermen. Når høna når fram til maiskolben skal det dukke opp en stor pokal. Legg til en emoji-pokal (Activity). Plasser den midt på skjermen.
Vi vil at pokalen skal dukke opp når høna når fram til siden. Det første vi må gjøre er å gjøre pokalen usynlig når spillet starter. Legg til kode på pokalen som starter nå spillet starter. Bruk en grønn «Set Invisibility»-kloss, og sett ten til 100%. Legg til en ny «When»-kloss på pokalen. Den skal starte når høna treffer maiskolben. Da skal pokalen bli synlig (usynlighet 0%) og den skal bli mye større. Bruk en grønn «Set Size»-kloss, og skriv inn et tall Tallet angir prosent av normal størrelse. Prøv deg fra. Prøv å få pokalen til å blinke fem ganger («Repeat» ikke «Repeat Forever»). Test spillet. Hvis det er vanskelig å vinne kan du midlertidig flytte noen figurer nedenfor høna slik at du får testet uten å bruke for lang tid.
Vi vil legge til poengtelling. Legg til en tekst med vanlig tastatur. Skriv «Poeng:» Gi teksten navnet «Poengtekst». Lag en ny tekst-figur. Ikke skriv noe på denne bare godkjenne med grønn knapp. Når du er tilbake på arbeidsbordet kaller du denne for «Poengverdi». Flytt disse to tekstfigurene opp i venstre hjørne på arbeidsbordet. Den ene vises som «Poeng». Den andre vises som «Text». Trykker vi på den første ser vi at den heter «Poengtekst», mens den andre heter «Poengverdi».
Vi legger til kode på «Poengverdi». Legg til en ny «When». Den skal starte når spille starter. For å vise Poengverdi bruker vi en grønn «Set Text»-kloss. Pass på at det første feltet er valgt. Vi skal ikke skrive en tekst her. Vi skal vise verdien av en variabel. For å fjerne tastaturet trykker vi på det svarte kuleramme-symbolet ved siden av den grønne haken.
Nå finner vi de gule klossene. Det er et sett guffe klosser for hver figur i spillet. Vi skal bruke de som gjelder iPaden. Se etter iPad-symbolet over klossen. Det er det første settet. Velg den hvite «New Value»-klossen. Gi verdien navnet «Poeng».
For at programmet hele tiden skal vise den ferskeste verdien av «Poeng», må vi putte «Set Text»-klossen inn i en «Repeat Forever»-løkke.
Nå skal vi øke verdien av «Poeng» med 1 hver gang høna treffer maisen. Legg inn kode på «Poengverdi» som starter nå høna treffer maisen. Øk verdien av «Poeng» med en ved å bruke den gule «Increase Value»-klossen. Test. Legg til kode på høna som flytter høna tilbake til start når hun treffer maisen.
Vi må gjøre noe med pokalen. Pokalen skal vises når vi får 10 poeng. Legg til en ny «When»- kloss som starter når verdien av «Poeng» er 10. Bruk en rød «When»-kloss med likhetstegn lengst til høyre i samlingen. Kopier de to grønne klossene du brukte tidligere, inn i den nye «When»-blokken. Slett den gamle «When»-blokken som starter når høna treffer maisen. Prøv på egenhånd å stoppe biler og pilfunksjoner når maks poeng er oppnådd. Under testingen er det greit å sette makspoeng lavt for å spare tid.
Vi må gjøre noe med pokalen. Pokalen skal vises når vi får 10 poeng. Legg til en ny «When»-kloss som starter når verdien av «Poeng» er 10. Bruk en rød «When»-kloss med likhetstegn lengst til høyre i samlingen. Kopier de to grønne klossene du brukte tidligere, inn i den nye «When»- blokken. Slett den gamle «When»-blokken som starter når høna treffer maisen. Prøv på egenhånd å stoppe biler og pilfunksjoner når maks poeng er oppnådd. Under testingen er det greit å sette makspoeng lavt for å spare tid.
Legg til kode på «Tid-verdi» som starter når spillet starter. Bruk en gul «Set Value»-kloss og lag en ny verdi på iPaden som heter «Sekunder» med verdien 30. Bruk en evighetsløkke og skriv tidsverdien med svart farge. Vent ett sekund (1000 millisekunder) og reduser tidsverdien med en. Test programmet.
Legg til et tekst-objekt som viser «Game over» og som heter «Slutt». Det skal være usynlig når spillet starter. Når tiden er ute skal det vises midt på skjermen. Det skal ikke være mulig å flytte høna etter at spillet er slutt.
Nå skal vi lage en bakgrunn. For å tegne bakgrunn lager vi brede linjer som tegnes fra venstre mot høyre. Vi vil at høna skal starte på en grasbakke. Legg til et tekst-objekt der du skriver «Gress 1 (0-200) og som du gir navnet «Gress1». Legg til kode som starter når spillet starter, gjør teksten usynlig, og lager en grønn strek med en lilla «Draw a Trailer»-kloss. Farge grønn og bredde Legg til hastighet 100000. Sett posisjon til tallet midt i mellom 0 og 200, altså 100.
Nå skal vi lage en vei. Legg til et tekstobjekt der du skriver «Vei 1 (200-300)». Tallene viser mellom hvilke y-koordinater vi skal tegne veien. Vi skriver dem for lettere å holde oversikten. Veien skal tegnes fra y lik 200 til y lik 300. Gå tilbake til koden for gresset og kopier hele koden. Lim inn i koden for veien. Endre fargen. Bredden skal endres til 300-200 = 100. Y-posisjonen settes til tallet midt i mellom 200 og 300, altså 250. Du kan endre tekstobjektet ved å klikke på den hvite bobla øverst der teksten vises. Nå vises teksten like over tastaturet. Gjør endringer og bekreft med grønn hake til høyre.
Nå kan du legge til flere gresstriper, veier og elver. Lag tekstobjekter, kopier koden, endre farge, bredde og y-posisjon.
Legg til flere funksjoner som du finner på selv. Hvis du vil endre på hvordan koden starter må du legge til nye «When»-klosser, kopiere inn koden fra de gamle og så slette de gamle. Du kan også legge inn lydeffekter og andre visuelle effekter. Regnbue-klossene inneholder ferdige kodeblokker.
For å publisere trykker du på den grønne «Publish»-knappen når du er i spill-visning. Hvis du vil slette det du har lastet opp går du til hjem-skjermen, trykker på smilefjeset og velger «Published» fra linjen øverst på skjermen. Start spillet. Trykk på knappen med de tre hvite prikkene. Velg delete fra menyen.
Du kan få mye hjelp ved å følge de innebyggede videoveiledningene som ligger på hjemskjermen når du trykker på smilefjeset.
Videoene kan du maksimere, pause og spole, samtidig som du selv gjør kodingen på skjermen.

skolekoding.no
Stein Olav Kivle