<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!!!