1
resposta

Exercio proposto

Pessoal,

Usei bastante do conhecimento adquirido e fui buscar na internet como fazer um checagem de divisão por 10.

incrementei placa, nivel automatico com aumento de velocidade de alvo.

por favor, comente o codigo .

<h1>Acerte o Alvo</h1>
<canvas id="jogo" width="600" height="400"></canvas>
<canvas id="placar" width="200" height="300"></canvas>

<script>
    //Tela
    var tela = document.getElementById('jogo');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    // Variáveis
    var raio = 10;
    var movimentoX = sorteiaPosicao();
    var movimentoY = sorteiaPosicao();
    var placar = 0;
    var nivel = 3000;

      // Placar
    var numeros = document.getElementById('placar');
    var digital = numeros.getContext('2d');
    digital.fillStyle = 'lightgray';
    digital.fillRect(0, 0,150, 170);
    digital.font='35px Georgia';
    digital.fillStyle='black';
    digital.fillText('Placar', 30, 30)
    digital.font='79px Georgia';
    digital.fillStyle='black';
    digital.fillText('0', 50, 100);


    //Funções
    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);
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
    }

    function limpaPlacar() {

        digital.clearRect(0, 0, 150, 170);
        digital.fillStyle = 'lightgray';
        digital.fillRect(0, 0, 150, 170);
        digital.font='35px Georgia';
        digital.fillStyle='black';
        digital.fillText('Placar', 30, 30)
    }
    function Alvo(x,y){
        desenhaCirculo(x, y, raio+25, 'red');
        desenhaCirculo(x, y, raio+15, 'white');
        desenhaCirculo(x, y, raio, 'red');
    }
    function aumentandoNivel(n){
        if(n % 10 == 0){
            nivel = nivel - 500;
            alert('Você Subil de Nivel!!')
        }else{

        }

    }
    function sorteiaPosicao(max){
        return Math.floor(Math.random() * max);
    }
    function escrevePlacar(p){
        limpaPlacar();
        digital.font='79px Georgia';
        digital.fillStyle='black';
        digital.fillText(p, 50, 100);
    }
    function alvoMovimento(){
        limpaTela();
        movimentoX = sorteiaPosicao(600);
        movimentoY = sorteiaPosicao(400);
        Alvo(movimentoX, movimentoY);
    }
    setInterval(alvoMovimento, nivel);

    function dispara(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if((x > movimentoX - raio) 
        && (x<movimentoX + raio) 
        && (y>movimentoY - raio) 
        && (y<movimentoY + raio)){
            placar++;
            escrevePlacar(placar);
            console.log(placar);
            alvoMovimento();
            aumentandoNivel(placar);
        }
    }
    tela.onclick = dispara;
</script>

mostrando como ficou

1 resposta

Oi oi, Antonione! Estou acompanhando seu desenvolvimento no curso de Lógica e gostaria de parabenizá-lo pelo seu progresso!

Você é bastante comprometido e sua carreira na área será incrível!

Sugiro que você complemente seu aprendizado e continue exercitando seu aprendizado com a Formação Iniciante em Programação aqui da plataforma. Lá há excelentes dicas e também o curso de Jogos Clássicos, que já vejo que você irá executar com maestria!

Parabéns novamente!

Um grande abraço e bons estudos!