1
resposta

Faça como eu fiz na aula

let x = 300; //posição x da bolinha
let y = 200; //posição y da bolinha
let d = 30;  //diametro da bolinha
let r = d/2; //raio da bolinha

let vx = 5; //velocidade x da bolinha
let vy = 5; //velocidade y da bolinha

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  show();
  move();
  edges();
  
  
}
function show(){
  circle(x, y, d);
}
function move(){
  x += vx;
  y += vy;
}
function edges(){
  if (x > width -r || x < 0 +r){vx *= -1};
  if (y > height -r || y < 0 +r){vy *= -1};
}
1 resposta

Olá, Marco.

Tudo bem?

Parece que você está no caminho certo. O código que você compartilhou já faz exatamente o que foi pedido na atividade: cria uma bolinha que se move e reconhece as bordas da tela.

Vamos analisar seu código:

  1. Você definiu as variáveis x e y para a posição inicial da bolinha e d para o diâmetro da bolinha. A partir disso, você calculou o raio r da bolinha, que é metade do diâmetro.

  2. As variáveis vx e vy representam a velocidade da bolinha em cada direção (x e y).

  3. Na função setup(), você criou um canvas de 600x400 pixels.

  4. Na função draw(), você definiu o fundo como preto e chamou as funções show(), move() e edges().

  5. A função show() desenha a bolinha na posição atual.

  6. A função move() atualiza a posição da bolinha adicionando a velocidade atual à posição atual.

  7. A função edges() verifica se a bolinha atingiu a borda do canvas. Se sim, a direção da velocidade é invertida, fazendo a bolinha "rebater" e voltar para o centro.

Portanto, seu código já está de acordo com o que foi pedido na atividade. A bolinha se move e reconhece as bordas da tela, exatamente como no jogo Pong que você desenvolveu no Scratch. Parabéns pelo trabalho!

Espero ter ajudado e bons estudos!