[Duda] Tiro en blanco | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Hice un codigo muy similar al de la clase pero no se si esta totalmente bien
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="600" height="400">

    </canvas>

</body>
<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400);
    var radio = 10;

    function dibujarCirculo(x, y, radio, color){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }

    // bolita movible

    function limpiar_pantalla(){
        pincel.clearRect(0,0,600,400);
    }

    var x = 0;
    var sentidox = 1;


    function diseñar_objetivo(x, y){
        dibujarCirculo(x, y, radio + 20, "red");
        dibujarCirculo(x, y, radio + 10, "white");
        dibujarCirculo(x, y, radio, "red");
    }

    function sortear_pocoson(maximo){
        return Math.floor(Math.random() * maximo);
    }

    function actualizar_pantalla(){
        limpiar_pantalla();
        xaleatorio = sortear_pocoson(600);
        yaleatorio = sortear_pocoson(400);
        diseñar_objetivo(xaleatorio, yaleatorio);
        x = x + sentidox;
        if (x > 600 || x < 0){
            sentidox = sentidox * -1;
        }
    }


    setInterval(actualizar_pantalla, 1000);

    pantalla.onclick = function(evento){
        console.log(evento);
        console.log(evento.offsetX);
        console.log(evento.offsetY);
        if (evento.offsetX > xaleatorio - radio && evento.offsetX < xaleatorio + radio && evento.offsetY > yaleatorio - radio && evento.offsetY < yaleatorio + radio){
            alert("Ganaste");
        }
    }


</script>
</html>