(COMPARTILHE E ABSORVA CONHECIMENTO ) IMPLEMENTANDO BOTÕES DE DIFICULDADES E LIMITADOR DE MARGEM

JOGO DO TIRO AO ALVO 1)Coloquei uma tela inicial no jogo que somente inicia se a dificuldade for escolhida 2)Botões de dificuldade 3)Margens limitantes. Algumas funções que não estão no curso aprendi lendo o Fórum (curiosidade é a ferramenta do aprendizado).Existem alguns erros no código que com o conhecimento atual não consigo consertar. Fica a publicado para que a ideia possa ser aprimorada caso alguém possua as ferramentas necessárias para aprimorar esse código. Qualquer duvida de como usar as funções presentes no código terei o maior prazer de ajudar. Aceito sugestões de implementação e principalmente correções. Bons estudos a todos!

<meta charset="UTF-8">
<button>FÁCIL</button>
<button id="button1">MÉDIO</button>
<button id="button2">DIFÍCIL</button>
<button id="button3">INSANO</button>
<br>
<br>
<canvas width="600" height="400"></canvas>
<script>    

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var raio = 10
    var xAleatorio 
    var yAleatorio 
    var bot_fac = document.querySelector("button")
    var bot_med = document.querySelector("#button1")
    var bot_dif = document.querySelector("#button2")
    var bot_ins = document.querySelector("#button3")


function fundo(cor)
{
    pincel.fillStyle = cor;
    pincel.fillRect(0, 0, 600, 400)
    pincel.fill()
}

function escreve(cor,tamanho,texto,x,y)
{
    pincel.fillStyle = cor
    pincel.beginPath()
    pincel.font = tamanho + "px Georgia"
    pincel.fillText(texto,x,y)
}     


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

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

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

function alvo(x, y,) 
{
    circulo(x,y, raio+25, 'red');
    circulo(x,y, raio+15, 'white');
    circulo(x,y, raio, 'red');
}

function posicaoX(maximo)
{
    var xa = Math.floor(Math.random() * maximo);

    while(xa > 565 || xa < 35)
    {
        xa = Math.floor(Math.random() * maximo)  
    }
    return  xa
}

function posicaoY(maximo){
    var ya = Math.floor(Math.random() * maximo);

    while(ya > 365 || ya < 35)
    {
        ya = Math.floor(Math.random() * maximo)
    }
    return ya
}

function mover() {
    limpa();
    pincel.fillStyle = "black"
    pincel.beginPath()
    pincel.strokeRect(0,0,600,400)
    pincel.fill()
    xAleatorio = posicaoX(600);
    yAleatorio = posicaoY(400);

    alvo(xAleatorio, yAleatorio);
    }

function clique(evento){
    var x = evento.pageX - tela.offsetLeft
    var y = evento.pageY - tela.offsetTop

    if((x > xAleatorio - raio)&&
        (x < xAleatorio + raio)&& 
        (y > yAleatorio - raio)&&
        (y < yAleatorio + raio ))
    {
        alert("acertou")
    }

}
function Fac()
{
    var velocidade=2000
    escreve("black",40,"ATIRADOR INICIANTE",100,100)
    setInterval(mover,velocidade)
}

function Med()
{

    var velocidade=1000
    escreve("black",40,"ATIRADO TREINADO",100,100)
    setInterval(mover,velocidade)
}

function Dif()
{
    var velocidade=500
    escreve("black",40,"ATIRADO EXPERIÊNTE",100,100)
    setInterval(mover,velocidade)
}

function Ins()
{
    var velocidade=100
    escreve("black",40,"CHUCK NORRIS",100,100)
    setInterval(mover,velocidade)
}


bot_fac.onclick = Fac
bot_med.onclick = Med 
bot_dif.onclick = Dif
bot_ins.onclick = Ins

tela.onclick = clique

fundo("lightgray")
escreve("black",40,"ESCOLHA A DIFICULDADE",50,200)



</script>