Tiro al blanco! | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> titulo barra pagina web </title>
    </head>
<body>
    <h2> titulo </h2>
    <canvas width = "600" height = "600"> </canvas>

    <script>

        var posicionxX;
        var posicionyY;
        var radio =10;
        var x;
        var y;

        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = "green";
        pincel.fillRect(0,0,600,600);

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

        function objetivo (x,y){
            dibujaCirculo(x,y,30,"red");
            dibujaCirculo(x,y,20,"white");
            dibujaCirculo(x,y,10,"red");
        }

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

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

        function actDisplay(){
            limpiaDisplay();
            posicionxX = sorteoP(600);
            posicionyY = sorteoP(600);
            objetivo (posicionxX,posicionyY);            
        }

        setInterval(actDisplay,5000);

        function dispara(evento){
            x = evento.pageX - pantalla.offsetLeft;
            y = evento.pageY - pantalla.offsetTop;

            if( (x < posicionxX + radio) &&
                (x > posicionxX - radio) &&
                (y < posicionyY + radio) &&
                (y > posicionyY - radio) ) {
                alert("acertaste");
            }
        }

        pantalla.onclick = dispara;

    </script>

</body>
</html>