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.7 KiB
81 lines
4.7 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-25T00:12:19+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "hr"
|
|
}
|
|
-->
|
|
# Zadatak: Istražite Canvas API
|
|
|
|
## Ciljevi učenja
|
|
|
|
Dovršavanjem ovog zadatka pokazat ćete svoje razumijevanje osnova Canvas API-ja i primijeniti kreativno rješavanje problema kako biste izradili vizualne elemente koristeći JavaScript i HTML5 canvas.
|
|
|
|
## Upute
|
|
|
|
Odaberite jedan aspekt Canvas API-ja koji vas zanima i kreirajte zanimljiv vizualni projekt oko njega. Ovaj zadatak potiče vas da eksperimentirate s mogućnostima crtanja koje ste naučili dok stvarate nešto jedinstveno.
|
|
|
|
### Ideje za projekt koje vas mogu inspirirati
|
|
|
|
**Geometrijski uzorci:**
|
|
- **Kreirajte** galaksiju animiranih svjetlucavih zvijezda koristeći nasumično pozicioniranje
|
|
- **Dizajnirajte** zanimljivu teksturu koristeći ponavljajuće geometrijske oblike
|
|
- **Izradite** kaleidoskopski efekt s rotirajućim, šarenim uzorcima
|
|
|
|
**Interaktivni elementi:**
|
|
- **Razvijte** alat za crtanje koji reagira na pokrete miša
|
|
- **Implementirajte** oblike koji mijenjaju boju kada se kliknu
|
|
- **Dizajnirajte** jednostavnu animacijsku petlju s pokretnim elementima
|
|
|
|
**Grafika povezana s igrama:**
|
|
- **Izradite** pomičnu pozadinu za svemirsku igru
|
|
- **Kreirajte** čestične efekte poput eksplozija ili magičnih čarolija
|
|
- **Napravite** animirane spriteove s više okvira
|
|
|
|
### Smjernice za razvoj
|
|
|
|
**Istraživanje i inspiracija:**
|
|
- **Pregledajte** CodePen za kreativne primjere canvas-a (za inspiraciju, ne kopiranje)
|
|
- **Proučite** [Canvas API dokumentaciju](https://developer.mozilla.org/docs/Web/API/Canvas_API) za dodatne metode
|
|
- **Eksperimentirajte** s različitim funkcijama crtanja, bojama i animacijama
|
|
|
|
**Tehnički zahtjevi:**
|
|
- **Koristite** pravilnu postavku canvas-a s `getContext('2d')`
|
|
- **Uključite** značajne komentare koji objašnjavaju vaš pristup
|
|
- **Testirajte** svoj kod temeljito kako biste osigurali da radi bez grešaka
|
|
- **Primijenite** modernu JavaScript sintaksu (const/let, arrow funkcije)
|
|
|
|
**Kreativni izraz:**
|
|
- **Usredotočite se** na jednu značajku Canvas API-ja, ali istražite je detaljno
|
|
- **Dodajte** vlastiti kreativni zaokret kako biste projekt učinili osobnim
|
|
- **Razmislite** kako bi vaše djelo moglo biti dio veće aplikacije
|
|
|
|
### Smjernice za predaju
|
|
|
|
Predajte dovršeni projekt kao jednu HTML datoteku s ugrađenim CSS-om i JavaScriptom ili kao zasebne datoteke u mapi. Uključite kratki komentar koji objašnjava vaše kreativne izbore i značajke Canvas API-ja koje ste istražili.
|
|
|
|
## Rubrika
|
|
|
|
| Kriterij | Izvrsno | Zadovoljavajuće | Potrebno poboljšanje |
|
|
|----------|----------|-----------------|----------------------|
|
|
| **Tehnička implementacija** | Canvas API korišten kreativno s više značajki, kod radi besprijekorno, primijenjena moderna JavaScript sintaksa | Canvas API pravilno korišten, kod radi s manjim problemima, osnovna implementacija | Pokušaj korištenja Canvas API-ja, ali kod ima greške ili ne radi |
|
|
| **Kreativnost i dizajn** | Vrlo originalan koncept s dotjeranim vizualnim izgledom, pokazuje duboko istraživanje odabrane značajke Canvas-a | Dobro korištenje značajki Canvas-a s nekim kreativnim elementima, solidan vizualni rezultat | Osnovna implementacija s minimalnom kreativnošću ili vizualnim izgledom |
|
|
| **Kvaliteta koda** | Dobro organiziran, komentiran kod koji slijedi najbolje prakse, učinkoviti algoritmi | Čist kod s nekim komentarima, slijedi osnovne standarde kodiranja | Kod nedostaje organizacije, minimalni komentari, neučinkovita implementacija |
|
|
|
|
## Pitanja za razmišljanje
|
|
|
|
Nakon dovršetka projekta, razmislite o sljedećim pitanjima:
|
|
|
|
1. **Koju značajku Canvas API-ja ste odabrali i zašto?**
|
|
2. **S kakvim ste se izazovima susreli tijekom izrade projekta?**
|
|
3. **Kako biste mogli proširiti ovaj projekt u veću aplikaciju ili igru?**
|
|
4. **Koje druge značajke Canvas API-ja biste željeli istražiti sljedeće?**
|
|
|
|
> 💡 **Savjet**: Započnite jednostavno i postupno dodajte složenost. Dobro izveden jednostavan projekt bolji je od preambicioznog projekta koji ne funkcionira ispravno!
|
|
|
|
---
|
|
|
|
**Izjava o odricanju odgovornosti**:
|
|
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda. |