<meta charset="utf-8" />
<canvas width="1000" height="600"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var cores = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'silver', 'pink'];
var corAtual = 0;
var tamanho = 10;
var tempo = 2500;
var acertos = 0;
function CriarTela()
{
pincel.beginPath();
pincel.fillStyle = 'black';
pincel.fillRect(0, 0, 1000, 600);
pincel.fillStyle = 'white';
pincel.fillRect(10, 10, 980, 580);
}
function Limpartela()
{
pincel.clearRect(0, 0, 1000, 600);
CriarTela();
}
//function desenharCirculo(evento)
//{
// var x = evento.pageX - tela.offsetLeft;
// var y = evento.pageY - tela.offsetLeft;
// var shift = evento.shiftKey;
// var alt = evento.altKey;
// if (shift) { tamanho = tamanho + 10; }
// if (alt) {
// tamanho = tamanho - 10;
// if (tamanho < 10) { tamanho = 10;}
// }
// var ctrl = true; //evento.ctrlKey;
// if (ctrl)
// {
// pincel.beginPath();
// pincel.fillStyle = cores[corAtual];
// pincel.arc(x, y, tamanho, 0, 2 * Math.PI);
// pincel.fill();
// }
// corAtual++;
// if (corAtual == cores.length) { corAtual = 0; }
//}
function desenharCirculo(x, y, raio, cor)
{
pincel.beginPath();
pincel.fillStyle = cor;
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function posicaoAleatoria(tamanho)
{
return Math.floor(Math.random() * tamanho);
}
function validaLimites(valor, tamanho)
{
var retorno = valor;
if (valor < 40) { retorno = 40; }
if (valor > (tamanho - 40)) { retorno = tamanho - 40; }
return retorno;
}
var xAleatorio = 0;
var yAleatorio = 0;
function CriarAlvo()
{
Limpartela();
xAleatorio = validaLimites(posicaoAleatoria(1000), 1000);
yAleatorio = validaLimites(posicaoAleatoria(600), 600);
//console.log(xAleatorio + ', ' + yAleatorio);
desenharCirculo(xAleatorio, yAleatorio, 30, cores[corAtual]);
desenharCirculo(xAleatorio, yAleatorio, 20, 'white');
desenharCirculo(xAleatorio, yAleatorio, 10, cores[corAtual]);
corAtual++;
if (corAtual == cores.length) { corAtual = 0; }
}
function validaAcerto(evento)
{
var x = event.pageX - tela.offsetLeft;
var y = event.pageY - tela.offsetTop;
console.log(xAleatorio + ', ' + yAleatorio);
console.log(x + ', ' + y);
if ((x > xAleatorio - 30) && (x < xAleatorio + 30) && (y > yAleatorio - 30) && (y < yAleatorio + 30)) {
acertos++;
alert('Parabéns... ' + acertos + ' acerto(s)');
tempo = tempo - 10;
setInterval(CriarAlvo, tempo);
}
}
CriarTela();
setInterval(CriarAlvo, tempo);
tela.onclick = validaAcerto;
</script>