Jogo simples - como melhorar o código?

Após terminar o curso fiz um jogo simples com o código abaixo:

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

<h1> Clique no quadrado </h1>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var xAleatorio;
    var yAleatorio;

    function limpaTela() {

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


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

    function atualizaTela(evento){
        limpaTela();
        xAleatorio = [sorteiaPosicao(600), sorteiaPosicao(600), sorteiaPosicao(600)];
        yAleatorio = [sorteiaPosicao(400), sorteiaPosicao(400), sorteiaPosicao(400)];

        desenhaCirculo(xAleatorio[0],yAleatorio[0]);
        desenhaQuadrado(xAleatorio[1],yAleatorio[1]);
        desenhaTriangulo(xAleatorio[2],yAleatorio[2]);

    }

    function desenhaCirculo(x,y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle="darkblue";
        pincel.beginPath();
        pincel.arc(x, y, 25, 0, 2* 3.14);
        pincel.fill();

    }

    function desenhaQuadrado(x,y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle = 'red';
        pincel.fillRect(x, y, 50, 50);

    }

    function desenhaTriangulo(x,y) {

        pincel.fillStyle="green";
        pincel.beginPath();
        pincel.moveTo(x, y);
        pincel.lineTo(x - 25, y + 50);
        pincel.lineTo(x + 25, y + 50);
        pincel.fill();
    }

    function dispara(evento) {

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

        if (x >= (xAleatorio[0] - 25) && x <= (xAleatorio[0] + 25) && y >= (yAleatorio[0] - 25) && y <= (yAleatorio[0] + 25)) {
            alert('Você errou, este é o círculo!');
        }else if (x >= xAleatorio[1] && x <= (xAleatorio[1] + 50) && y >= yAleatorio[1] && y <= (yAleatorio[1] + 50)) {
            alert('Você acertou!');
        }else if (x >= (xAleatorio[2] - 25) && x <= (xAleatorio[2] + 25) && y >= yAleatorio[2] && y <= (yAleatorio[2] + 50)) {
            alert('Você errou, este é o triângulo!');
        }
    }

atualizaTela();
setInterval(atualizaTela,2000);
tela.onclick = dispara;

</script>

Embora tenha funcionado do jeito que eu tinha pensado, queria saber se é possível, com o conhecimento adquirido nesses dois cursos de lógica, o seguinte:

1. Tem como deixar o código mais curto, mais enxuto?
2. Dá pra garantir que, caso duas figuras estejam sobrepostas, o clique vai acionar apenas o alerta da figura que estiver por cima da(s) outra(s)?
3. Não consegui acionar o alerta do triângulo apenas na área exata da figura, a área de acionamento acabou ficando um quadrado. Dá pra acionar só dentro da figura?

Obrigado!