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

Exercicio criando alvo aleatório

Segue abaixo o exercicio. HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acerte o alvo</title>
</head>
<body>
    <div>
        <canvas id="tela" width="600px" height="400px"></canvas>
        <script src="alvo.js"></script>
    </div>
</body>
</html>

JS

const tela = document.querySelector("#tela");
let pincel = tela.getContext("2d");
geraTela();

function geraTela(){
    pincel.fillStyle="lightgray";
    pincel.fillRect(0,0,600,400);
    pincel.fill();
}

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

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

let raio = 10;

function geraAlvo(posX,posY){
    desenhaCirculo(posX,posY,raio+20,"red");
    desenhaCirculo(posX,posY,raio+10,"white");
    desenhaCirculo(posX,posY,raio,"red");
}

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

function updateTela(){
    limparTela();
    let posXale = sorteiaPosicao(570); //evitar que corra o risco de ficar fora da tela
    if(posXale<10){
        posXale=30;
    }

    let posYale = sorteiaPosicao(370); //evitar que corra o risco de ficar fora da tela
    if(posYale<10){
        posYale=30;
    }
    geraAlvo(posXale,posYale);
}

setInterval(updateTela,1000);
1 resposta
solução!

Finalizado...