acertar al objetivo modificado | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Hola amigos , presento mi código funcionando correctamente .Le hice un par de medicaciones como por ejemplo :

Creé una variable tiempo para así modificar el tiempo desde esa variable.
EL objetivo aparecerá exactamente en el área del canvas y no saldrá cortado o nada por el estilo .Se calculó para que salga entero en el área correspondiente teniendo en cuenta el perímetro máximo del circulo mas grande
cuando el usuario acierte en el objetivo , además del mensaje que aparece , también en la consola va a parecer la coordenada en la que estaba el objetivo y la coordenada en la que acertó el usaurio
También cuando no acierte va aparecer en al consola un mensaje "fallaste"

<!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>


        <script>

            // Declarando las variables que vamos a usar en el programa

            var pantalla = document.querySelector("canvas"); // asocia el canvas
            var pincel = pantalla.getContext("2d");  // trabjamos en 2d 

            // variables globales: variables que se pueden utulizar en todo el còdigo



            var tiempo= 1000;
            var radio = 10;
            var xAleatorio;
            var yAleatorio;



            pincel.fillStyle = "pink"
            pincel.fillRect(0,0,600,400);


            function diseñarCircunferencia(x,y,radio,color){
                // esta funcion dibuja una circunferenica en el canvas, recibe parametros como la coordena x, y el radio y el color

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

            //fucion que me limpia el canvas y me lo deja en su estado incial
            function limpiarPantalla() { pincel.clearRect(0,0,600,400);   }



            function diseñarObejtivo(x,y){
                //esta funcion llama a la funcion diseñarCircunferencia() y recibe como parametros la coordena x,y para asì diujar el obejtivo 
                diseñarCircunferencia(x,y,radio +30,"red");
                diseñarCircunferencia(x,y,radio + 15,"white");
                diseñarCircunferencia(x,y,radio,"red"); 
            }


            function posicionAleatorio(min, max) {
                //esta funcion me genera un numero aleatorio , pasándole un numero min y max .Estos dos parametros corresponen al minimo y maximo tamaño del canvas

                var resultado;// varaiable local : variables que se usa en la funcion
                resultado = Math.floor(Math.random()* (max - min + 1 ) + min);
                return resultado;
            }



            function actualizarPantalla(){                             

                limpiarPantalla();    

                xAleatorio= posicionAleatorio(40,560);
                yAleatorio= posicionAleatorio(40,340);              

                //console.log("(X,Y) " + "("+ xAleatorio + ";" +  yAleatorio+ ")");
                diseñarObejtivo(xAleatorio,yAleatorio); 


            }

            setInterval(actualizarPantalla,tiempo);



            function disparar(evento){             


                var x= evento.pageX - pantalla.offsetLeft;
                var y= evento.pageY - pantalla.offsetTop;


                console.log("COORDENA REAL: " + "(" + xAleatorio +  ";" + yAleatorio +")");



                if ((x < xAleatorio + radio) &&
                (x > xAleatorio - radio) &&
                (y < yAleatorio + radio) &&
                (y > yAleatorio - radio) ) {
                    console.log("COORDENA APUNTADA: " + "(" + x +  ";" + y +")");
                    alert("Tiro Certero");  }

                else{console.log("FALLASTE");}

            }


            pantalla.onclick=disparar;  


        </script>

    </body>
</