Oi (x > alvoX - raio) && (x < alvoX + raio)
O alvo no centro nao será 0 ? Por que estamos fazendo uma comparaçao logica de se for maior e menor ?
Solucionado
Oi (x > alvoX - raio) && (x < alvoX + raio)
O alvo no centro nao será 0 ? Por que estamos fazendo uma comparaçao logica de se for maior e menor ?
Seria para ficar ambos no mesmo range do click ?
E testei as cores mas nao consegui deixar o alvo com a cor branca. :/
<html>
<head/>
<body>
<canvas id="screen" width="600" height="400" ></canvas>
</body>
<script>
var radius = 40;
var alvoX;
var alvoY;
var screen = document.getElementById("screen");
var c = screen.getContext("2d");
var cor = function(nome) {
c.fillStyle = nome;
}
var drawCircle = function(x,y){
var color2 = cor("white");
circle(x, y, radius, color2);
var color2 = cor("red");
circle(x, y, radius+10, color2);
var color2 = cor("white");
circle(x, y, radius+20, color2);
var color2 = cor("red");
circle(x, y, radius+30, color2);
}
var circle = function(x,y, cor){
c.fillStyle = cor;
c.beginPath();
c.arc(x, y, radius, 0, 2*Math.PI);
c.fill();
}
var clean = function(){
c.clearRect(0, 0, 600, 400);
}
var sort = function(max) {
return Math.floor(Math.random()* max);
}
drawCircle(55,55);
var draw = function(){
clean();
alvoX = sort(600);
alvoY = sort(400);
drawCircle(alvoX, alvoY);
}
setInterval(draw, 3000);
screen.onclick = function(event) {
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
console.log("Mouse " + x + " " + y);
console.log("Alvo " + alvoX + " " + alvoY);
if((x > alvoX - radius) && (x < alvoX + radius) && (y > alvoY - radius) && (y < alvoY + radius)) {
alert("acertou!");
}
}
</script>
</html>
Vamos lá.
R: Não, o alvo no centro não é 0. O alvo é o ponto central da imagem que criamos (os arcos), cujas coordenadas são definidas pela função sorteia() (no seu caso, sort). A comparação é feita para saber se o clique foi feito dentro da área que há entre o alvo (o ponto central da imagem) e as bordas da mesma.
Com relação à cor, o problema está no parâmetro que você está passando para a função circle.
Como pode ser visto no trecho abaixo, você está passando o parametro "cor" que é utilizado na função fillStyle. A mesma recebe uma string com o nome da cor, eg. "white". Na sua declaração, a função está correta.
var circle = function(x,y, cor){
c.fillStyle = cor;
c.beginPath();
c.arc(x, y, radius, 0, 2*Math.PI);
c.fill();
}Porém, neste trecho, você está passando o parâmetro errado.
var drawCircle = function(x,y){
var color2 = cor("white");
circle(x, y, radius, color2);
var color2 = cor("red");
circle(x, y, radius+10, color2);
var color2 = cor("white");
circle(x, y, radius+20, color2);
var color2 = cor("red");
circle(x, y, radius+30, color2);
}Aqui, ao invés de você passar como parametro para a função circle uma string contendo a cor que você pretende utilizar, você passa uma variável chamada color2 que recebe seu valor da função cor. Isso não é de todo errado, caso a função cor retornasse uma string com o nome da cor desejada à variável color2. Mas não é o caso:
var cor = function(nome) {
c.fillStyle = nome;
}A função cor, que você criou com o a intenção de passar a cor desejada à variável color2 não faz o esperado. Primeiramente pq ela não faz nenhum tipo de retorno (e como você está atribuindo essa função à uma variável, um retorno seria esperado). Além disso, seria necessário que fosse feito o retorno de uma string com o nome da cor, e não apenas a declaração da função fillStyle (que, inclusive, você já utiliza na função circle). Como resolver isso? Retornando uma string, como mostro abaixo:
var cor = function(nome) {
return nome;
}Dessa forma, ela vai retornar uma string com a cor que você quer utilizar. Mas temos um novo problema: temos uma função cuja única utilidade é retornar um parâmetro que a mesma recebeu como entrada (o nome da cor). Oras, se você já tem a cor anteriormente, qual a necessidade dessa função? Se você está me acompanhando até aqui, já sabe que não há.
Dessa forma, podemos corrigir o trecho a função drawCircle (que, anteriormente, declarava repetidamente a variável color2 e atribuía à ela a função cor para depois passar a variável como parâmetro) da seguinte maneira:
var drawCircle = function(x,y){
circle(x, y, radius, "white");
circle(x, y, radius+10, "red");
circle(x, y, radius+20, "white");
circle(x, y, radius+30, "red");
}Dessa forma, o nome da cor será passado corretamente à função circle que, por sua vez, irá gerar os círculos de forma correta.
Seu código final ficaria da seguinte forma:
<html>
<head/>
<body>
<canvas id="screen" width="600" height="400" ></canvas>
</body>
<script>
var radius = 40;
var alvoX;
var alvoY;
var screen = document.getElementById("screen");
var c = screen.getContext("2d");
var drawCircle = function(x,y){
circle(x, y, radius, "white");
circle(x, y, radius+10, "red");
circle(x, y, radius+20, "white");
circle(x, y, radius+30, "red");
}
var circle = function(x,y, cor){
c.fillStyle = cor;
c.beginPath();
c.arc(x, y, radius, 0, 2*Math.PI);
c.fill();
}
var clean = function(){
c.clearRect(0, 0, 600, 400);
}
var sort = function(max) {
return Math.floor((Math.random() * max) + 1);
}
drawCircle(55,55);
var draw = function(){
clean();
alvoX = sort(600);
alvoY = sort(400);
drawCircle(alvoX, alvoY);
}
setInterval(draw, 3000);
screen.onclick = function(event) {
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
console.log("Mouse " + x + " " + y);
console.log("Alvo " + alvoX + " " + alvoY);
if((x > alvoX - radius) && (x < alvoX + radius) && (y > alvoY - radius) && (y < alvoY + radius)) {
alert("acertou!");
}
}
</script>
</html>Espero ter ajudado. Caso tenha alguma dúvida, não exite em perguntar. \o/
P.S.: Tomei a liberdade de corrigir a função sort tbm, apesar de não ser um erro grave (faltou somar 1 ao valor encontrado antes de achar o floor do mesmo).
Vou olhar com cuidado o codigo :)