Alterei o código utilizando a bolinha azul e o alvo da aula anterior, criei uma função acerta() onde será validado de o xbol (xbolinha) é igual ao x do alvo, porém mesmo posicionando a bolinha no centro do alvo não exibe o alerta que criei, já tentei diversas comparações porém nenhuma funcionou.
<canvas width='800' height='600'></canvas>
<script>
//declaração da variável que recebe a tela e pincel
var canvas = document.querySelector('canvas');
var pincel = canvas.getContext('2d');
//variáveis que compoem os elemnetos do alvo
var raio = 10;
var x = 30;
var y = 30;
var sentidox = 1;
var sentidoy = 1;
//variáveis que compoem os elementos da bolinha azul
var xBol = 100;
var yBol = 100;
var raioBol = 8;
var esquerda = 37;
var cima = 38;
var direita = 39;
var baixo = 40;
//preenche o canvas com retangulo cinza
pincel.fillStyle = 'grey';
//funcção para desenhar o circulo
function criaCirc(x,y,raio,cor){
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x,y,raio,0, 2 * Math.PI);
pincel.fill();
}
//chama a função criaCirc passando os parêmetros
function desenhaAlvo(x,y,raio){
criaCirc(x,y,raio+40,'red');
criaCirc(x,y,raio+30,'black');
criaCirc(x,y,raio+20,'red');
criaCirc(x,y,raio+10,'black');
criaCirc(x,y,raio,'red');
}
//funcção que desenha a bolinha azul
function desenhaBol(xBol,yBol){
criaCirc(xBol, yBol, raioBol, 'blue');
}
//função para validar se a bolinha está na mesma posição que o alvo
function acerta(){
if(xBol == x){
alert('ACEEEEERTOOOO');
}
}
//funcao que limpa a tela
function limpaTela(){
pincel.clearRect(0,0,800,600);
}
//Função que irá mover o alvo
function moveAlvo(){
limpaTela();
if(x > 800){
sentidox = -1;
}else if(x < 0){
sentidox = 1;
}
if(y > 600){
sentidoy = -1;
}else if(y < 0 ){
sentidoy = 1;
}
desenhaAlvo(x,y,raio);
desenhaBol(xBol, yBol);
//console.log(x,y);
x = x + sentidox;
y = y + sentidoy;
}
//Função que irá mover a bolinha
function moveBol(){
desenhaBol(xBol,yBol);
console.log(xBol,yBol);
}
// Função que irá validar qual tecla foi clicada e mover a bolinha
function leTecla(event){
var event = event.keyCode;
//console.log(event);
if(event == esquerda){
xBol = xBol - 10;
}else if(event == direita){
xBol = xBol + 10;
} else if(event == cima){
yBol = yBol - 10;
} else if (event == baixo){
yBol = yBol + 10;
}
}
//define um intervalo em cada chamada
setInterval(moveAlvo,100);
// Chama a função le tecla quando pressionado o botao
document.onkeydown = leTecla;
setInterval(moveBol,0.005);
</script>
