[Dúvida] Código não roda.

Uncaught SyntaxError: Unexpected token '{' (at jogo_alvo.html código não chega a rodar, consta essa mensagem no "IF"

<canvas width="600" height="400"></canvas>
<p id="pontos"> </p> 


<script> 

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

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

    var raio = 10
    var posicaoAleatorioX;
    var posicaoAleatorioY;
    var pontos = 0;

    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 desenhaAlvo(x, y){

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

    }

    function sorteiaPosicao(maximo) {

        return Math.floor(Math.random() * maximo);

    }

    function atualizaTela() {

    limpaTela();
    posicaoAleatorioX = sorteiaPosicao(600);
    posicaoAleatorioY =sorteiaPosicao(400);
    desenhaAlvo(posicaoAleatorioX, posicaoAleatorioY);

    }
    setInterval(atualizaTela, 1000);


    function dispara(evento) {

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

        If ((x > posicaoAleatorioX - raio) 
            && (x < posicaoAleatorioX + raio)
            && (y > posicaoAleatorioY - raio) 
            && (y < posicaoAleatorioY + raio)) {
            pontos++
            alert("acertou");
            areaQueExibePontos.textContent = "Pontuação: " + pontos;
        }

    }

    tela.onclick = dispara;




</script>