Practica - Tiro al Blanco

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

<script>

    let screen = document.querySelector("canvas");
    let brush = screen.getContext("2d");
    brush.fillStyle = "lightgrey";
    brush.fillRect(0, 0, 600, 400);

    let radio = 10;
    let xRandom;
    let yRandom;

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

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

    function cleanScreen(){

        brush.clearRect(0, 0, 600, 400);

    }

    let x = 0;




    function target(x, y){

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

    }

    function aleatorioPosicion(maximo){

        return Math.floor(Math.random()*maximo);

    }

    function uploadScreen(){

        cleanScreen();
        xRandom = aleatorioPosicion(600);
        yRandom = aleatorioPosicion(400);
        target(xRandom, yRandom);
        x++;

    }   

    setInterval(uploadScreen, 850);

    function shoot(evento){

        let x = evento.pageX - screen.offsetLeft;
        let y = evento.pageY - screen.offsetTop;

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

                alert("Acertó al tiro");

        }

    }

    screen.onclick = shoot;

</script>