-
Em nossa última conversa-through, mostramos como você pode animar uma bola saltando fora das paredes usando a função draw e declarações if.
-
Vamos rever.
-
Primeiro, montamos algumas variáveis iniciais para a posição e a velocidade de uma bola.
-
Em seguida, no loop de empate, o que é que a função especial que é chamada uma e outra vez quando o programa está em execução,
-
nós pintamos o fundo e desenhamos uma elipse na tela
-
e nós posicionamos a elipse com base na variável position e speed e como eles afetam uns aos outros.
-
Agora, sem as declarações if, a nossa bola não parava de ir para todo o sempre,
-
ou até pressionar reiniciar.
-
Então, nós adicionamos duas declarações if até aqui
-
para verificar e ver se a bola estava perto do lado direito da tela, ou do lado esquerdo da tela, e assim for, nós mudamos a velocidade para ser positivo ou negativo para que a bola basicamente saltasse para trás.
-
para ser positivo ou negativo para que a bola basicamente saltasse para trás.
-
Portanto, agora só temos essa bola, indo e voltando para sempre.
-
Então isso foi muito legal, e há um monte de animações muito legais que podemos fazer com isso.
-
Mas agora, eu quero adicionar a interação do usuário a este programa.
-
Veja, agora este programa é como um programa de TV.
-
Se você deu-o a um amigo, e seu amigo não sabe programar, não podiam realmente interagir com ele.
-
Tudo o que podiam fazer é vê-lo, o que é legal,
-
mas é muito mais legal se eles poderiam realmente fazer alguma coisa.
-
Então, vamos dar ao usuário algumas maneiras de controlá-lo.
-
Lembre-se que antes aprendemos cerca de duas variáveis globais especiais chamadas mouseX e mouseY.
-
Essas variáveis retornam números que nos dizem sobre a posição atual do mouse do usuário
-
e eles são uma ótima maneira de fazer um programa mais interativo.
-
Então, vamos ver. Como é que podemos usá-las?
-
Bem, devemos usá-las dentro da função draw em algum lugar.
-
Porque esse é o único código que é chamado de uma e outra vez que o programa é executado.
-
Tudo fora desse loop só é chamado uma vez quando o programa começa.
-
Então, não faz sentido usar mouseX e mouseY fora do loop.
-
O usuário ainda não terá a chance de interagir com ele.
-
No sorteio, estamos desenhando a bola em 200 pixels para baixo na tela no momento.
-
Que tal substituir aquele com mouseY?
-
Porque essa é a posição y, certo?
-
Assim, desta forma ele vai apenas adicionar a posição y dependente de onde a coordenada Y do mouse do usuário está. Certo?
-
Então veja isto. Apenas movendo o meu cursor para cima e para baixo, eu posso mudar a linha que a bola se move longitudinalmente.
-
Isso é muito legal. Mas eu quero usar mouseX também.
-
Então, como eu deveria usar isso?
-
Bem, por que não vamos apenas fazer uma outra bola
-
e ter a bola indo na direção oposta: para cima e para baixo.
-
E lá vamos ver o usuário controlar a posição x dessa bola.
-
Então, nós temos de apenas fazer o inverso.
-
Diremos ellipse (position, mouseX, 50, 50). Tudo bem?
-
Confira! Agora, eu tenho essas duas bolas que eu controlo, e indo em direções perpendiculares.
-
Mas, eu ainda não estou feliz.
-
Eu quero dar ao usuário um controle ainda maior.
-
Eu quero dar ao usuário o poder de iniciar a segunda bola.
-
Para realmente trazê-lo à existência, apenas pressionando o seu mouse.
-
Bem, então eu preciso descobrir como dizer que o usuário está pressionando o seu mouse.
-
Felizmente, temos uma variável booleana super especial para isso.
-
É chamada mouseIsPressed e podemos usá-la dentro de um comando if.
-
Então, vamos ver. Esta é a segunda bola.
-
Assim, podemos dizer if (mouseIsPressed) { }, e então vamos mover o comando ellipse para lá.
-
Então, o que isso está fazendo aqui, é dizer ao programa que nós só queremos tirar essa elipse se isso é verdade
-
e mouseIsPressed só será verdadeiro se o usuário está pressionando o seu mouse.
-
Então, vamos tentar.
-
Ta da!
-
Então agora eu posso fazer a bola aparecer sempre que eu aperto.
-
Então está ampliando, a partir desse universo paralelo. Isso! Isso! Isso!
-
É impressionante!
-
Então, a coisa interessante sobre esta variável mouseIsPressed
-
é que ela muda com base no que o usuário faz, e não com base no que o nosso programa faz.
-
E uma vez que a função draw é chamada repetidamente, uma e outra,
-
a saída do nosso programa vai mudar ao longo do tempo
-
apenas com um pouco de entrada do usuário.
-
Com o poder combinado das declarações if e mouseIsPressed,
-
você tem tudo que você precisa para fazer as coisas impressionantes como botões, e os programas de desenho.
-
Woo Hoo! Tradução Por Pedro Camargo.Khan Academy Nickname:@PedroTao
