p5.js

Vamos criar um jogo de basquete no Scratch!

Neste jogo, teremos um sprite (ator) jogador de basquete que vai arremessar a bola na cesta quando a bola for clicada.

Qual bloco de evento do Scratch deve ser o primeiro a ser utilizado para programar essa ação?

• Quando este ator for clicado

• Quando a bandeira verde ser clicada

• Quando o ruído for acima de 10

• Quando a tecla [espaço] for pressionada

Jade criou um jogo de basquete e compartilhou o projeto para que a gente possa jogar.

No código, ela percebeu que o tempo da animação entre a virada da carta e a exibição dos detalhes da carta do oponente está muito rápido. Observando o jogo desenvolvido por Jade, qual parte do código ela precisa alterar?

• vá para [minha carta]

• Transmita [inicia rodada]

• Se <([nº da fantasia] de [carta do oponente]) = (1)> então transmita [vira a carta]

• Mude [tempo] para (3)

Em JavaScript utilizamos o mouseIsPressed para criar comandos de acordo com a pressão do mouse, como podemos observar no código abaixo:

function draw() {

background("white");

rect(100, 100, 100, 100);

if (mouseIsPressed) {

fill("red");

} else {

fill("green"); } }

Analise o código da função draw() acima e selecione a alternativa que interpreta corretamente o comando dele:

• Se o mouse está pressionado, a cor do retângulo deve ser vermelho. Caso contrário, será verde.

• Se o mouse está pressionado, a cor do retângulo deve ser branco. Caso contrário, passará a ser verde

• Se o mouse está pressionado, o tamanho do retângulo deve ser 100. Caso contrário, ele será 0.

• Se o mouse está pressionado, a cor de fundo do retângulo deve ser branco. Caso contrário, será vermelho.

Hadassa criou um retângulo com as seguintes posições: x:0 e y:20; Também determinou suas medidas: 200px de largura e 300px de altura.

Ordene os 4 blocos necessários para preencher as lacunas a seguir, de modo a determinar as medidas na ordem correta:

rect(_,_,_,_);

• 0,20,200,300

• 300,200,20,0

• 200,20,0,300

• 0,300,20,200

Gabriel desenhou na sua tela do p5.js um retângulo de cor vermelho (red) e bordas azul (blue).

Ordene todos os blocos para adicionar as funções e cores na sequência descrita acima:

• stroke

  ("red")

  fill

  ("blue")

• fill

  ("red");

  ("blue")

  stroke

• fill

  ("red");

  stroke

  ("blue");

• stroke

  ("blue")

  fill

  ("red")

Com a linguagem JavaScript e utilizando o editor p5.js, vimos que para fazer um desenho precisamos antes criar uma espécie de tela de pintura. O código para criar essa tela é feito dentro de uma função que prepara nosso ambiente, e que é executada uma única vez. Para pintar na tela, utilizamos outra função que é executada constantemente, ela é responsável por pintar a tela de maneira dinâmica.

Baseado no resumo acima e no que foi visto nas atividades anteriores, vamos ordenar somente 4 dos blocos abaixo, na sua sequência correta, para criar uma tela de pintura no tamanho de 500 X 500 pixels e pintar o fundo dela com a cor azul (em inglês blue).

Cada bloco de texto abaixo se refere a uma linha do nosso código. Comece a resolver com a função que prepara o nosso ambiente.

• background ("blue");}

• createCanvas(500, 500);}

• function setup (){

• function draw() {

Para que serve a função fill no JavaScript?

• Iniciar a sequência de códigos.

• Preencher um elemento com cor.

• Circular com uma borda um determinado elemento.

• Apagar a variável.

Para criarmos um círculo na linguagem JavaScript, precisamos dar a função circle seguida de três valores númericos. Exemplo: circle (250, 250, 50);

• Posição Y, Posição X e Raio da circunferência

• Raio da circunferência, Posição X e Posição Y

• Posição X, Raio da Circunferência e Posição Y

• Posição X, Posição Y e Raio da circunferência

A linguagem JavaScript é baseada em:

• Português

• Espanhol

• Francês

• Inglês

A função setup() é executada quando

• o programa é iniciado.

• é inserida uma variável.

• se insere uma função if.

• o createCanvas é inserido.