Função não identifica que acertei -_-

<canvas width="600" height="400"></canvas>

<script>

    var screen = document.querySelector('canvas');
    var brush = screen.getContext('2d');
    var radius = 10;
    var xRandom;
    var yRandom;

    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 targetPosition(max) {
        return Math.floor(Math.random() * max);
    }

    function reloadScreen() {
        clearScreen();
        xRandom = targetPosition(600);
        yRandom = targetPosition(400);
        drawTarget(xRandom, yRandom);
    }

    setInterval(reloadScreen, 5000);

    function shot(event) {
        var x = event.pageX - screen.offsetLeft;
        var y = event.pagey - screen.offsetTop;

        if ((x > xRandom - radius)
            && (x < xRandom + radius)
            && (y > yRandom - radius)
            && (y < yRandom + radius)) {

            alert('ACERTOU!!!!');
        }
    }

    screen.onclick = shot;

</script>