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.8 KiB
81 lines
4.8 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-24T21:47:14+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "sk"
|
|
}
|
|
-->
|
|
# Zadanie: Preskúmajte API Canvas
|
|
|
|
## Ciele učenia
|
|
|
|
Splnením tohto zadania preukážete svoje pochopenie základov API Canvas a využijete kreatívne riešenie problémov na vytvorenie vizuálnych prvkov pomocou JavaScriptu a HTML5 canvas.
|
|
|
|
## Pokyny
|
|
|
|
Vyberte si jeden aspekt API Canvas, ktorý vás zaujíma, a vytvorte okolo neho pútavý vizuálny projekt. Toto zadanie vás povzbudzuje k experimentovaniu s kresliacimi schopnosťami, ktoré ste sa naučili, a k vytvoreniu niečoho jedinečného.
|
|
|
|
### Nápady na projekty pre inšpiráciu
|
|
|
|
**Geometrické vzory:**
|
|
- **Vytvorte** galaxiu animovaných blikajúcich hviezd pomocou náhodného umiestnenia
|
|
- **Navrhnite** zaujímavú textúru pomocou opakujúcich sa geometrických tvarov
|
|
- **Postavte** kaleidoskopický efekt s rotujúcimi, farebnými vzormi
|
|
|
|
**Interaktívne prvky:**
|
|
- **Vyvinúť** kresliaci nástroj, ktorý reaguje na pohyby myši
|
|
- **Implementovať** tvary, ktoré menia farbu po kliknutí
|
|
- **Navrhnúť** jednoduchú animáciu s pohybujúcimi sa prvkami
|
|
|
|
**Grafika pre hry:**
|
|
- **Vytvorte** posúvajúce sa pozadie pre vesmírnu hru
|
|
- **Postavte** časticové efekty ako výbuchy alebo magické kúzla
|
|
- **Vytvorte** animované sprite s viacerými snímkami
|
|
|
|
### Pokyny pre vývoj
|
|
|
|
**Výskum a inšpirácia:**
|
|
- **Prehliadajte** CodePen pre kreatívne príklady canvas (na inšpiráciu, nie kopírovanie)
|
|
- **Študujte** [dokumentáciu API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) pre ďalšie metódy
|
|
- **Experimentujte** s rôznymi kresliacimi funkciami, farbami a animáciami
|
|
|
|
**Technické požiadavky:**
|
|
- **Použite** správne nastavenie canvas s `getContext('2d')`
|
|
- **Zahrňte** zmysluplné komentáre vysvetľujúce váš prístup
|
|
- **Testujte** svoj kód dôkladne, aby ste sa uistili, že funguje bez chýb
|
|
- **Použite** modernú syntax JavaScriptu (const/let, arrow functions)
|
|
|
|
**Kreatívny prejav:**
|
|
- **Zamerajte sa** na jednu funkciu API Canvas, ale preskúmajte ju do hĺbky
|
|
- **Pridajte** svoj vlastný kreatívny nádych, aby bol projekt osobný
|
|
- **Zvážte**, ako by vaše dielo mohlo byť súčasťou väčšej aplikácie
|
|
|
|
### Pokyny na odovzdanie
|
|
|
|
Odovzdajte svoj hotový projekt ako jeden HTML súbor s vloženým CSS a JavaScriptom alebo ako samostatné súbory v priečinku. Zahrňte krátky komentár, ktorý vysvetľuje vaše kreatívne rozhodnutia a funkcie API Canvas, ktoré ste preskúmali.
|
|
|
|
## Hodnotiace kritériá
|
|
|
|
| Kritérium | Vynikajúce | Dostatočné | Potrebné zlepšenie |
|
|
|-----------|------------|------------|--------------------|
|
|
| **Technická implementácia** | API Canvas použité kreatívne s viacerými funkciami, kód funguje bezchybne, použitá moderná syntax JavaScriptu | API Canvas použité správne, kód funguje s drobnými problémami, základná implementácia | API Canvas pokusne použité, ale kód obsahuje chyby alebo nefunguje |
|
|
| **Kreativita a dizajn** | Veľmi originálny koncept s vylešteným vizuálnym vzhľadom, preukazuje hlboké preskúmanie zvolenej funkcie API Canvas | Dobré využitie funkcií API Canvas s niektorými kreatívnymi prvkami, solídny vizuálny výsledok | Základná implementácia s minimálnou kreativitou alebo vizuálnou príťažlivosťou |
|
|
| **Kvalita kódu** | Dobre organizovaný, komentovaný kód podľa najlepších praktík, efektívne algoritmy | Čistý kód s niekoľkými komentármi, dodržiava základné štandardy kódovania | Kód postráda organizáciu, minimálne komentáre, neefektívna implementácia |
|
|
|
|
## Otázky na zamyslenie
|
|
|
|
Po dokončení projektu zvážte tieto otázky:
|
|
|
|
1. **Akú funkciu API Canvas ste si vybrali a prečo?**
|
|
2. **Aké výzvy ste stretli pri tvorbe projektu?**
|
|
3. **Ako by ste mohli rozšíriť tento projekt na väčšiu aplikáciu alebo hru?**
|
|
4. **Aké ďalšie funkcie API Canvas by ste chceli preskúmať nabudúce?**
|
|
|
|
> 💡 **Tip:** Začnite jednoducho a postupne pridávajte zložitosť. Dobre vykonaný jednoduchý projekt je lepší ako príliš ambiciózny projekt, ktorý nefunguje správne!
|
|
|
|
---
|
|
|
|
**Zrieknutie sa zodpovednosti**:
|
|
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu. |