Mi solución Juego de tiro al blanco | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Hice el siguiente código para dar solución al juego propuesto.

<!DOCTYPE html>
<html lang="es">
<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 style="background-color: RGB(133, 194, 253);">
    <h1 
    style=" 
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    color: RGB(254, 254, 254);
    ">JUEGO DE TIRO AL BLANCO</h1>
<Center>
    <canvas width="800" height="450" style="background-color: rgb(255, 255, 255);"></canvas>
</Center>
</body>
<script>
    var pantalla =  document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    var i = 0;

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

        if(x>=(i-40) && x<=(i+40)){
            alert("Tiro  certero");
        }else{
            alert("Tiro fallido,no le pegó")
        }

    }

    function limpiarCanva(){
      pincel.clearRect(0,0,800,450);
    }

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

    function mostrarObjetivo(){
        limpiarCanva();

        y=100+Math.floor(Math.random()*300)   
        i = 100+Math.floor(Math.random()*600);

        pintarCirculo(i,y,50,"black");
        pintarCirculo(i,y,45,"red");
        pintarCirculo(i,y,38,"white");
        pintarCirculo(i,y,28,"red");
        pintarCirculo(i,y,18,"white");
        pintarCirculo(i,y,8,"black");       

    }

    pantalla.onclick = generarAlerta;
    setInterval(mostrarObjetivo,500);

</script>

</html>

Imagen de mi entorno de trabajo