Om oppgaven

Denne oppgaven viser deg hvordan du kan lage et spill med JavaScript og dele det med vennene dine. Spillet kalles Trykkomania fordi det handler om å trykke på en ball flest mulig ganger før tiden renner ut.

Oppgaven henter ideer fra utvikling av web-applikasjoner med bibliotek som React og Mithril, der elementer i spillet lages som inviduelle komponenter. Komponentene ligner på objektorientert programmering, men bruker teknikken "closures" (funksjoner som husker konteksten de ble laget i).

Oppgaven passer til:

Fag: Matematikk, Programmering, Informasjonsteknologi 2

Trinn: 4. trinn - VG3

Tema: JavaScript, web, variabler, closures, objektsorientering, objekter, funksjoner, HTML, CSS

Nivå: Nybegynner

Tidsbruk: Dobbeltime eller mer.

Forslag til læringsmål

Eleven kan bruke enkle matematiske uttryksmåter for å øke eller minke variabler i JavaScript.
Eleven kan bruke JavaScript til å tegne en sirkel.
Eleven kan plassere et element i på en nettside ved hjelp av koordinater på x- og y-aksen.
Eleven kan skrive kommentarer til sin egen kode i JavaScript.
Eleven kan bruke variabler, løkker og funksjoner til å manipulere elementer i JavaScript.
Eleven kan videreutvikle sitt ferdige produkt ved hjelp av egenprodusert JavaScript-kode.

Forslag til vurderingskriterier

Eleven oppnår middels måloppnåelse ved å fullføre oppgaven.
Eleven oppnår høy måloppnåelse ved å videreutvikle egen kode basert på oppgaven.

Forutsetninger og utstyr

Forutsetninger: Oppgaven er kun javascript, men det lønner seg å ha kjennskap til HTML og CSS.
Utstyr: Datamaskin med internett.

Generelt i oppgaven

Elevene bør ha god og oversiktelig kode sånn at det er enkelt å finne feil. Dette oppnås ved å kommentere koden, samt bruke inntrykk og mellomrom mellom funksjoner og annen kode.
Elevene må passe på at variabelnavn og tegnsetting er riktig.

Steg 2: Lage en ball

Elevene kjenner kanskje igjen CSS-elementer når de skal lage funksjonen Ball(). Her vises det at HTML og CSS kan programmeres gjennom JavaScript.

Steg 3: Flytte ballen

Elevene kan lure på hvor de skal legge til koden i dette steget, den skal legges til i funksjonen Ball() fordi el er en lokal varibel til funksjonen Ball().

Steg 4: Flytte ballen med en funksjon

Elevene kan være forvirret hva x og y er i denne oppgaven så her er det viktig å poengtere at dette er verdier som blir sendt inn senere i programmet, som vi ser rett før Steg 5.

Steg 5: Velg en tilfeldig plassering

Her ser vi at vi kan legge til strenger bak tall som er blitt regnet ut: Math.random() * 100 + '%';. Dette kan være svært nyttig for elevene å vite i senere oppgaver.
Elever kan lure på hva Math.random() er. Og ved å si Math.random() så kaller vi på et bibliotek (Math), altså en innebygget JavaScript-fil, som inneholder funksjonen random().