Tentei "otimizar" o código diminuindo as variáveis globais, e organizando as responsabilidades.
É por esse caminho que funciona a legibilidade do código e padrões de projetos?
<meta charset="utf-8">
<canvas width="600" height="400"></canvas>
<script>
var comprimentoCanvas = 600;
var alturaCanvas = 400;
var raio = 20;
var posicoesAleatorias = sorteiaPosicoes(comprimentoCanvas, alturaCanvas);
function pegaPincel() {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
return pincel;
}
function desenhaBackground(corDoBackground) {
var pincel = pegaPincel();
pincel.fillStyle = corDoBackground;
pincel.fillRect(0, 0, comprimentoCanvas, alturaCanvas);
}
function desenhaCirculo(posicaoX, posicaoY, raio, corDoCirculo) {
var pincel = pegaPincel();
pincel.fillStyle = corDoCirculo;
pincel.beginPath();
pincel.arc(posicaoX, posicaoY, raio, 0, 2 * Math.PI);
pincel.fill();
}
function desenhaAlvo(posicaoX, posicaoY) {
desenhaCirculo(posicaoX, posicaoY, raio + 40, 'blue');
desenhaCirculo(posicaoX, posicaoY, raio + 22, 'white');
desenhaCirculo(posicaoX, posicaoY, raio, 'red');
}
function limpaTela() {
var pincel = pegaPincel();
pincel.clearRect(0, 0, comprimentoCanvas, alturaCanvas);
}
function sorteiaPosicoes(maximoX, maximoY) {
var posicaoX = Math.floor(Math.random() * maximoX);
var posicaoY = Math.floor(Math.random() * maximoY);
return {x: posicaoX, y: posicaoY};
}
function verificaAcerto(xDisparo, yDisparo) {
if(xDisparo >= posicoesAleatorias.x - raio && xDisparo <= posicoesAleatorias.x + raio) {
var acertoX = true;
}
if(yDisparo >= posicoesAleatorias.y - raio && yDisparo <= posicoesAleatorias.y + raio) {
var acertoY = true;
}
return acertoX && acertoY;
}
function avisaAcerto() {
alert('Você ACERTOU!!!');
}
function dispara(evento) {
var xDisparo = evento.pageX;
var yDisparo = evento.pageY;
var acertou = verificaAcerto(xDisparo, yDisparo);
if(acertou) {
avisaAcerto();
}
}
function atualizaTela() {
limpaTela();
desenhaBackground('lightgrey');
posicoesAleatorias = sorteiaPosicoes(comprimentoCanvas, alturaCanvas);
desenhaAlvo(posicoesAleatorias.x, posicoesAleatorias.y);
}
document.onclick = dispara;
setInterval(atualizaTela, 1000);
</script>