2
respostas

offsetTop e offsetLeft aparecem como

<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>
2 respostas

Resolvido, tava chamando tela de screen e tava dando choque com as outras funções próprias do java script

Bom dia Niágara, tudo certo?

Obrigado por compartilhar e documentar qual foi o problema, é uma ótima forma de aprender e ainda ajuda a comunidade.

Continue assim e bons estudos!