Acertando o alvo

Oi pessoal. Queria compatilhar esse avanço com vocês.

Sei que no final desse curso faremos um jogo de tiro ao alvo dinamico. Mas enquanto não chego nas últimas aulas acabei pensando o seguinte: "porque não fazer o alvo aparecer em lugares aleatórios?".

Então usando duas variaveis (posicaoX e posicaoY), o tamanho da tela e Math.random, consegui fazer com que cada vez que o código é lido o alvo apareça em um lugar diferente. Ainda não é dinamico, igual será no jogo, mas fiquei muito feliz em ter conseguido pensar nisso.

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

<script>

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

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

    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();
    }

    var posicaoX = Math.round(tela.offsetWidth * Math.random());
    var posicaoY = Math.round(tela.offsetHeight * Math.random());

    desenhaCirculo(posicaoX,posicaoY, raio + 20, 'red'); // maior círculo
    desenhaCirculo(posicaoX,posicaoY, raio + 10, 'white');
    desenhaCirculo(posicaoX,posicaoY, raio, 'red'); // menor circulo

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if(x > posicaoX - raio && x < posicaoX + raio && y > posicaoY - raio && y < posicaoY + raio){
            alert('acertou');
        }       
    }

    tela.onclick = dispara;

</script>