Meu código ficou diferente do código do professor, principalmente na parte do X e Y aleatório.

Nesse meu código eu fiz as seguintes melhorias:

• tem contagem regressiva;
• criei um borda no canvas;
• o alvo não é criado nas bordas;
• se a pessoa acerta, o sistema para de criar os alvos e parabeniza o usuário;

Ficou bem interessante e bom para quem quer ver algo diferente.

Esperto ter ajudado. Sucesso na sua jornada!!

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

<script>

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


    function criarTexto(texto, x, y, tam, cor){

        pincel.fillStyle = cor;
        pincel.font = tam;
        pincel.fillText (texto, x, y);
    }

    function desenhaRetangulo(x, y, larg, alt, cor){

        pincel.fillStyle = cor;
        pincel.fillRect (x, y, larg, alt);
    }


    function desenhaCirculo(x, y, raio, cor){

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }

    function limpaTela (){

        pincel.clearRect(0,0,600,400);
    }

    var i = 3;

    var inicio = true;

    function contagemRegressiva(){

        if (inicio){
            if (i == 0){        
                jogo = true;
            }else {
                limpaTela();
                criarTexto ("Vocé é bom de mira, Cowboy?!", 90, 80, "25px Georgia", "brown");
                criarTexto ("Vamos ver se você consegue acertar o alvo.", 50, 100, "25px Georgia", "brown");
                criarTexto (i, 250,200, "50px Georgia", "red");
                i = i -1;
            }
        }
    }

    var raio = 10;

    function desenhaAlvo () {

        desenhaCirculo (x, y, raio + 20, "red");
        desenhaCirculo (x, y, raio + 10, "white");
        desenhaCirculo (x, y, raio, "red");

        desenhaRetangulo (0, 0, 600, 10, "black"); // barra de cima
        desenhaRetangulo(0, 0, 10, 400, "black"); // barra da esqueda
        desenhaRetangulo(590, 0, 10, 400, "black"); // barra direita
        desenhaRetangulo(0, 390, 600, 10, "black"); // barra de baixo
    }

    var jogo = false;

    function trocarPosicao () {

        if (jogo) {
                limpaTela();

                inicio = false;

                x = Math.round(Math.random()*600);

                    while (x >= 0 && x <= 40 || x >= 560 && x <= 600){
                        x = Math.round(Math.random()*600);
                    }

                y = Math.round(Math.random()*400);
                    while (y >= 0 && y <= 40 || y >= 360 &&  y <= 400){
                        y = Math.round(Math.random()*400);
                    }

                desenhaAlvo ();
        }
    }

    var x = 0;

    var y = 0;


    setInterval (contagemRegressiva, 1000);

    setInterval(trocarPosicao, 700);


    tela.onclick = verificaTiro;

    function verificaTiro (evento) {
        var xtiro = evento.pageX - tela.offsetLeft;
        var ytiro = evento.pageY - tela.offsetTop;

        if (xtiro >= x - raio && xtiro <= x + raio &&  ytiro >= y - raio && ytiro <= y + raio) {
            jogo = false;
            limpaTela ();
            desenhaRetangulo(10,10,580,480, "green");
            criarTexto ("Parabéns, a sua mira está excelente!!", 80, 200, "25px Georgia", "white");
        }

    }    

</script>