1
resposta

[Sugestão] Disparando contra o alvo

Projeto de acertar alvo em que implementei um sistema de dificuldade que dá pra escolher pelos botões. Pesquisei um pouco e usei duas funções novas que descobri: o forEach e o addEventListener();

<style>
    main{
        height: 97vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    div{
        margin-top: 20;
        width: 200;
        display: flex;
        justify-content: space-between;
    }
</style>

<main>
    <canvas width="600" height="400"></canvas>
    <div>
        <button value="1000">Fácil</button>
        <button value="700">Médio</button>
        <button value="400">Difícil</button>
    </div>
</main>

<script>

    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);

        pincel.fillStroke = "black";
        pincel.strokeRect(0, 0, 600, 400);
    }

    function desenhaAlvo(x, y){
        limpaTela();
        for(i = 3; i > 0; i--){
            desenhaCirculo(x, y, raio*i, cor[i]);    
        }
    }

    function sorteiaPosicao(valorMaximo){
        // Ao contrário do Math.round(), essa função arredonda o número para menos
        return Math.floor(Math.random() * valorMaximo);
    }

    function atualizaTela(){
        xAleatorio = sorteiaPosicao(600);
        yAleatorio = sorteiaPosicao(400);
        desenhaAlvo(xAleatorio, yAleatorio);
    }

    function acertarAlvo(evento){
        var x = evento.x - tela.offsetLeft;
        var y = evento.y - tela.offsetTop;

        if((x > xAleatorio - raio) && (x < xAleatorio + raio)){
            if((y > yAleatorio - raio) && (y < yAleatorio + raio)){
                alert("Acertou no alvo!");
            }
        }
    }

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

    var raio = 10;
    var cor = ["blue", "red","white","red"];

    var xAleatorio;
    var yAleatorio;

    var botao = document.querySelectorAll("button");
    var velocidade = 1000;

    botao.forEach(function(i){
        i.addEventListener("click", function(e){
            atualizaTela();
            velocidade = i.value;
            clearInterval(interval);
            interval = setInterval(atualizaTela, velocidade);
        })
    })

    atualizaTela();
    var interval = setInterval(atualizaTela, velocidade);
    tela.onclick = acertarAlvo;

</script>
1 resposta

Olá Lucas, tudo bem?

Impressionante!

Obrigado por compartilhar seu código conosco, ficamos muito felizes pela sua determinação em ir além do conteúdo e explorar ainda mais as tantas possibilidades que temos com a programação.

Seu código está ótimo! Parabéns pela sua dedicação e empenho neste projeto, o jogo está muito divertido e funcionando certinho, continue assim.

Se precisar de ajuda estamos à disposição, conte conosco!

Um bom dia e bons estudos.