Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Duvida sobre alguns codigos aula 5 Desafio Final

<canvas id="tela" width="600" height="400"></canvas>

<script>
var raio = 10;
var alvoX;
var alvoY;

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var desenhaAlvo = function(x, y) {

    circulo(x, y, raio+30, "white");
    circulo(x, y, raio+20, "red");
    circulo(x, y, raio+10, "white");
    circulo(x, y, raio, "red");
};

var circulo = function(x,y,raio, cor) {
    c.fillStyle = cor;
    c.beginPath();
    c.arc(x,y,raio, 0, 2*Math.PI);
    c.fill();
}

var limpa = function() {
    c.clearRect(0,0,600,400);
}

var sorteia = function(max) {
    return Math.floor(Math.random() * max);
}

var desenha = function() {
  limpa();
  alvoX = sorteia(600);
  alvoY = sorteia(400);
  desenhaAlvo(alvoX, alvoY);
};

setInterval(desenha, 3000);

tela.onclick = function(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if((x > alvoX - raio) && (x < alvoX + raio) && 
        (y > alvoY - raio) && (y < alvoY + raio)) {
            alert("acertou!");
    }
}
</script>

Nesse seguinte codigo fiquei com as seguintes duvidas:

o porque da var = alvoX e a var = alvoY

qual a funcão do Math.floor

var sorteia = function(max) { return Math.floor(Math.random() * max);

e não consegui entender esse if abaixo:

if((x > alvoX - raio) && (x < alvoX + raio) && (y > alvoY - raio) && (y < alvoY + raio)) { alert("acertou!");

Obrigado!!!

1 resposta
solução!

Oi Carlos, tudo bem? Vamos por parte!

O AlvoX e AlvoY servem para definir onde o alvo vai ser desenhado. Para este desenho, são necessárias as coordenadas de onde o desenho vai ser renderizado. Lembra das posicões X e Y do plano carteziano? È a mesma idéia.

A função Math.floor arredonda números quebrados para baixo. Ou seja: Math.floor(3.3) resulta em: 3.

A função sorteia, gera um número aleatorio com limite de máximo. Este limite é o tamanho do quadro de desenho, o canvas. E arredonda esse número (que pode ser quebrado) para um número inteiro...

O if verifica se a posição clicada pelo mouse, está dentro do desenho (na area do desenho). Para fazer essa verificação você precisa comparar com as posições onde o desenho foi feito e também com seu raio (já que se trata de um circulo).

Entende? Espero ter ajudado, bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software