Testem aí.
<!DOCTYPE html>
<html>
<canvas width='900' height='600'></canvas>
<meta charset='utf-8'>
</html>
<script type='text/javascript'>
var canvas = document.querySelector('canvas');
var brush = canvas.getContext('2d');
var screenWidth = canvas.width;
var screenHeight = canvas.height;
var bullseyeRadius = 0.000020 * (screenWidth * screenHeight);
var bullseyeCoord = [screenWidth / 2, screenHeight / 2];
var score = 0;
var misses = 0;
updateScreen();
drawBullseye();
setInterval(updateScreen, 800);
canvas.onclick = hitDetect;
function drawCircle (X, Y, radius, color) {
brush.fillStyle = color;
brush.beginPath();
brush.arc(X, Y, radius, 0, 2 * Math.PI);
brush.fill();
}
function drawBullseye () {
drawCircle(bullseyeCoord[0], bullseyeCoord[1], bullseyeRadius * 3, 'red');
drawCircle(bullseyeCoord[0], bullseyeCoord[1], bullseyeRadius * 2, 'white');
drawCircle(bullseyeCoord[0], bullseyeCoord[1], bullseyeRadius, 'red');
}
function updateCoord () {
var newX = Math.round(Math.random() * (screenWidth - bullseyeRadius * 3));
var newY = Math.round(Math.random() * (screenHeight - bullseyeRadius * 3));
if (newX - (bullseyeRadius * 3) - canvas.offsetLeft > 0 && newX + (bullseyeRadius * 3) < screenWidth) {
bullseyeCoord[0] = newX;
} else {
if (newX < 0) {
newX += bullseyeRadius * 3
} else { newX -= bullseyeRadius * 3 }
}
if (newY - (bullseyeRadius * 3) - canvas.offsetTop > 35 && newY + (bullseyeRadius * 3) < screenHeight) {
bullseyeCoord[1] = newY;
} else {
if (newY < 35) {
newY += bullseyeRadius * 3
} else { newY -= bullseyeRadius * 3 }
}
}
function hitDetect (event) {
var X = event.pageX - canvas.offsetLeft;
var Y = event.pageY - canvas.offsetTop;
if (X < bullseyeCoord[0] + bullseyeRadius && X > bullseyeCoord[0] - bullseyeRadius && Y < bullseyeCoord[1] + bullseyeRadius && Y > bullseyeCoord[1] - bullseyeRadius) {
score ++;
} else { misses++ }
}
function clearScreen () {
brush.clearRect(0, 0, screenWidth, screenHeight);
}
function showScore () {
brush.fillStyle = 'black';
brush.fillRect(0, 0, screenWidth, 35);
brush.fillStyle = 'white';
brush.font = '30px monospace, Arial';
brush.fillText('Hits: ' + score, 70, 27);
brush.fillStyle = 'white';
brush.font = '30px monospace, Arial';
brush.fillText('Misses: ' + misses, screenWidth - 220, 27);
}
function updateScreen () {
clearScreen();
updateCoord();
drawBullseye();
showScore();
}
</script>
