Om oppgaven

I denne oppgaven skal vi bruke JavaScript til å få figurer vi å bevege seg. Vi skal altså lære å animere ved hjelp av JavaScript og noe som heter Canvas. Under ser du animasjonen vi kommer til å lage.

Denne oppgaven er den første i en liten serie av andre partikkel-oppgaver, derfor er det viktig å forstå det som skjer i denne oppgaven.

Oppgaven passer til:

Fag: Matematikk, Kunst og håndverk, Programmering, IT1, IT2

Anbefalte trinn: 7. trinn - VG3

Tema: JavaScript, HTML, Web, Canvas, Objektorientering, Funksjoner

Tidsbruk: Dobbeltime eller mer.

Kompetansemål

Matematikk, 6. trinn: bruke variabler, løkker, vilkår og funksjoner i programmering til å utforske geometriske figurer og mønster
Kunst og håndverk, 7. trinn: bruke digitale verktøy til å planlegge og presentere prosesser og produkter
Programmering, 10. trinn: bruke flere programmeringsspråk, deriblant minst ett som er tekstbasert
Programmering, 10. trinn: bruke grunnleggende prinsipper i programmering, slik som variabler, løkker, vilkår og funksjoner, og reflektere over bruken av disse
IT1, VG2: designe og utvikle nettsider ved hjelp av markeringsspråk og programmering
IT1, VG2: lage og bruke egne og andres funksjoner med og uten parametre og returverdier
IT1, VG2: lese, strukturere, analysere og kommentere programkode
IT2, VG3: lage objektorienterte programmer som benytter klasser med metoder

Forslag til læringsmål

Eleven kan tegne et kvadrat ved hjelp av canvas
Eleven kan bruke HTML, CSS og JavaScript sammen til å vise kvadratet
Eleven kan bruke JavaScript til å lage et objekt
Eleven kan bruke JavaScript til å bevege et objekt horisontalt, vertikalt og diagonalt ved hjelp av canvas
Eleven kan bruke JavaScript til å gjenta en hendelse

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, for eksempel ved å gjøre en eller flere av variasjonene nedenfor.

Forutsetninger og utstyr

Forutsetninger: Bør ha gjort JS: Grunnleggende JavaScript og ha kjennskap til grunnleggende HTML og CSS.
Utstyr: Datamaskiner med internett og tekstbehandlingsverktøy.

Fremgangsmåte

Her kommer tips, erfaring og utfordringer til de ulike stegene i den faktiske oppgaven. Klikk her for å se oppgaveteksten.

Generelt

Bruk forklaringene under hvert steg i oppgaven. Disse forklarer de sentrale temaene og begrepene som blir brukt i oppgaven.
Pass på at syntaxen i JavaScript blir riktig underveis i oppgaven.

Variasjoner

Få partikkelet til å bevege seg på andre måter enn bare diagonalt.
- Prøve å få partikkelet til å gå rett frem
- Få partikkelet til å gå rett ned
- Få partikkelet til å gå baklengs
Får du til at partikkelet bytter til en tilfeldig farge hver gang den bytter posisjon?
Legg til flere partikler.
Bruk egen kreativitet til å lage en ny partikkel-animasjon

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!

Rapporter et problem

Gå til forumet

Vis koden og fiks selv