Haz lo que hicimos en el aula

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


    <script>

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

        pincel.fillStyle = "#A4A4A4"
        pincel.fillRect(0,0,600,400)

        var radio = 10
        var xAleatorio
        var yAleatorio

        function circulo(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 diseñarobjetivo(x,y){
            circulo(x,y,radio + 20,"red")
            circulo(x,y,radio + 10,"#fff")
            circulo(x,y,radio,"red")

        }


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

        function actualizarPantalla(){
            limpiarPantalla()
            xAleatorio = sortearPosicion(600)
            yAleatorio = sortearPosicion(400)
            diseñarobjetivo(xAleatorio,yAleatorio)
            x++
        }


        setInterval(actualizarPantalla,1000)

        function disparar(){
            var x = event.pageX - pantalla.offsetLeft
            var y = event.pageY - pantalla.offsetTop

            if((x < xAleatorio + radio)&&
                (x > xAleatorio - radio)&&
                (y < yAleatorio + radio)&&
                (y > yAleatorio - radio)){
                    alert("Tiro Certero")
                }
        }

        pantalla.onclick = disparar