Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Tentei fazer o jogo antes das aulas.

Olá segue solução que encontrei com os conhecimento apresentados até agora, esta bom ? caso tenha algum coisa a melhorar ficarei feliz em saber.

<meta charset = "UTF-8">
<canvas width="600" height="400"></canvas>

<script>

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

    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);

    var x = 300;
    var y = 200;
    var raio = 10;

    function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }
    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400)
    }

    function movimentaAlvo() {
        limpaTela();

        x = Math.floor(Math.random() * 550);
        y = Math.floor(Math.random() * 350);

        desenhaCirculo(x, y, raio + 20, 'red'); // maior círculo
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, raio, 'red'); // menor circulo   
        console.log(x, y);   

    }
    setInterval(movimentaAlvo, 900);

    function dispara(evento) {
        var posx = evento.pageX - tela.offsetLeft;
        var posy = evento.pageY - tela.offsetTop;

        if( (posx > x - raio)&&
            (posx < x + raio)&&
            (posy > y - raio)&&
            (posy < y + raio)) {

            alert('Parabéns você abertou!');
        }    
        console.log('posição mouse' + posx, posy);
    } 
    tela.onclick = dispara;    

</script>
1 resposta
solução!

Olá, Adriano! Tudo bom contigo? Muito bacana saber que você resolveu desenvolver o programa de maneira autônoma com toda sua bagagem de estudos já conquistada! Isso é, sem dúvidas, muito importante para o nosso aprendizado.

Para deixar seu código ainda mais legal, deixo uma dica de refatoração (refatoração é um termo que está associado a uma melhoria no design do nosso programa sem que haja, de fato, uma alteração de funcionalidades).

Uma boa prática seguida pela comunidade dev é construir um programa colando funções e variáveis em seu topo, depois disso, partimos para os demais comandos. Isso evita certos tipos de erro, além de trazer uma melhoria na organização e na legibilidade.

Fazendo essa alteração em seu código, chegamos no seguinte resultado:

<meta charset = "UTF-8">
<canvas width="600" height="400"></canvas>

<script>

    function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400)
    }

    function movimentaAlvo() {
        limpaTela();

        x = Math.floor(Math.random() * 550);
        y = Math.floor(Math.random() * 350);

        desenhaCirculo(x, y, raio + 20, 'red'); // maior círculo
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, raio, 'red'); // menor circulo   
        console.log(x, y);   
    }

    function dispara(evento) {
        var posx = evento.pageX - tela.offsetLeft;
        var posy = evento.pageY - tela.offsetTop;

        if( (posx > x - raio)&&
            (posx < x + raio)&&
            (posy > y - raio)&&
            (posy < y + raio)) {

            alert('Parabéns você abertou!');
        }    
        console.log('posição mouse' + posx, posy);
    } 

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var x = 300;
    var y = 200;
    var raio = 10;

    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);

    setInterval(movimentaAlvo, 900);
    tela.onclick = dispara;    

</script>

Notou a diferença? Iniciamos os comandos em Javascript declarando as funções e, logo em seguida, criamos as variáveis. Ao fim, efetuamos os demais códigos que atuam sobre o jogo.

Espero que tenho gostado da ideia. Fico à disposição para te ajudar caso surjam dúvidas ao longo dos seus estudos!

Até mais, Adriano!