<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);
var raio = 10;
var xAleatorio;
var yAleatorio;
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function desenhaAlvo(x,y) {
desenhaCirculo(x, y, raio+20, 'red');
desenhaCirculo(x, y, raio+10, 'white');
desenhaCirculo(x, y, raio, 'red');
}
function sorteiaPosicao(maximo) {
return Math.floor(Math.random() * maximo);
}
function atualizaTela() {
limpaTela();
xAleatorio = sorteiaPosicao(600);
yAleatorio = sorteiaPosicao(400);
desenhaAlvo(xAleatorio, yAleatorio);
}
setInterval(atualizaTela, 1000);
function dispara(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if((x > xAleatorio - raio)
&& (x < xAleatorio + raio)
&& (y > yAleatorio - raio)
&& (y < yAleatorio + raio)) {
alert('Acertou!');
}
}
tela.onclick = dispara;
</script>
4
respostas
respostas
Boa Tarde!O meu problema está no entendimento da lógica do "If". Porque eu tenho que colocar dessa forma: if((x > xAleatorio - raio) && (x < xAleatorio + raio) && (y > yAleatorio - raio) && (y < yAleatorio + raio)) ? Alguém pode me explicar?
Acredito que seja para indicar que essas 4 condições devem ocorrer ao mesmo tempo para que o alerta seja exibido. Por exemplo, se o valor de X ou Y for diferente de alguma condição declarada, o alerta não será exibido.
Até ai blz mas não entendi oq ta dentro do if() como assim x > xAleatorio - raio ??? é no caso pra ver se o click for no eixo x q é 300 por exemplo e se esta dentro do raio ? Não entendi pq imaginei q o navegador iria ler o programa e interpretar como x < 300 - raio vamo supor q o raio é 10 ai achei q ia ficar x < 290 ... simplesmente não entendi e nao faz sentido pra mim isso ae . Alguém me ajude pfv !!
Cara, não sei se vou conseguir te ajudar ou se já achou a solução, mas pelo que entendi, essa parte do código é o incremento da bolinha vermelha, o alvo principal no caso. Por exemplo: Se x = 100 e y = 100, pra gente poder acertar o alvo, precisa receber + 10 ou - 10 do raio, se não ia ter que acertar exatamente no meio, o que é praticamente impossível. Então se x = 100 - raio, significa que podemos acertar um pouco mais pra esquerda do centro, x + raio um pouco mais pra direita, y = 100 - raio um pouco mais pra cima e y + raio um pouco mais pra baixo, um pouco que digo é o 10 de raio, assim forma um círculo inteiro pra gente ter a possibilidade de acertá-lo. É isso mano, foi o máximo que consegui.
Entendi assim:
O x e y representam o centro do circulo central, coordenada x e y em relação a posição dos pontos no canvas, que seria praticamente impossível de acertar com ele em movimento, já que ele indica o ponto específico(Ex. posição x=150 e posição y=300. Subtraímos raio ou somamos raio a x e y para aumentar a área do click. Por exemplo com raio=10 podemos acertar 10 pixels a direita ou esquerda do centro (x) ou 10 pixels a cima ou abaixo do centro (y) para contar como acerto.
Espero ter ajudado.
Grande abraço!!