Explicação de Começar do zero
Objetivo deste desafio: Criar um círculo vermelho que tenha um raio de 35 e colocá-lo em um local aleatório na parte superior da tela.
Passo a passo da solução: Como, provavelmente, vamos querer ver nossa forma mais tarde, vamos criar uma nova variável chamada balloon usando o comando let. Após o sinal de igual de let balloon = , precisamos criar a forma SVG usando svg.append(). Para dizer ao código que a forma deve ser um círculo, colocamos a string 'circle' dentro dos parênteses append(). Em seguida, podemos definir todos os atributos do círculo usando chamadas .attr(). Para tornar o círculo vermelho, defina o 'fill' como 'red'. Para que o raio seja 35, use .attr('r', 35). Como o círculo deve estar na parte superior, queremos que o valor de 'cy' seja 35, que é o mesmo do raio. Por último, para tornar a localização horizontal aleatória, escolhemos uma posição aleatória usando pickRandom(position) e usamos esse valor como o atributo 'cx'.
Cartões de revisão: Se você está procurando praticar em algumas lições anteriores para ajudá-lo em Começar do zero, estes 3 devem ajudá-lo. Ao resolvê-los, tente descobrir o que cada parte do código faz e quando a ordem das chamadas de função é importante.
-
Fazer um boneco de neve
-
No meio
-
Mapa de lugares
Solução do código de exemplo:
(Toque abaixo para revelar)
Como isso é parte do tópico final do curso Animações II e está testando seus conhecimentos, não há solução do código de exemplo.
Conceitos de JavaScript: Identificadores, Expressão de Membro, Declaração de Variável
Conceitos de JavaScript: pickRandom()
Conceitos de D3: .append(), .attr('fill',), .attr('r',), .attr('cx',), .attr('cy',)
Código Adicional (código oculto executado antes do código do desafio):
var position = [];
for (var i = 35; i <= window.innerWidth - 35; i += 5) {
position.push(i);
}
svg.append('rect').attr('fill', 'silver').attr('y',165 + 35).attr('width', window.innerWidth).attr('height', window.innerHeight - 200);
