<canvas width="600" height="400"></canvas>
<script>
var screen = document.querySelector('canvas');
var brush = screen.getContext('2d');
brush.fillStyle = 'white';
brush.fillRect(0,0,600,400);
var radius = 10;
var randomX;
var randomY;
function drawCircle(x,y,radius,color) {
brush.fillStyle = color;
brush.beginPath();
brush.arc(x,y,radius,0,2 * Math.PI);
brush.fill();
}
function clearScreen(){
brush.clearRect(0,0,600,400);
}
function drawTarget(x,y) {
drawCircle(x,y,radius+20,'red');
drawCircle(x,y,radius+10,'white');
drawCircle(x,y,radius,'red');
}
function randomPosition(maximum) {
return Math.floor(Math.random() * maximum);
}
function updateScreen() {
clearScreen();
randomX = randomPosition(600);
randomY = randomPosition(400);
drawTarget(randomX,randomY);
}
setInterval(updateScreen,3000);
function check(event) {
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
if( (x > randomX - radius)
&& (x < randomX + radius)
&& (y > randomY - radius)
&& (y > randomY + radius)) {
alert('Acertô!!')
}
}
screen.onclick = check;
</script>