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-22T23:14:40+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "br"
|
|
}
|
|
-->
|
|
# Tarefa: Explore a API Canvas
|
|
|
|
## Objetivos de Aprendizado
|
|
|
|
Ao concluir esta tarefa, você demonstrará sua compreensão dos fundamentos da API Canvas e aplicará habilidades criativas de resolução de problemas para construir elementos visuais usando JavaScript e HTML5 canvas.
|
|
|
|
## Instruções
|
|
|
|
Escolha um aspecto da API Canvas que lhe interesse e crie um projeto visual envolvente em torno dele. Esta tarefa incentiva você a experimentar as capacidades de desenho que aprendeu enquanto cria algo único e pessoal.
|
|
|
|
### Ideias de Projetos para Inspirar Você
|
|
|
|
**Padrões Geométricos:**
|
|
- **Crie** uma galáxia de estrelas cintilantes animadas usando posicionamento aleatório
|
|
- **Desenhe** uma textura interessante usando formas geométricas repetidas
|
|
- **Construa** um efeito caleidoscópio com padrões coloridos e rotativos
|
|
|
|
**Elementos Interativos:**
|
|
- **Desenvolva** uma ferramenta de desenho que responda aos movimentos do mouse
|
|
- **Implemente** formas que mudam de cor ao serem clicadas
|
|
- **Projete** um loop de animação simples com elementos em movimento
|
|
|
|
**Gráficos Relacionados a Jogos:**
|
|
- **Crie** um fundo rolante para um jogo espacial
|
|
- **Construa** efeitos de partículas como explosões ou feitiços mágicos
|
|
- **Desenvolva** sprites animados com múltiplos quadros
|
|
|
|
### Diretrizes de Desenvolvimento
|
|
|
|
**Pesquisa e Inspiração:**
|
|
- **Explore** o CodePen para exemplos criativos de canvas (para inspiração, não para copiar)
|
|
- **Estude** a [documentação da API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) para métodos adicionais
|
|
- **Experimente** diferentes funções de desenho, cores e animações
|
|
|
|
**Requisitos Técnicos:**
|
|
- **Configure** corretamente o canvas com `getContext('2d')`
|
|
- **Inclua** comentários significativos explicando sua abordagem
|
|
- **Teste** seu código minuciosamente para garantir que funcione sem erros
|
|
- **Aplique** sintaxe moderna de JavaScript (const/let, arrow functions)
|
|
|
|
**Expressão Criativa:**
|
|
- **Concentre-se** em um recurso da API Canvas, mas explore-o profundamente
|
|
- **Adicione** seu toque criativo para tornar o projeto pessoal
|
|
- **Considere** como sua criação poderia fazer parte de uma aplicação maior
|
|
|
|
### Diretrizes de Envio
|
|
|
|
Envie seu projeto concluído como um único arquivo HTML com CSS e JavaScript embutidos, ou como arquivos separados em uma pasta. Inclua um breve comentário explicando suas escolhas criativas e os recursos da API Canvas que você explorou.
|
|
|
|
## Rubrica
|
|
|
|
| Critério | Exemplar | Adequado | Precisa Melhorar |
|
|
|----------|----------|----------|------------------|
|
|
| **Implementação Técnica** | API Canvas usada de forma criativa com múltiplos recursos, código funciona perfeitamente, sintaxe moderna de JavaScript aplicada | API Canvas usada corretamente, código funciona com pequenos problemas, implementação básica | Tentativa de usar a API Canvas, mas o código tem erros ou não executa |
|
|
| **Criatividade e Design** | Conceito altamente original com apelo visual refinado, demonstra exploração profunda do recurso escolhido da API Canvas | Bom uso dos recursos da API Canvas com alguns elementos criativos, resultado visual sólido | Implementação básica com criatividade ou apelo visual mínimos |
|
|
| **Qualidade do Código** | Código bem organizado, comentado seguindo boas práticas, algoritmos eficientes | Código limpo com alguns comentários, segue padrões básicos de codificação | Código desorganizado, poucos comentários, implementação ineficiente |
|
|
|
|
## Perguntas de Reflexão
|
|
|
|
Após concluir seu projeto, considere estas perguntas:
|
|
|
|
1. **Qual recurso da API Canvas você escolheu e por quê?**
|
|
2. **Quais desafios você encontrou ao construir seu projeto?**
|
|
3. **Como você poderia expandir este projeto para uma aplicação ou jogo maior?**
|
|
4. **Quais outros recursos da API Canvas você gostaria de explorar a seguir?**
|
|
|
|
> 💡 **Dica Pro**: Comece simples e adicione complexidade gradualmente. Um projeto simples bem executado é melhor do que um projeto excessivamente ambicioso que não funciona corretamente!
|
|
|
|
---
|
|
|
|
**Aviso Legal**:
|
|
Este documento foi traduzido usando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. |