History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Construir um Jogo Espacial Parte 2: Desenhar Herói e Monstros no Canvas

Questionário Pré-Aula

Questionário pré-aula

O Canvas

O canvas é um elemento HTML que, por padrão, não tem conteúdo; é como uma tela em branco. É necessário desenhar nele para adicionar conteúdo.

✅ Leia mais sobre a API Canvas no MDN.

Aqui está como ele é normalmente declarado, como parte do corpo da página:

<canvas id="myCanvas" width="200" height="100"></canvas>

Acima, estamos a definir o id, width e height.

id: defina isto para obter uma referência quando precisar interagir com o canvas.
width: esta é a largura do elemento.
height: esta é a altura do elemento.

Desenhar formas geométricas simples

O Canvas utiliza um sistema de coordenadas cartesianas para desenhar. Assim, usa um eixo x e um eixo y para expressar onde algo está localizado. A localização 0,0 é o canto superior esquerdo, e o canto inferior direito corresponde à largura (WIDTH) e altura (HEIGHT) que definiu para o canvas.

Imagem de MDN

Para desenhar no elemento canvas, precisará seguir os seguintes passos:

Obter uma referência ao elemento Canvas.
Obter uma referência ao elemento Context que está no canvas.
Executar uma operação de desenho usando o elemento Context.

O código para os passos acima geralmente é assim:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ A API Canvas foca-se principalmente em formas 2D, mas também pode desenhar elementos 3D num site; para isso, pode usar a API WebGL.

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 pode desenhar.
Texto: pode desenhar texto com qualquer fonte e cor que desejar.
Imagens: pode desenhar uma imagem a partir de um ficheiro, como um .jpg ou .png, por exemplo.

✅ Experimente! Já sabe como desenhar um retângulo, consegue desenhar um círculo numa página? Veja alguns desenhos interessantes feitos com Canvas no CodePen. Aqui está um exemplo particularmente impressionante.

Carregar e desenhar um recurso de imagem

Pode carregar um recurso de imagem criando um objeto Image e definindo a sua propriedade src. Depois, ouve o evento load para saber quando está pronto para ser usado. O código é assim:

Carregar recurso

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

Padrão para carregar recurso

Recomenda-se encapsular o código acima numa estrutura como esta, para que seja mais fácil de usar e só tente manipulá-lo quando estiver totalmente carregado:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

Para desenhar recursos de jogo no ecrã, o seu código seria assim:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

Agora é hora de começar a construir o seu jogo

O que construir

Vai criar uma página web com um elemento Canvas. Deve renderizar um ecrã preto de 1024*768. Fornecemos-lhe duas imagens:

Nave do herói
5*5 monstros

Passos recomendados para começar o desenvolvimento

Localize os ficheiros que foram criados para si na subpasta your-work. Deve conter o seguinte:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Abra a cópia desta pasta no Visual Studio Code. Precisa de ter um ambiente de desenvolvimento local configurado, de preferência com o Visual Studio Code com NPM e Node instalados. Se não tiver o npm configurado no seu computador, aqui está como fazer isso.

Inicie o seu projeto navegando até à pasta your_work:

cd your-work
npm start

O comando acima iniciará um servidor HTTP no endereço http://localhost:5000. Abra um navegador e insira esse endereço. É uma página em branco por enquanto, mas isso vai mudar.

Nota: para ver as alterações no ecrã, atualize o navegador.

Adicionar código

Adicione o código necessário em your-work/app.js para resolver o seguinte:

Desenhar um canvas com fundo preto

dica: adicione duas linhas no local apropriado indicado pelo TODO em /app.js, definindo o elemento ctx para ser preto e as coordenadas superior/esquerda para 0,0, com a altura e largura iguais às do canvas.
Carregar texturas

dica: adicione as imagens do jogador e do inimigo usando await loadTexture e passando o caminho da imagem. Ainda não verá as imagens no ecrã!
Desenhar o herói no centro do ecrã na metade inferior

dica: use a API drawImage para desenhar heroImg no ecrã, definindo canvas.width / 2 - 45 e canvas.height - canvas.height / 4.

Desenhar 5*5 monstros

dica: agora pode descomentar o código para desenhar os inimigos no ecrã. Em seguida, vá para a função createEnemies e complete-a.

Primeiro, configure algumas constantes:

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

Depois, crie um loop para desenhar o array de monstros no ecrã:

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

Resultado

O resultado final deve ser assim:

Solução

Tente resolver sozinho primeiro, mas se ficar preso, veja uma solução.

🚀 Desafio

Aprendeu sobre como desenhar com a API Canvas focada em 2D; dê uma olhada na API WebGL e tente desenhar um objeto 3D.

Questionário Pós-Aula

Questionário pós-aula

Revisão e Autoestudo

Saiba mais sobre a API Canvas lendo sobre ela.

Tarefa

Experimente a API Canvas

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes do uso desta tradução.