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.9 KiB
81 lines
4.9 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-22T23:38:57+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "it"
|
|
}
|
|
-->
|
|
# Compito: Esplora l'API Canvas
|
|
|
|
## Obiettivi di apprendimento
|
|
|
|
Completando questo compito, dimostrerai la tua comprensione dei fondamenti dell'API Canvas e applicherai il problem-solving creativo per costruire elementi visivi utilizzando JavaScript e il canvas di HTML5.
|
|
|
|
## Istruzioni
|
|
|
|
Scegli un aspetto dell'API Canvas che ti interessa e crea un progetto visivo coinvolgente attorno ad esso. Questo compito ti incoraggia a sperimentare con le capacità di disegno che hai appreso, creando qualcosa di unico e personale.
|
|
|
|
### Idee per il progetto per ispirarti
|
|
|
|
**Pattern geometrici:**
|
|
- **Crea** una galassia di stelle scintillanti animate con posizionamento casuale
|
|
- **Progetta** una texture interessante utilizzando forme geometriche ripetute
|
|
- **Costruisci** un effetto caleidoscopio con pattern colorati e rotanti
|
|
|
|
**Elementi interattivi:**
|
|
- **Sviluppa** uno strumento di disegno che risponde ai movimenti del mouse
|
|
- **Implementa** forme che cambiano colore quando vengono cliccate
|
|
- **Progetta** un semplice ciclo di animazione con elementi in movimento
|
|
|
|
**Grafica per giochi:**
|
|
- **Realizza** uno sfondo scorrevole per un gioco spaziale
|
|
- **Costruisci** effetti particellari come esplosioni o incantesimi magici
|
|
- **Crea** sprite animati con più frame
|
|
|
|
### Linee guida per lo sviluppo
|
|
|
|
**Ricerca e ispirazione:**
|
|
- **Consulta** CodePen per esempi creativi di canvas (per ispirazione, non per copiare)
|
|
- **Studia** la [documentazione dell'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) per metodi aggiuntivi
|
|
- **Sperimenta** con diverse funzioni di disegno, colori e animazioni
|
|
|
|
**Requisiti tecnici:**
|
|
- **Utilizza** una configurazione corretta del canvas con `getContext('2d')`
|
|
- **Includi** commenti significativi che spiegano il tuo approccio
|
|
- **Testa** accuratamente il tuo codice per assicurarti che funzioni senza errori
|
|
- **Applica** la sintassi moderna di JavaScript (const/let, funzioni freccia)
|
|
|
|
**Espressione creativa:**
|
|
- **Concentrati** su una funzionalità dell'API Canvas ma esplorala in profondità
|
|
- **Aggiungi** un tocco creativo personale per rendere il progetto unico
|
|
- **Considera** come la tua creazione potrebbe essere parte di un'applicazione più grande
|
|
|
|
### Linee guida per la consegna
|
|
|
|
Invia il tuo progetto completato come un singolo file HTML con CSS e JavaScript incorporati, oppure come file separati in una cartella. Includi un breve commento che spieghi le tue scelte creative e le funzionalità dell'API Canvas che hai esplorato.
|
|
|
|
## Rubrica
|
|
|
|
| Criteri | Esemplare | Adeguato | Da migliorare |
|
|
|---------|-----------|----------|---------------|
|
|
| **Implementazione tecnica** | API Canvas utilizzata in modo creativo con molteplici funzionalità, codice eseguito perfettamente, sintassi moderna di JavaScript applicata | API Canvas utilizzata correttamente, codice eseguito con problemi minori, implementazione di base | Tentativo di utilizzo dell'API Canvas ma il codice presenta errori o non viene eseguito |
|
|
| **Creatività e design** | Concetto altamente originale con un aspetto visivo curato, dimostra una profonda esplorazione della funzionalità Canvas scelta | Buon utilizzo delle funzionalità Canvas con alcuni elementi creativi, risultato visivo solido | Implementazione di base con minima creatività o appeal visivo |
|
|
| **Qualità del codice** | Codice ben organizzato e commentato seguendo le migliori pratiche, algoritmi efficienti | Codice pulito con alcuni commenti, segue standard di codifica di base | Codice disorganizzato, pochi commenti, implementazione inefficiente |
|
|
|
|
## Domande di riflessione
|
|
|
|
Dopo aver completato il tuo progetto, considera queste domande:
|
|
|
|
1. **Quale funzionalità dell'API Canvas hai scelto e perché?**
|
|
2. **Quali sfide hai incontrato durante la realizzazione del tuo progetto?**
|
|
3. **Come potresti estendere questo progetto in un'applicazione o gioco più grande?**
|
|
4. **Quali altre funzionalità dell'API Canvas ti piacerebbe esplorare in futuro?**
|
|
|
|
> 💡 **Suggerimento utile**: Inizia con qualcosa di semplice e aggiungi complessità gradualmente. Un progetto semplice ma ben eseguito è meglio di un progetto troppo ambizioso che non funziona correttamente!
|
|
|
|
---
|
|
|
|
**Disclaimer**:
|
|
Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione. |