Loop em JavaScript: Um Guia Básico para Iniciantes
Um loop for em JavaScript é uma estrutura de controle que permite repetir um bloco de código um determinado número de vezes. Ele é utilizado principalmente quando você sabe com antecedência quantas vezes deseja que o loop seja executado.
Estrutura básica de um loop for
for (inicialização; condição; incremento) {
// bloco de código a ser repetido
}
inicialização: Configura a variável de controle do loop e é executada apenas uma vez, no início do loop.condição: É uma expressão que é avaliada antes de cada iteração. Se a condição fortrue, o loop continua; se forfalse, o loop termina.incremento: Atualiza a variável de controle do loop após cada iteração. Pode ser um incremento, decremento ou outra operação.
Exemplo de um loop for
for (let i = 1; i <= 3; i++) {
console.log(i);
}
Neste exemplo:
- Inicialização:
let i = 3define a variávelicom o valor inicial 1. - Condição:
i <= 3verifica seié menor que5. Se for, o loop continua. - Incremento:
i++incrementaiem1a cada iteração.
Este loop imprimirá os números de 1 a 3 no console.
O que vamos criar?
Vamos desenvolver uma cena interativa onde UFOs voam pelo espaço e estrelas aparecem quando clicamos com o mouse. Tudo isso utilizando o loop for para tornar nosso código mais eficiente e organizado.
Passo 1: Criando um Grupo de Sprites
Primeiro, precisamos criar um grupo para armazenar nossos UFOs. Isso nos permite manipular todos os UFOs de uma só vez:
var sprite_group = createGroup();
Passo 2: Utilizando o Loop For para Criar UFOs
Agora, vamos usar o loop for para criar múltiplos UFOs sem repetir código desnecessariamente:
for(var i = 1; i <= 4; i++) {
var sprite = createSprite(80 * i, 350);
sprite.setAnimation("ufo_1");
sprite.scale = 0.2;
sprite.velocityY = -4;
sprite_group.add(sprite);
}
Explicação:
for(var i = 1; i <= 4; i++): Iniciamosiem 1 e incrementamos até 4.createSprite(80 * i, 350): Criamos um sprite em posições horizontais diferentes multiplicandoipor 80.sprite.setAnimation("ufo_1"): Definimos a animação do UFO.sprite.velocityY = -4: Fazemos o UFO mover-se para cima.sprite_group.add(sprite): Adicionamos o UFO ao grupo de sprites.
Passo 3: Configurando as Bordas e Desenhando os Sprites
Vamos criar bordas para que os UFOs possam interagir:
createEdgeSprites();
E agora, o loop principal de desenho:
function draw() {
background("black");
sprite_group.bounceOff(edges);
drawSprites();
}
Explicação:
background("black"): Definimos o fundo como preto para representar o espaço.sprite_group.bounceOff(edges): Fazemos os UFOs ricochetearem nas bordas.drawSprites(): Desenhamos todos os sprites na tela.
Resultado Final
Gostou do conteúdo? Acesse o code.org para iniciar o projeto:
https://studio.code.org/projects/gamelab/1MjiECb7Og2bAg28yb9TKSlEKsL5V1QnipnPmtEl9kg/edit
https://studio.code.org/projects/gamelab/G8EbUWxvW_qUQUKNAc76tUZmmPzM1ZpkA37G7jgsIRo/edit