You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
4.6 KiB
81 lines
4.6 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-23T22:36:23+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "no"
|
|
}
|
|
-->
|
|
# Oppgave: Utforsk Canvas API
|
|
|
|
## Læringsmål
|
|
|
|
Ved å fullføre denne oppgaven vil du demonstrere din forståelse av grunnleggende konsepter i Canvas API og bruke kreativ problemløsning for å lage visuelle elementer ved hjelp av JavaScript og HTML5 canvas.
|
|
|
|
## Instruksjoner
|
|
|
|
Velg ett aspekt ved Canvas API som interesserer deg, og lag et engasjerende visuelt prosjekt rundt det. Denne oppgaven oppmuntrer deg til å eksperimentere med tegnefunksjonene du har lært, samtidig som du skaper noe unikt.
|
|
|
|
### Prosjektideer for inspirasjon
|
|
|
|
**Geometriske mønstre:**
|
|
- **Lag** en galakse med animerte blinkende stjerner ved hjelp av tilfeldig posisjonering
|
|
- **Design** en interessant tekstur ved å bruke gjentatte geometriske former
|
|
- **Bygg** en kaleidoskopeffekt med roterende, fargerike mønstre
|
|
|
|
**Interaktive elementer:**
|
|
- **Utvikle** et tegneverktøy som reagerer på musebevegelser
|
|
- **Implementer** former som endrer farge når de klikkes på
|
|
- **Design** en enkel animasjonsløype med bevegelige elementer
|
|
|
|
**Spillrelaterte grafikk:**
|
|
- **Lag** en rullende bakgrunn for et romspill
|
|
- **Bygg** partikkeffekter som eksplosjoner eller magiske besvergelser
|
|
- **Lag** animerte sprites med flere rammer
|
|
|
|
### Retningslinjer for utvikling
|
|
|
|
**Forskning og inspirasjon:**
|
|
- **Utforsk** CodePen for kreative eksempler på canvas (for inspirasjon, ikke kopiering)
|
|
- **Studer** [Canvas API-dokumentasjonen](https://developer.mozilla.org/docs/Web/API/Canvas_API) for flere metoder
|
|
- **Eksperimenter** med ulike tegnefunksjoner, farger og animasjoner
|
|
|
|
**Tekniske krav:**
|
|
- **Bruk** riktig oppsett for canvas med `getContext('2d')`
|
|
- **Inkluder** meningsfulle kommentarer som forklarer tilnærmingen din
|
|
- **Test** koden din grundig for å sikre at den kjører uten feil
|
|
- **Bruk** moderne JavaScript-syntaks (const/let, pilfunksjoner)
|
|
|
|
**Kreativ utfoldelse:**
|
|
- **Fokuser** på én funksjon i Canvas API, men utforsk den grundig
|
|
- **Legg til** din egen kreative vri for å gjøre prosjektet personlig
|
|
- **Tenk over** hvordan kreasjonen din kan være en del av en større applikasjon
|
|
|
|
### Retningslinjer for innlevering
|
|
|
|
Send inn det ferdige prosjektet som en enkelt HTML-fil med innebygd CSS og JavaScript, eller som separate filer i en mappe. Inkluder en kort kommentar som forklarer dine kreative valg og Canvas API-funksjonene du har utforsket.
|
|
|
|
## Vurderingskriterier
|
|
|
|
| Kriterier | Fremragende | Tilfredsstillende | Trenger forbedring |
|
|
|-----------|-------------|-------------------|--------------------|
|
|
| **Teknisk implementering** | Canvas API brukt kreativt med flere funksjoner, koden kjører feilfritt, moderne JavaScript-syntaks brukt | Canvas API brukt korrekt, koden kjører med mindre problemer, grunnleggende implementering | Forsøk på å bruke Canvas API, men koden har feil eller fungerer ikke |
|
|
| **Kreativitet og design** | Svært originalt konsept med polert visuell appell, demonstrerer dyp utforskning av valgt Canvas-funksjon | God bruk av Canvas-funksjoner med noen kreative elementer, solid visuelt resultat | Grunnleggende implementering med minimal kreativitet eller visuell appell |
|
|
| **Kodekvalitet** | Velorganisert, kommentert kode som følger beste praksis, effektive algoritmer | Ren kode med noen kommentarer, følger grunnleggende kodestandarder | Koden mangler organisering, minimale kommentarer, ineffektiv implementering |
|
|
|
|
## Refleksjonsspørsmål
|
|
|
|
Etter å ha fullført prosjektet, vurder disse spørsmålene:
|
|
|
|
1. **Hvilken Canvas API-funksjon valgte du, og hvorfor?**
|
|
2. **Hvilke utfordringer møtte du under byggingen av prosjektet?**
|
|
3. **Hvordan kan du utvide dette prosjektet til en større applikasjon eller et spill?**
|
|
4. **Hvilke andre Canvas API-funksjoner ønsker du å utforske neste gang?**
|
|
|
|
> 💡 **Profftips**: Start enkelt og legg gradvis til kompleksitet. Et godt gjennomført enkelt prosjekt er bedre enn et altfor ambisiøst prosjekt som ikke fungerer ordentlig!
|
|
|
|
---
|
|
|
|
**Ansvarsfraskrivelse**:
|
|
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på dets opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. |