<canvas width="900" height="500"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//////////////////////////////
// ESCREVO O TEXTO EXPLICATIVO
//////////////////////////////
pincel.font = "30px Arial";
pincel.strokeStyle = 'green'
pincel.strokeText("Acerte Somente as Bolinhas Verdes", 40, 450);
///////////////////////////////
// DESENHO O RETÂNGULO MAIOR
//////////////////////////////
pincel.fillStyle = 'Dimgray';
pincel.fillRect(0, 0, 600, 400);
pincel.strokeStyle = 'black';
pincel.strokeRect(0, 0, 600, 400); // desenha a borda do retângulo
///////////////////////////////////////
// FUNÇÃO QUE DESENHA OS CÍRCULOS
/////////////////////////////////////
var raio = 20;
var xAleatorio;
var yAleatorio;
var corBolinha;
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
///////////////////////////////////////
// FUNÇÃO QUE LIMPA A TELA , APAGANDO AS BOLINHAS
/////////////////////////////////////
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
///////////////////////////////////////
// FUNÇÃO QUE DESENHA O QUADRO COM AS BOLINHAS
/////////////////////////////////////
function desenhaAlvo(x,y) {
pincel.fillStyle = 'Dimgray';
pincel.fillRect(0, 0, 600, 400);
pincel.strokeStyle = 'black';
pincel.strokeRect(0, 0, 600, 400); // desenha a borda do retângulo
corBolinha = sorteiaCor(6); // defino só 6 números para serem sorteados
// Conforme o número sorteado defino as cores
if ( corBolinha == 0 ){
corBolinha = 'white';
} else if ( corBolinha == 1){
corBolinha = 'green';
} else if ( corBolinha == 2) {
corBolinha = 'black';
} else if ( corBolinha == 3) {
corBolinha = 'red';
} else if ( corBolinha == 4) {
corBolinha = 'yellow';
} else if ( corBolinha == 5) {
corBolinha = 'purple';
}
desenhaCirculo(x, y, raio, corBolinha);
}
///////////////////////////////////////
// FUNÇÃO QUE SORTEIA AS CORES DAS BOLINHAS
/////////////////////////////////////
function sorteiaCor(maximo) {
return Math.floor(Math.random() * maximo);
}
///////////////////////////////////////
// FUNÇÃO QUE SORTEIA AS POSIÇÕES DAS BOLINHAS
/////////////////////////////////////
function sorteiaPosicao(maximo) {
return Math.floor(Math.random() * maximo);
}
///////////////////////////////////////
// FUNÇÃO QUE ATUALIZA A TELA APÓS LIMPAR
/////////////////////////////////////
function atualizaTela() {
limpaTela();
xAleatorio = sorteiaPosicao(540); // colocamos 540 em vez de 600, para não cortar o alvo do lado direito
if (xAleatorio < 60){ // verificamos o valor mínimo se não é menor que o raio total, se for igualamos ao raio total, para não cortar em cima e do lado esquerdo
xAleatorio = 60;
}
yAleatorio = sorteiaPosicao(340);// colocamos 340 em vex de 400, para não cortar o alvo no lado de baixo
if (yAleatorio < 60){
yAleatorio = 60;
}
desenhaAlvo(xAleatorio, yAleatorio);
}
setInterval(atualizaTela, 1500); // DETERMINA O INTERVALO QUE AS BOLINHAS SURGIRÃO
///////////////////////////////////////
// FUNÇÃO QUE VERIFICA SE ACERTOU NA BOLINHA
/////////////////////////////////////
function verifica(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) && ( corBolinha == 'green')){
alert('Acertou!');
}
}
tela.onclick = verifica;
</script>
