Quando tenho que usar Else if?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Quando tenho que usar Else if?
Olá Enzo,
No execício em questão o if/else deve ser utilizado dentro da função atualizaTela
A função ficará da seguinte forma
function atualizaTela() {
limpaTela();
if( x > 600) {
sentido = -1;
} else if (x < 0) {
sentido = 1;
}
desenhaCirculo(x, 20, 10);
x = x + sentido;
}O if verifica se o x é maior que 600, caso seja ele define o sentido com o valor de -1 que fará com que o ponto azul volte para esquerda porque ele já atingiu o limite horizontal do canvas.
Caso o x não seja maior que 600 e seja menor que zero, o sentido receberá o valor de 1, para que assim o ponto azul possa ir para a direita novamente.
O código completo ficará da seguinte forma:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var sentido = 1;
function atualizaTela() {
limpaTela();
if( x > 600) {
sentido = -1;
} else if (x < 0) {
sentido = 1;
}
desenhaCirculo(x, 20, 10);
x = x + sentido;
}
setInterval(atualizaTela, 10);
</script>