From 830621df7f8fff0b157cb5fa3551c4fe75f8e9d8 Mon Sep 17 00:00:00 2001 From: Carlos Alan <88628271+surykt@users.noreply.github.com> Date: Sun, 7 Nov 2021 09:54:11 -0300 Subject: Improve Object building practice page in pt-br (#2748) --- .../objects/object_building_practice/index.html | 46 +++++++++++----------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/files/pt-br/learn/javascript/objects/object_building_practice/index.html b/files/pt-br/learn/javascript/objects/object_building_practice/index.html index 070fd6206f..d1ce18c866 100644 --- a/files/pt-br/learn/javascript/objects/object_building_practice/index.html +++ b/files/pt-br/learn/javascript/objects/object_building_practice/index.html @@ -13,11 +13,11 @@ original_slug: Aprender/JavaScript/Objetos/Object_building_practice - + - + @@ -180,31 +180,32 @@ testBall.draw()

Agora vamos tornar isso divertido. Vamos começar a adicionar bolas à tela e a animá-las.

    -
  1. Primeiro, precisamos de um lugar para armazenar todas as nossas bolas. O array a seguir fará esse trabalho — adicione-o ao final do seu código agora: - 
    let balls = [];
    +
  2. Primeiro, precisamos de criar um lugar para armazenar todas as nossas bolas e então preenche-lo. O código a seguir fará esse trabalho — adicione-o ao final do seu código agora: + 
    let balls = [];
+
+while (balls.length < 25) {
+  let size = random(10,20);
+  let ball = new Ball(
+    // ball position always drawn at least one ball width
+    // away from the edge of the canvas, to avoid drawing errors
+    random(0 + size,width - size),
+    random(0 + size,height - size),
+    random(-7,7),
+    random(-7,7),
+    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+    size
+  );
+
+  balls.push(ball);
+}
    -

    Todos os programas que animam as coisas geralmente envolvem um loop de animação, que serve para atualizar as informações no programa e renderizar a visualização resultante em cada quadro da animação; esta é a base para a maioria dos jogos e outros programas.

    +

    O laço while cria uma nova instância da nossa Ball() usando valores aleatórios gerados com nossa função random(), então a função push() coloca ela no final do nosso array de bolas, mas somente enquanto o número de bolas no array é menor que 25. Então quando nos tivermos 25 bolas na tela mais nenhuma bola aparece. Você pode tentar variar o número em balls.length < 25 para obter mais ou menos bolas na tela. Dependendo de quanto poder de processamento seu computador/navegador tiver, especificar várias milhares de bolas pode diminuir bastante a velocidade da animação!

  3. Adicione o seguinte ao final do seu código agora: 
    function loop() {
   ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
   ctx.fillRect(0, 0, width, height);
 
-  while (balls.length < 25) {
-    let size = random(10,20);
-    let ball = new Ball(
-      // ball position always drawn at least one ball width
-      // away from the edge of the canvas, to avoid drawing errors
-      random(0 + size,width - size),
-      random(0 + size,height - size),
-      random(-7,7),
-      random(-7,7),
-      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
-      size
-    );
-    balls.push(ball);
-  }
-
   for (let i = 0; i < balls.length; i++) {
     balls[i].draw();
     balls[i].update();
@@ -213,12 +214,11 @@ testBall.draw()
    requestAnimationFrame(loop); } -

    Nossa função loop() faz o seguinte:

    +

    Todos os programas que animam as coisas geralmente envolvem um loop de animação, que serve para atualizar as informações no programa e renderizar a visualização resultante em cada quadro da animação; esta é a base para a maioria dos jogos e outros programas. Nossa função loop() faz o seguinte:

    4. -- cgit v1.2.3-54-g00ecf
Prerequisites:Pré-requisitos: Conhecimentos básicos de informática, conhecimento básico de HTML e CSS, familiaridade com o básico de JavaScript (veja First steps e Building blocks) e o básico de OOJS (veja Introduction to objects).
Objective:Objetivo: Adiquirir alguma prática no uso de objetos e técnicas de orientação a objetos num contexto real.