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);