PROGRAMA 5

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

<script>

        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

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

        var radio = 10;
        var xAleatorio ;
        var yAleatorio ;

        function dibujarCirculo(x,y,radio,color) {

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

        }

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

        var x = 0;

        function actualizarPantalla() {

                limpiarPantalla();
                dibujarCirculo(x,20,10);
                x++;

        }

        function diseñoDiana (x,y){

        dibujarCirculo(x,y,radio+20,"red");
        dibujarCirculo(x,y,radio+10,"white");
        dibujarCirculo(x,y,radio,"red");

        }


        function sortearPosicion (maximo) {

                return Math.floor(Math.random ()*maximo) //redondear para abajo. 


        }


        function actualizarPantalla() {

                limpiarPantalla();

                xAleatorio = sortearPosicion (600);
                yAleatorio = sortearPosicion (400);

                diseñoDiana (xAleatorio,yAleatorio);

                x++;

        }

        setInterval(actualizarPantalla,1000);


        function disparar (evento){

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

                if ((x < xAleatorio + radio) &&  
                    (x > xAleatorio - radio) &&
                    (y < yAleatorio + radio) &&
                    (y > yAleatorio - radio)) {

                        alert("Buen tiro");
                }

                        // perimetro total del circulo central de la diana. 

        }

        pantalla.onclick = disparar;


</script>