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-24T21:10:12+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "cs"
|
|
}
|
|
-->
|
|
# Zadání: Prozkoumejte Canvas API
|
|
|
|
## Cíle učení
|
|
|
|
Splněním tohoto úkolu prokážete své porozumění základům Canvas API a využijete kreativní řešení problémů k vytvoření vizuálních prvků pomocí JavaScriptu a HTML5 canvas.
|
|
|
|
## Pokyny
|
|
|
|
Vyberte si jeden aspekt Canvas API, který vás zajímá, a vytvořte kolem něj poutavý vizuální projekt. Tento úkol vás vybízí k experimentování s kreslícími schopnostmi, které jste se naučili, a k vytvoření něčeho jedinečného.
|
|
|
|
### Nápady na projekty pro inspiraci
|
|
|
|
**Geometrické vzory:**
|
|
- **Vytvořte** galaxii animovaných blikajících hvězd pomocí náhodného umístění
|
|
- **Navrhněte** zajímavou texturu pomocí opakovaných geometrických tvarů
|
|
- **Postavte** kaleidoskopický efekt s rotujícími, barevnými vzory
|
|
|
|
**Interaktivní prvky:**
|
|
- **Vyviněte** kreslící nástroj, který reaguje na pohyby myši
|
|
- **Implementujte** tvary, které mění barvu při kliknutí
|
|
- **Navrhněte** jednoduchou animaci s pohybujícími se prvky
|
|
|
|
**Grafika pro hry:**
|
|
- **Vytvořte** posouvající se pozadí pro vesmírnou hru
|
|
- **Postavte** částicové efekty jako exploze nebo magické kouzla
|
|
- **Vytvořte** animované sprity s více snímky
|
|
|
|
### Pokyny pro vývoj
|
|
|
|
**Výzkum a inspirace:**
|
|
- **Prohlédněte si** CodePen pro kreativní příklady canvasu (pro inspiraci, ne kopírování)
|
|
- **Prostudujte** [dokumentaci Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) pro další metody
|
|
- **Experimentujte** s různými kreslícími funkcemi, barvami a animacemi
|
|
|
|
**Technické požadavky:**
|
|
- **Použijte** správné nastavení canvasu s `getContext('2d')`
|
|
- **Zahrňte** smysluplné komentáře vysvětlující váš přístup
|
|
- **Otestujte** svůj kód důkladně, aby běžel bez chyb
|
|
- **Použijte** moderní syntaxi JavaScriptu (const/let, arrow functions)
|
|
|
|
**Kreativní vyjádření:**
|
|
- **Zaměřte se** na jednu funkci Canvas API, ale prozkoumejte ji do hloubky
|
|
- **Přidejte** svůj vlastní kreativní prvek, aby byl projekt osobitý
|
|
- **Zvažte**, jak by vaše dílo mohlo být součástí větší aplikace
|
|
|
|
### Pokyny k odevzdání
|
|
|
|
Odevzdejte svůj hotový projekt jako jeden HTML soubor s vloženým CSS a JavaScriptem nebo jako samostatné soubory ve složce. Přiložte krátký komentář vysvětlující vaše kreativní volby a funkce Canvas API, které jste prozkoumali.
|
|
|
|
## Hodnotící kritéria
|
|
|
|
| Kritéria | Vynikající | Přiměřené | Vyžaduje zlepšení |
|
|
|----------|-----------|-----------|-------------------|
|
|
| **Technická implementace** | Canvas API použito kreativně s více funkcemi, kód běží bezchybně, použita moderní syntaxe JavaScriptu | Canvas API použito správně, kód běží s drobnými problémy, základní implementace | Canvas API bylo použito, ale kód obsahuje chyby nebo nefunguje |
|
|
| **Kreativita a design** | Vysoce originální koncept s propracovaným vizuálním vzhledem, prokazuje hluboké prozkoumání vybrané funkce Canvas | Dobré využití funkcí Canvas s některými kreativními prvky, solidní vizuální výsledek | Základní implementace s minimální kreativitou nebo vizuální přitažlivostí |
|
|
| **Kvalita kódu** | Dobře organizovaný, komentovaný kód podle nejlepších postupů, efektivní algoritmy | Čistý kód s některými komentáři, dodržuje základní standardy kódování | Kód postrádá organizaci, minimální komentáře, neefektivní implementace |
|
|
|
|
## Otázky k zamyšlení
|
|
|
|
Po dokončení projektu zvažte tyto otázky:
|
|
|
|
1. **Jakou funkci Canvas API jste si vybrali a proč?**
|
|
2. **S jakými výzvami jste se při tvorbě projektu setkali?**
|
|
3. **Jak byste mohli tento projekt rozšířit na větší aplikaci nebo hru?**
|
|
4. **Jaké další funkce Canvas API byste chtěli prozkoumat příště?**
|
|
|
|
> 💡 **Tip**: Začněte jednoduše a postupně přidávejte složitost. Dobře provedený jednoduchý projekt je lepší než příliš ambiciózní projekt, který nefunguje správně!
|
|
|
|
---
|
|
|
|
**Prohlášení**:
|
|
Tento dokument byl přeložen pomocí služby AI pro překlad [Co-op Translator](https://github.com/Azure/co-op-translator). Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu. |