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
5.0 KiB
81 lines
5.0 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-24T20:31:41+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "hu"
|
|
}
|
|
-->
|
|
# Feladat: Fedezd fel a Canvas API-t
|
|
|
|
## Tanulási célok
|
|
|
|
A feladat teljesítésével bizonyíthatod a Canvas API alapjainak megértését, és kreatív problémamegoldást alkalmazhatsz vizuális elemek létrehozására JavaScript és HTML5 canvas segítségével.
|
|
|
|
## Útmutató
|
|
|
|
Válassz ki egy Canvas API aspektust, amely érdekel, és készíts köré egy izgalmas vizuális projektet. Ez a feladat arra ösztönöz, hogy kísérletezz a tanult rajzolási képességekkel, miközben valami egyedit alkotsz.
|
|
|
|
### Projektötletek inspirációként
|
|
|
|
**Geometriai minták:**
|
|
- **Hozz létre** egy galaxist animált, pislogó csillagokkal véletlenszerű pozíciókban
|
|
- **Tervezd meg** egy érdekes textúrát ismétlődő geometriai formák segítségével
|
|
- **Építs** kaleidoszkóp hatást forgó, színes mintákkal
|
|
|
|
**Interaktív elemek:**
|
|
- **Fejlessz** egy rajzeszközt, amely reagál az egér mozgására
|
|
- **Valósíts meg** olyan formákat, amelyek színt váltanak kattintásra
|
|
- **Tervezd meg** egy egyszerű animációs ciklust mozgó elemekkel
|
|
|
|
**Játékhoz kapcsolódó grafikák:**
|
|
- **Készíts** egy görgethető hátteret egy űrjátékhoz
|
|
- **Építs** részecske-effekteket, például robbanásokat vagy varázslatos varázslatokat
|
|
- **Hozz létre** animált sprite-okat több képkockával
|
|
|
|
### Fejlesztési irányelvek
|
|
|
|
**Kutatás és inspiráció:**
|
|
- **Böngészd** a CodePen-t kreatív canvas példákért (inspirációért, nem másolásért)
|
|
- **Tanulmányozd** a [Canvas API dokumentációját](https://developer.mozilla.org/docs/Web/API/Canvas_API) további módszerekért
|
|
- **Kísérletezz** különböző rajzolási funkciókkal, színekkel és animációkkal
|
|
|
|
**Technikai követelmények:**
|
|
- **Használj** megfelelő canvas beállítást `getContext('2d')` segítségével
|
|
- **Tartalmazzon** értelmes kommenteket, amelyek magyarázzák a megközelítésedet
|
|
- **Teszteld** alaposan a kódodat, hogy hibamentesen fusson
|
|
- **Alkalmazd** a modern JavaScript szintaxist (const/let, nyílfüggvények)
|
|
|
|
**Kreatív kifejezés:**
|
|
- **Koncentrálj** egy Canvas API funkcióra, de mélyen fedezd fel
|
|
- **Adj hozzá** saját kreatív csavart, hogy a projekt személyes legyen
|
|
- **Fontold meg**, hogyan lehetne az alkotásod egy nagyobb alkalmazás része
|
|
|
|
### Beküldési irányelvek
|
|
|
|
Küldd be a kész projektedet egyetlen HTML fájlként beágyazott CSS-sel és JavaScript-tel, vagy külön fájlokként egy mappában. Tartalmazz egy rövid kommentet, amely elmagyarázza a kreatív választásaidat és a Canvas API funkciókat, amelyeket felfedeztél.
|
|
|
|
## Értékelési szempontok
|
|
|
|
| Kritérium | Kiemelkedő | Megfelelő | Fejlesztésre szorul |
|
|
|----------|-----------|----------|-------------------|
|
|
| **Technikai megvalósítás** | A Canvas API kreatívan használva több funkcióval, a kód hibátlanul fut, modern JavaScript szintaxis alkalmazva | A Canvas API helyesen használva, a kód kisebb hibákkal fut, alapvető megvalósítás | A Canvas API megkísérelve, de a kód hibás vagy nem fut |
|
|
| **Kreativitás és dizájn** | Nagyon eredeti koncepció, kifinomult vizuális megjelenés, mély felfedezés a választott Canvas funkcióval | Jó Canvas funkciók használata némi kreatív elemmel, szilárd vizuális eredmény | Alapvető megvalósítás minimális kreativitással vagy vizuális vonzerővel |
|
|
| **Kódminőség** | Jól szervezett, kommentált kód, amely követi a legjobb gyakorlatokat, hatékony algoritmusok | Tiszta kód néhány kommenttel, követi az alapvető kódolási szabványokat | A kód rendezetlen, minimális kommentek, nem hatékony megvalósítás |
|
|
|
|
## Reflektáló kérdések
|
|
|
|
A projekt befejezése után gondold át ezeket a kérdéseket:
|
|
|
|
1. **Melyik Canvas API funkciót választottad, és miért?**
|
|
2. **Milyen kihívásokkal szembesültél a projekt építése során?**
|
|
3. **Hogyan lehetne ezt a projektet kiterjeszteni egy nagyobb alkalmazásra vagy játékra?**
|
|
4. **Milyen más Canvas API funkciókat szeretnél legközelebb felfedezni?**
|
|
|
|
> 💡 **Profi tipp**: Kezdd egyszerűen, és fokozatosan adj hozzá komplexitást. Egy jól kivitelezett egyszerű projekt jobb, mint egy túlságosan ambiciózus projekt, amely nem működik megfelelően!
|
|
|
|
---
|
|
|
|
**Felelősség kizárása**:
|
|
Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet. |