|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "7994743c5b21fdcceb36307916ef249a",
|
|
|
"translation_date": "2025-11-04T00:13:36+00:00",
|
|
|
"source_file": "6-space-game/2-drawing-to-canvas/README.md",
|
|
|
"language_code": "br"
|
|
|
}
|
|
|
-->
|
|
|
# Construa um Jogo Espacial Parte 2: Desenhe o Herói e os Monstros no Canvas
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Your Canvas Graphics Journey
|
|
|
section Foundation
|
|
|
Understand Canvas API: 3: Student
|
|
|
Learn coordinate system: 4: Student
|
|
|
Draw basic shapes: 4: Student
|
|
|
section Image Handling
|
|
|
Load game assets: 4: Student
|
|
|
Handle async loading: 5: Student
|
|
|
Position sprites: 5: Student
|
|
|
section Game Rendering
|
|
|
Create game screen: 5: Student
|
|
|
Build formations: 5: Student
|
|
|
Optimize performance: 4: Student
|
|
|
```
|
|
|
|
|
|
A API Canvas é uma das ferramentas mais poderosas do desenvolvimento web para criar gráficos dinâmicos e interativos diretamente no seu navegador. Nesta lição, vamos transformar aquele elemento HTML `<canvas>` vazio em um mundo de jogo cheio de heróis e monstros. Pense no canvas como sua tela digital onde o código se transforma em arte visual.
|
|
|
|
|
|
Estamos construindo com base no que você aprendeu na lição anterior e agora vamos mergulhar nos aspectos visuais. Você aprenderá como carregar e exibir sprites de jogo, posicionar elementos com precisão e criar a base visual para o seu jogo espacial. Isso faz a ponte entre páginas web estáticas e experiências dinâmicas e interativas.
|
|
|
|
|
|
Ao final desta lição, você terá uma cena de jogo completa com sua nave heroica posicionada corretamente e formações inimigas prontas para a batalha. Você entenderá como os jogos modernos renderizam gráficos nos navegadores e adquirirá habilidades para criar suas próprias experiências visuais interativas. Vamos explorar os gráficos do canvas e dar vida ao seu jogo espacial!
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((Canvas Graphics))
|
|
|
Canvas Element
|
|
|
HTML5 Feature
|
|
|
2D Context
|
|
|
Coordinate System
|
|
|
Pixel Control
|
|
|
Drawing Operations
|
|
|
Basic Shapes
|
|
|
Text Rendering
|
|
|
Image Display
|
|
|
Path Drawing
|
|
|
Asset Management
|
|
|
Image Loading
|
|
|
Async Operations
|
|
|
Error Handling
|
|
|
Performance
|
|
|
Game Rendering
|
|
|
Sprite Positioning
|
|
|
Formation Layout
|
|
|
Scene Composition
|
|
|
Frame Updates
|
|
|
Visual Effects
|
|
|
Colors & Styles
|
|
|
Transformations
|
|
|
Animations
|
|
|
Layering
|
|
|
```
|
|
|
|
|
|
## Quiz Pré-Aula
|
|
|
|
|
|
[Quiz pré-aula](https://ff-quizzes.netlify.app/web/quiz/31)
|
|
|
|
|
|
## O Canvas
|
|
|
|
|
|
Então, o que exatamente é este elemento `<canvas>`? É a solução do HTML5 para criar gráficos dinâmicos e animações em navegadores web. Diferente de imagens ou vídeos regulares que são estáticos, o canvas oferece controle em nível de pixel sobre tudo que aparece na tela. Isso o torna perfeito para jogos, visualizações de dados e arte interativa. Pense nele como uma superfície de desenho programável onde o JavaScript se torna seu pincel.
|
|
|
|
|
|
Por padrão, um elemento canvas parece um retângulo transparente e vazio na sua página. Mas é aí que está o potencial! Seu verdadeiro poder surge quando você usa JavaScript para desenhar formas, carregar imagens, criar animações e fazer as coisas responderem às interações do usuário. É semelhante ao trabalho dos pioneiros dos gráficos de computador nos Laboratórios Bell na década de 1960, que precisavam programar cada pixel para criar as primeiras animações digitais.
|
|
|
|
|
|
✅ Leia [mais sobre a API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) no MDN.
|
|
|
|
|
|
Aqui está como ele é normalmente declarado, como parte do corpo da página:
|
|
|
|
|
|
```html
|
|
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
|
|
```
|
|
|
|
|
|
**O que este código faz:**
|
|
|
- **Define** o atributo `id` para que você possa referenciar este elemento canvas específico no JavaScript
|
|
|
- **Estabelece** a `largura` em pixels para controlar o tamanho horizontal do canvas
|
|
|
- **Determina** a `altura` em pixels para definir as dimensões verticais do canvas
|
|
|
|
|
|
## Desenhando Geometria Simples
|
|
|
|
|
|
Agora que você sabe o que é o elemento canvas, vamos explorar como desenhar nele! O canvas usa um sistema de coordenadas que pode parecer familiar das aulas de matemática, mas há uma diferença importante específica para gráficos de computador.
|
|
|
|
|
|
O canvas usa coordenadas cartesianas com um eixo x (horizontal) e um eixo y (vertical) para posicionar tudo o que você desenha. Mas aqui está a diferença principal: diferente do sistema de coordenadas da matemática, o ponto de origem `(0,0)` começa no canto superior esquerdo, com os valores de x aumentando à medida que você se move para a direita e os valores de y aumentando à medida que você se move para baixo. Essa abordagem remonta aos primeiros monitores de computador, onde os feixes de elétrons escaneavam de cima para baixo, tornando o canto superior esquerdo o ponto de partida natural.
|
|
|
|
|
|
```mermaid
|
|
|
quadrantChart
|
|
|
title Canvas Coordinate System
|
|
|
x-axis Left --> Right
|
|
|
y-axis Top --> Bottom
|
|
|
quadrant-1 Quadrant 1
|
|
|
quadrant-2 Quadrant 2
|
|
|
quadrant-3 Quadrant 3
|
|
|
quadrant-4 Quadrant 4
|
|
|
|
|
|
Origin Point: [0.1, 0.1]
|
|
|
Hero Center: [0.5, 0.8]
|
|
|
Enemy Formation: [0.3, 0.2]
|
|
|
Power-up: [0.7, 0.6]
|
|
|
UI Elements: [0.9, 0.1]
|
|
|
```
|
|
|
|
|
|
|
|
|
> Imagem de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
|
|
|
|
|
Para desenhar no elemento canvas, você seguirá o mesmo processo de três etapas que forma a base de todos os gráficos do canvas. Depois de fazer isso algumas vezes, torna-se algo natural:
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A[HTML Canvas Element] --> B[Get Canvas Reference]
|
|
|
B --> C[Get 2D Context]
|
|
|
C --> D[Drawing Operations]
|
|
|
|
|
|
D --> E[Draw Shapes]
|
|
|
D --> F[Draw Text]
|
|
|
D --> G[Draw Images]
|
|
|
D --> H[Apply Styles]
|
|
|
|
|
|
E --> I[Render to Screen]
|
|
|
F --> I
|
|
|
G --> I
|
|
|
H --> I
|
|
|
|
|
|
style A fill:#e1f5fe
|
|
|
style C fill:#e8f5e8
|
|
|
style I fill:#fff3e0
|
|
|
```
|
|
|
|
|
|
1. **Obtenha uma referência** ao seu elemento Canvas no DOM (assim como qualquer outro elemento HTML)
|
|
|
2. **Obtenha o contexto de renderização 2D** – isso fornece todos os métodos de desenho
|
|
|
3. **Comece a desenhar!** Use os métodos integrados do contexto para criar seus gráficos
|
|
|
|
|
|
Aqui está como isso se parece no código:
|
|
|
|
|
|
```javascript
|
|
|
// Step 1: Get the canvas element
|
|
|
const canvas = document.getElementById("myCanvas");
|
|
|
|
|
|
// Step 2: Get the 2D rendering context
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
|
|
// Step 3: Set fill color and draw a rectangle
|
|
|
ctx.fillStyle = 'red';
|
|
|
ctx.fillRect(0, 0, 200, 200); // x, y, width, height
|
|
|
```
|
|
|
|
|
|
**Vamos detalhar isso passo a passo:**
|
|
|
- Nós **pegamos** nosso elemento canvas usando seu ID e o armazenamos em uma variável
|
|
|
- Nós **obtemos** o contexto de renderização 2D – esta é nossa caixa de ferramentas cheia de métodos de desenho
|
|
|
- Nós **informamos** ao canvas que queremos preencher as coisas com vermelho usando a propriedade `fillStyle`
|
|
|
- Nós **desenhamos** um retângulo começando no canto superior esquerdo (0,0) com 200 pixels de largura e altura
|
|
|
|
|
|
✅ A API Canvas foca principalmente em formas 2D, mas você também pode desenhar elementos 3D em um site; para isso, você pode usar a [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
|
|
|
|
|
Você pode desenhar vários tipos de coisas com a API Canvas, como:
|
|
|
|
|
|
- **Formas geométricas**, já mostramos como desenhar um retângulo, mas há muito mais que você pode desenhar.
|
|
|
- **Texto**, você pode desenhar um texto com qualquer fonte e cor que desejar.
|
|
|
- **Imagens**, você pode desenhar uma imagem com base em um arquivo de imagem como .jpg ou .png, por exemplo.
|
|
|
|
|
|
✅ Experimente! Você já sabe como desenhar um retângulo, consegue desenhar um círculo na página? Dê uma olhada em alguns desenhos interessantes no Canvas no CodePen. Aqui está um [exemplo particularmente impressionante](https://codepen.io/dissimulate/pen/KrAwx).
|
|
|
|
|
|
### 🔄 **Verificação Pedagógica**
|
|
|
**Compreensão dos Fundamentos do Canvas**: Antes de avançar para o carregamento de imagens, certifique-se de que você pode:
|
|
|
- ✅ Explicar como o sistema de coordenadas do canvas difere das coordenadas matemáticas
|
|
|
- ✅ Entender o processo de três etapas para operações de desenho no canvas
|
|
|
- ✅ Identificar o que o contexto de renderização 2D fornece
|
|
|
- ✅ Descrever como `fillStyle` e `fillRect` funcionam juntos
|
|
|
|
|
|
**Teste Rápido**: Como você desenharia um círculo azul na posição (100, 50) com raio 25?
|
|
|
```javascript
|
|
|
ctx.fillStyle = 'blue';
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(100, 50, 25, 0, 2 * Math.PI);
|
|
|
ctx.fill();
|
|
|
```
|
|
|
|
|
|
**Métodos de Desenho no Canvas que Você Já Conhece**:
|
|
|
- **fillRect()**: Desenha retângulos preenchidos
|
|
|
- **fillStyle**: Define cores e padrões
|
|
|
- **beginPath()**: Inicia novos caminhos de desenho
|
|
|
- **arc()**: Cria círculos e curvas
|
|
|
|
|
|
## Carregar e Desenhar um Arquivo de Imagem
|
|
|
|
|
|
Desenhar formas básicas é útil para começar, mas a maioria dos jogos precisa de imagens reais! Sprites, fundos e texturas são o que dão apelo visual aos jogos. Carregar e exibir imagens no canvas funciona de forma diferente de desenhar formas geométricas, mas é simples uma vez que você entende o processo.
|
|
|
|
|
|
Precisamos criar um objeto `Image`, carregar nosso arquivo de imagem (isso acontece de forma assíncrona, ou seja, "em segundo plano") e, em seguida, desenhá-lo no canvas assim que estiver pronto. Essa abordagem garante que suas imagens sejam exibidas corretamente sem bloquear sua aplicação enquanto elas carregam.
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant JS as JavaScript
|
|
|
participant Img as Image Object
|
|
|
participant Server as File Server
|
|
|
participant Canvas as Canvas Context
|
|
|
|
|
|
JS->>Img: new Image()
|
|
|
JS->>Img: Set src property
|
|
|
Img->>Server: Request image file
|
|
|
Server->>Img: Return image data
|
|
|
Img->>JS: Trigger onload event
|
|
|
JS->>Canvas: drawImage(img, x, y)
|
|
|
Canvas->>Canvas: Render to screen
|
|
|
|
|
|
Note over JS,Canvas: Async loading prevents UI blocking
|
|
|
```
|
|
|
|
|
|
### Carregamento Básico de Imagens
|
|
|
|
|
|
```javascript
|
|
|
const img = new Image();
|
|
|
img.src = 'path/to/my/image.png';
|
|
|
img.onload = () => {
|
|
|
// Image loaded and ready to be used
|
|
|
console.log('Image loaded successfully!');
|
|
|
};
|
|
|
```
|
|
|
|
|
|
**O que está acontecendo neste código:**
|
|
|
- Nós **criamos** um objeto Image novo para armazenar nosso sprite ou textura
|
|
|
- Nós **informamos** qual arquivo de imagem carregar definindo o caminho da fonte
|
|
|
- Nós **ouvimos** o evento de carregamento para saber exatamente quando a imagem está pronta para uso
|
|
|
|
|
|
### Uma Maneira Melhor de Carregar Imagens
|
|
|
|
|
|
Aqui está uma maneira mais robusta de lidar com o carregamento de imagens que os desenvolvedores profissionais costumam usar. Vamos encapsular o carregamento de imagens em uma função baseada em Promises – essa abordagem, popularizada quando as Promises do JavaScript se tornaram padrão no ES6, torna seu código mais organizado e lida com erros de forma elegante:
|
|
|
|
|
|
```javascript
|
|
|
function loadAsset(path) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const img = new Image();
|
|
|
img.src = path;
|
|
|
img.onload = () => {
|
|
|
resolve(img);
|
|
|
};
|
|
|
img.onerror = () => {
|
|
|
reject(new Error(`Failed to load image: ${path}`));
|
|
|
};
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// Modern usage with async/await
|
|
|
async function initializeGame() {
|
|
|
try {
|
|
|
const heroImg = await loadAsset('hero.png');
|
|
|
const monsterImg = await loadAsset('monster.png');
|
|
|
// Images are now ready to use
|
|
|
} catch (error) {
|
|
|
console.error('Failed to load game assets:', error);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**O que fizemos aqui:**
|
|
|
- **Encapsulamos** toda a lógica de carregamento de imagens em uma Promise para que possamos lidar melhor com ela
|
|
|
- **Adicionamos** tratamento de erros que realmente nos informa quando algo dá errado
|
|
|
- **Usamos** a sintaxe moderna de async/await porque é muito mais fácil de ler
|
|
|
- **Incluímos** blocos try/catch para lidar graciosamente com qualquer problema de carregamento
|
|
|
|
|
|
Depois que suas imagens forem carregadas, desenhá-las no canvas é realmente bem simples:
|
|
|
|
|
|
```javascript
|
|
|
async function renderGameScreen() {
|
|
|
try {
|
|
|
// Load game assets
|
|
|
const heroImg = await loadAsset('hero.png');
|
|
|
const monsterImg = await loadAsset('monster.png');
|
|
|
|
|
|
// Get canvas and context
|
|
|
const canvas = document.getElementById("myCanvas");
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
|
|
// Draw images to specific positions
|
|
|
ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
|
|
|
ctx.drawImage(monsterImg, 0, 0);
|
|
|
} catch (error) {
|
|
|
console.error('Failed to render game screen:', error);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Vamos detalhar isso passo a passo:**
|
|
|
- Nós **carregamos** tanto nossas imagens do herói quanto dos monstros em segundo plano usando await
|
|
|
- Nós **pegamos** nosso elemento canvas e obtemos o contexto de renderização 2D necessário
|
|
|
- Nós **posicionamos** a imagem do herói bem no centro usando alguns cálculos rápidos de coordenadas
|
|
|
- Nós **colocamos** a imagem do monstro no canto superior esquerdo para começar nossa formação inimiga
|
|
|
- Nós **capturamos** quaisquer erros que possam ocorrer durante o carregamento ou renderização
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A[Load Assets] --> B{All Images Loaded?}
|
|
|
B -->|No| C[Show Loading]
|
|
|
B -->|Yes| D[Get Canvas Context]
|
|
|
C --> B
|
|
|
D --> E[Clear Screen]
|
|
|
E --> F[Draw Background]
|
|
|
F --> G[Draw Enemy Formation]
|
|
|
G --> H[Draw Hero Ship]
|
|
|
H --> I[Apply Visual Effects]
|
|
|
I --> J[Render Frame]
|
|
|
|
|
|
subgraph "Rendering Pipeline"
|
|
|
K[Asset Management]
|
|
|
L[Scene Composition]
|
|
|
M[Drawing Operations]
|
|
|
N[Frame Output]
|
|
|
end
|
|
|
|
|
|
style A fill:#e1f5fe
|
|
|
style J fill:#e8f5e8
|
|
|
style I fill:#fff3e0
|
|
|
```
|
|
|
|
|
|
## Agora é Hora de Começar a Construir Seu Jogo
|
|
|
|
|
|
Agora vamos juntar tudo para criar a base visual do seu jogo espacial. Você tem uma compreensão sólida dos fundamentos do canvas e das técnicas de carregamento de imagens, então esta seção prática irá guiá-lo na construção de uma tela de jogo completa com sprites posicionados corretamente.
|
|
|
|
|
|
### O Que Construir
|
|
|
|
|
|
Você criará uma página web com um elemento Canvas. Ela deve renderizar uma tela preta `1024*768`. Nós fornecemos duas imagens para você:
|
|
|
|
|
|
- Nave do herói
|
|
|
|
|
|
|
|
|
|
|
|
- Formação 5×5 de monstros
|
|
|
|
|
|
|
|
|
|
|
|
### Passos Recomendados para Iniciar o Desenvolvimento
|
|
|
|
|
|
Localize os arquivos iniciais que foram criados para você na subpasta `your-work`. A estrutura do seu projeto deve conter:
|
|
|
|
|
|
```bash
|
|
|
your-work/
|
|
|
├── assets/
|
|
|
│ ├── enemyShip.png
|
|
|
│ └── player.png
|
|
|
├── index.html
|
|
|
├── app.js
|
|
|
└── package.json
|
|
|
```
|
|
|
|
|
|
**O que você está trabalhando:**
|
|
|
- **Sprites do jogo** estão na pasta `assets/` para manter tudo organizado
|
|
|
- **Seu arquivo HTML principal** configura o elemento canvas e prepara tudo
|
|
|
- **Um arquivo JavaScript** onde você escreverá toda a mágica de renderização do jogo
|
|
|
- **Um package.json** que configura um servidor de desenvolvimento para que você possa testar localmente
|
|
|
|
|
|
Abra esta pasta no Visual Studio Code para começar o desenvolvimento. Você precisará de um ambiente de desenvolvimento local com Visual Studio Code, NPM e Node.js instalados. Se você não tem o `npm` configurado no seu computador, [aqui está como instalá-lo](https://www.npmjs.com/get-npm).
|
|
|
|
|
|
Inicie seu servidor de desenvolvimento navegando até a pasta `your-work`:
|
|
|
|
|
|
```bash
|
|
|
cd your-work
|
|
|
npm start
|
|
|
```
|
|
|
|
|
|
**Este comando faz algumas coisas bem legais:**
|
|
|
- **Inicia** um servidor local em `http://localhost:5000` para que você possa testar seu jogo
|
|
|
- **Serve** todos os seus arquivos corretamente para que seu navegador possa carregá-los
|
|
|
- **Observa** seus arquivos para mudanças para que você possa desenvolver sem problemas
|
|
|
- **Oferece** um ambiente de desenvolvimento profissional para testar tudo
|
|
|
|
|
|
> 💡 **Nota**: Seu navegador mostrará uma página em branco inicialmente – isso é esperado! À medida que você adiciona código, atualize seu navegador para ver suas alterações. Essa abordagem de desenvolvimento iterativo é semelhante à forma como a NASA construiu o computador de orientação Apollo – testando cada componente antes de integrá-lo ao sistema maior.
|
|
|
|
|
|
### Adicione Código
|
|
|
|
|
|
Adicione o código necessário em `your-work/app.js` para completar as seguintes tarefas:
|
|
|
|
|
|
1. **Desenhe um canvas com fundo preto**
|
|
|
> 💡 **Como fazer**: Encontre o TODO em `/app.js` e adicione apenas duas linhas. Defina `ctx.fillStyle` como preto, depois use `ctx.fillRect()` começando em (0,0) com as dimensões do seu canvas. Fácil!
|
|
|
|
|
|
2. **Carregue as texturas do jogo**
|
|
|
> 💡 **Como fazer**: Use `await loadAsset()` para carregar suas imagens do jogador e dos inimigos. Armazene-as em variáveis para que você possa usá-las mais tarde. Lembre-se – elas não aparecerão até que você realmente as desenhe!
|
|
|
|
|
|
3. **Desenhe a nave do herói na posição central inferior**
|
|
|
> 💡 **Como fazer**: Use `ctx.drawImage()` para posicionar seu herói. Para a coordenada x, tente `canvas.width / 2 - 45` para centralizá-lo, e para a coordenada y use `canvas.height - canvas.height / 4` para colocá-lo na área inferior.
|
|
|
|
|
|
4. **Desenhe uma formação 5×5 de naves inimigas**
|
|
|
> 💡 **Como fazer**: Encontre a função `createEnemies` e configure um loop aninhado. Você precisará fazer alguns cálculos para espaçamento e posicionamento, mas não se preocupe – eu vou mostrar exatamente como!
|
|
|
|
|
|
Primeiro, estabeleça constantes para o layout adequado da formação inimiga:
|
|
|
|
|
|
```javascript
|
|
|
const ENEMY_TOTAL = 5;
|
|
|
const ENEMY_SPACING = 98;
|
|
|
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
|
|
|
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
|
|
|
const STOP_X = START_X + FORMATION_WIDTH;
|
|
|
```
|
|
|
|
|
|
**Vamos detalhar o que essas constantes fazem:**
|
|
|
- Nós **definimos** 5 inimigos por linha e coluna (uma grade de 5×5)
|
|
|
- Nós **determinamos** quanto espaço colocar entre os inimigos para que não fiquem apertados
|
|
|
- Nós **calculamos** a largura total da nossa formação
|
|
|
- Nós **descobrimos** onde começar e terminar para que a formação pareça centralizada
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["Canvas Width: 1024px"] --> B["Formation Width: 490px"]
|
|
|
B --> C["Start X: 267px"]
|
|
|
C --> D["Enemy Spacing: 98px"]
|
|
|
|
|
|
subgraph "5x5 Enemy Formation"
|
|
|
E["Row 1: Y=0"]
|
|
|
F["Row 2: Y=50"]
|
|
|
G["Row 3: Y=100"]
|
|
|
H["Row 4: Y=150"]
|
|
|
I["Row 5: Y=200"]
|
|
|
end
|
|
|
|
|
|
subgraph "Column Spacing"
|
|
|
J["Col 1: X=267"]
|
|
|
K["Col 2: X=365"]
|
|
|
L["Col 3: X=463"]
|
|
|
M["Col 4: X=561"]
|
|
|
N["Col 5: X=659"]
|
|
|
end
|
|
|
|
|
|
style A fill:#e1f5fe
|
|
|
style B fill:#e8f5e8
|
|
|
style C fill:#fff3e0
|
|
|
```
|
|
|
|
|
|
Em seguida, crie loops aninhados para desenhar a formação de inimigos:
|
|
|
|
|
|
```javascript
|
|
|
for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
|
|
|
for (let y = 0; y < 50 * 5; y += 50) {
|
|
|
ctx.drawImage(enemyImg, x, y);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**O que este loop aninhado faz:**
|
|
|
- O loop externo **move-se** da esquerda para a direita na formação
|
|
|
- O loop interno **vai** de cima para baixo para criar linhas organizadas
|
|
|
- Nós **desenhamos** cada sprite inimigo nas coordenadas x,y exatas que calculamos
|
|
|
- Tudo fica **uniformemente espaçado** para parecer profissional e organizado
|
|
|
|
|
|
### 🔄 **Verificação Pedagógica**
|
|
|
**Domínio da Renderização de Jogos**: Verifique sua compreensão do sistema completo de renderização:
|
|
|
- ✅ Como o carregamento assíncrono de imagens evita o bloqueio da interface durante a inicialização do jogo?
|
|
|
- ✅ Por que calculamos as posições da formação inimiga usando constantes em vez de codificar diretamente?
|
|
|
- ✅ Qual é o papel do contexto de renderização 2D nas operações de desenho?
|
|
|
- ✅ Como os loops aninhados criam formações organizadas de sprites?
|
|
|
|
|
|
**Considerações de Desempenho**: Seu jogo agora demonstra:
|
|
|
- **Carregamento eficiente de recursos**: Gerenciamento de imagens baseado em Promises
|
|
|
- **Renderização organizada**: Operações de desenho estruturadas
|
|
|
- **Posicionamento matemático**: Posicionamento calculado de sprites
|
|
|
- **Tratamento de erros**: Gerenciamento de falhas de forma elegante
|
|
|
|
|
|
**Conceitos de Programação Visual**: Você aprendeu:
|
|
|
- **Sistemas de coordenadas**: Traduzindo matemática para posições na tela
|
|
|
- **Gerenciamento de sprites**: Carregando e exibindo gráficos do jogo
|
|
|
- **Algoritmos de formação**: Padrões matemáticos para layouts organizados
|
|
|
- **Operações assíncronas**: JavaScript moderno para uma experiência de usuário fluida
|
|
|
|
|
|
## Resultado
|
|
|
|
|
|
O resultado final deve ser assim:
|
|
|
|
|
|
|
|
|
|
|
|
## Solução
|
|
|
|
|
|
Tente resolver sozinho primeiro, mas se ficar preso, confira uma [solução](../../../../6-space-game/2-drawing-to-canvas/solution/app.js)
|
|
|
|
|
|
---
|
|
|
|
|
|
## Desafio do GitHub Copilot Agent 🚀
|
|
|
|
|
|
Use o modo Agent para completar o seguinte desafio:
|
|
|
|
|
|
**Descrição:** Melhore o canvas do seu jogo espacial adicionando efeitos visuais e elementos interativos usando as técnicas da API Canvas que você aprendeu.
|
|
|
|
|
|
**Prompt:** Crie um novo arquivo chamado `enhanced-canvas.html` com um canvas que exiba estrelas animadas no fundo, uma barra de saúde pulsante para a nave do herói e naves inimigas que se movem lentamente para baixo. Inclua código JavaScript que desenhe estrelas cintilantes usando posições e opacidades aleatórias, implemente uma barra de saúde que muda de cor com base no nível de saúde (verde > amarelo > vermelho) e anime as naves inimigas para se moverem pela tela em velocidades diferentes.
|
|
|
|
|
|
Saiba mais sobre o [modo Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) aqui.
|
|
|
|
|
|
## 🚀 Desafio
|
|
|
|
|
|
Você aprendeu sobre desenho com a API Canvas focada em 2D; dê uma olhada na [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API) e tente desenhar um objeto 3D.
|
|
|
|
|
|
## Quiz Pós-Aula
|
|
|
|
|
|
[Quiz pós-aula](https://ff-quizzes.netlify.app/web/quiz/32)
|
|
|
|
|
|
## Revisão e Autoestudo
|
|
|
|
|
|
Saiba mais sobre a API Canvas [lendo sobre ela](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
|
|
|
|
|
### ⚡ **O que você pode fazer nos próximos 5 minutos**
|
|
|
- [ ] Abra o console do navegador e crie um elemento canvas com `document.createElement('canvas')`
|
|
|
- [ ] Tente desenhar um retângulo usando `fillRect()` em um contexto de canvas
|
|
|
- [ ] Experimente diferentes cores usando a propriedade `fillStyle`
|
|
|
- [ ] Desenhe um círculo simples usando o método `arc()`
|
|
|
|
|
|
### 🎯 **O que você pode realizar nesta hora**
|
|
|
- [ ] Complete o quiz pós-aula e entenda os fundamentos do canvas
|
|
|
- [ ] Crie um aplicativo de desenho no canvas com múltiplas formas e cores
|
|
|
- [ ] Implemente carregamento de imagens e renderização de sprites para seu jogo
|
|
|
- [ ] Construa uma animação simples que mova objetos pelo canvas
|
|
|
- [ ] Pratique transformações no canvas como escala, rotação e translação
|
|
|
|
|
|
### 📅 **Sua jornada de uma semana com Canvas**
|
|
|
- [ ] Complete o jogo espacial com gráficos polidos e animações de sprites
|
|
|
- [ ] Domine técnicas avançadas de canvas como gradientes, padrões e composição
|
|
|
- [ ] Crie visualizações interativas usando canvas para representação de dados
|
|
|
- [ ] Aprenda sobre técnicas de otimização de canvas para desempenho fluido
|
|
|
- [ ] Construa um aplicativo de desenho ou pintura com várias ferramentas
|
|
|
- [ ] Explore padrões de codificação criativa e arte generativa com canvas
|
|
|
|
|
|
### 🌟 **Sua maestria em gráficos em um mês**
|
|
|
- [ ] Construa aplicativos visuais complexos usando Canvas 2D e WebGL
|
|
|
- [ ] Aprenda conceitos de programação gráfica e fundamentos de shaders
|
|
|
- [ ] Contribua para bibliotecas gráficas de código aberto e ferramentas de visualização
|
|
|
- [ ] Domine a otimização de desempenho para aplicativos gráficos intensivos
|
|
|
- [ ] Crie conteúdo educacional sobre programação com canvas e gráficos computacionais
|
|
|
- [ ] Torne-se um especialista em programação gráfica que ajuda outros a criar experiências visuais
|
|
|
|
|
|
## 🎯 Sua linha do tempo de maestria em gráficos com Canvas
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title Canvas API Learning Progression
|
|
|
|
|
|
section Canvas Fundamentals (15 minutes)
|
|
|
Basic Operations: Element reference
|
|
|
: 2D context access
|
|
|
: Coordinate system
|
|
|
: Simple shape drawing
|
|
|
|
|
|
section Drawing Techniques (20 minutes)
|
|
|
Graphics Primitives: Rectangles and circles
|
|
|
: Colors and styles
|
|
|
: Text rendering
|
|
|
: Path operations
|
|
|
|
|
|
section Image Handling (25 minutes)
|
|
|
Asset Management: Image object creation
|
|
|
: Async loading patterns
|
|
|
: Error handling
|
|
|
: Performance optimization
|
|
|
|
|
|
section Game Graphics (30 minutes)
|
|
|
Sprite Rendering: Positioning algorithms
|
|
|
: Formation calculations
|
|
|
: Scene composition
|
|
|
: Frame rendering
|
|
|
|
|
|
section Advanced Techniques (40 minutes)
|
|
|
Visual Effects: Transformations
|
|
|
: Animations
|
|
|
: Layering
|
|
|
: State management
|
|
|
|
|
|
section Performance (35 minutes)
|
|
|
Optimization: Efficient drawing
|
|
|
: Memory management
|
|
|
: Frame rate control
|
|
|
: Asset caching
|
|
|
|
|
|
section Professional Skills (1 week)
|
|
|
Production Graphics: WebGL integration
|
|
|
: Canvas libraries
|
|
|
: Game engines
|
|
|
: Cross-platform considerations
|
|
|
|
|
|
section Advanced Graphics (1 month)
|
|
|
Specialized Applications: Data visualization
|
|
|
: Interactive art
|
|
|
: Real-time effects
|
|
|
: 3D graphics
|
|
|
```
|
|
|
|
|
|
### 🛠️ Resumo do seu kit de ferramentas de gráficos com Canvas
|
|
|
|
|
|
Após completar esta aula, você agora tem:
|
|
|
- **Maestria na API Canvas**: Compreensão completa da programação gráfica 2D
|
|
|
- **Matemática de coordenadas**: Posicionamento preciso e algoritmos de layout
|
|
|
- **Gerenciamento de ativos**: Carregamento de imagens profissional e tratamento de erros
|
|
|
- **Pipeline de renderização**: Abordagem estruturada para composição de cenas
|
|
|
- **Gráficos de jogos**: Posicionamento de sprites e cálculos de formação
|
|
|
- **Programação assíncrona**: Padrões modernos de JavaScript para desempenho fluido
|
|
|
- **Programação visual**: Traduzindo conceitos matemáticos para gráficos na tela
|
|
|
|
|
|
**Aplicações no mundo real**: Suas habilidades com Canvas se aplicam diretamente a:
|
|
|
- **Visualização de dados**: Gráficos, tabelas e painéis interativos
|
|
|
- **Desenvolvimento de jogos**: Jogos 2D, simulações e experiências interativas
|
|
|
- **Arte digital**: Codificação criativa e projetos de arte generativa
|
|
|
- **Design de UI/UX**: Gráficos personalizados e elementos interativos
|
|
|
- **Software educacional**: Ferramentas de aprendizado visual e simulações
|
|
|
- **Aplicações web**: Gráficos dinâmicos e visualizações em tempo real
|
|
|
|
|
|
**Habilidades profissionais adquiridas**: Agora você pode:
|
|
|
- **Construir** soluções gráficas personalizadas sem bibliotecas externas
|
|
|
- **Otimizar** o desempenho de renderização para experiências de usuário suaves
|
|
|
- **Depurar** problemas visuais complexos usando ferramentas de desenvolvedor do navegador
|
|
|
- **Projetar** sistemas gráficos escaláveis usando princípios matemáticos
|
|
|
- **Integrar** gráficos Canvas com frameworks modernos de aplicações web
|
|
|
|
|
|
**Métodos da API Canvas que você dominou**:
|
|
|
- **Gerenciamento de elementos**: getElementById, getContext
|
|
|
- **Operações de desenho**: fillRect, drawImage, fillStyle
|
|
|
- **Carregamento de ativos**: Objetos de imagem, padrões de Promise
|
|
|
- **Posicionamento matemático**: Cálculos de coordenadas, algoritmos de formação
|
|
|
|
|
|
**Próximo nível**: Você está pronto para adicionar animação, interação do usuário, detecção de colisão ou explorar WebGL para gráficos 3D!
|
|
|
|
|
|
🌟 **Conquista desbloqueada**: Você construiu um sistema completo de renderização de jogos usando técnicas fundamentais da API Canvas!
|
|
|
|
|
|
## Tarefa
|
|
|
|
|
|
[Brinque com a API Canvas](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**Aviso Legal**:
|
|
|
Este documento foi traduzido utilizando 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. |
