Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

duvida no tiro alvo

nao entendi oq seria alvoX e alvoY qual a função deles... e outra teria como eu ir aumentando a velocidade de acordo com os acertos tentei fazer um for mas fico impossivel o alvo ficou doido na tela kkkkkk e queria tb por um score.. cada vez que acertasse marcasse "um" ponto

3 respostas

Caro Augusto, vamos com calma. Dê uma olhada no meu exercício e, assim que você tiver entendido os conceitos, a gente avança para o lance dos scores, OK?

<meta charset = "UTF-8"/>

<h2>Tente acertar a bolinha vermelha do centro do alvo!</h2>

<canvas id = "tela1" width = "500" height = "500" style = "border: 1px solid black"></canvas>

<script>

    var tela1 = document.getElementById("tela1");
    var pincel = tela1.getContext("2d");

    var coordenadaX;
    var coordenadaY;

    var raio;

    var limpaTela = function(){

        pincel.clearRect(0, 0, tela1.width, tela1.height);

    }

    var pegarLapis = function(cor){

        pincel.beginPath();
        pincel.fillStyle = cor;

    }

    var desenhaCirculo = function(coordenadaX, coordenadaY, raio){

        var anguloInicial = 0;
        var anguloFinal = (2 * Math.PI);
        pincel.arc(coordenadaX, coordenadaY, raio, anguloInicial, anguloFinal);
        pincel.fill();

    }

    var sorteiaCoordenada = function(limite){

        var coordenadaSorteada = (Math.round(Math.random() * limite));
        return coordenadaSorteada;

    }

    var desenhaAlvo = function(){

        var coordenadaXAlvo = sorteiaCoordenada(500);
        var coordenadaYAlvo = sorteiaCoordenada(500);

        coordenadaX = coordenadaXAlvo;
        coordenadaY = coordenadaYAlvo;

        var raioAlvo = 50;

        console.log("Coordenada X do ALVO: " + coordenadaXAlvo + " Coordenada Y do ALVO: " + coordenadaYAlvo);

        pegarLapis("red");
        desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);

        raioAlvo = raioAlvo - 10;
        pegarLapis("white");
        desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);

        raioAlvo = raioAlvo - 10;
        pegarLapis("red");
        desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);

        raioAlvo = raioAlvo - 10;
        pegarLapis("white");
        desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);

        raioAlvo = raioAlvo - 10;
        pegarLapis("red");
        desenhaCirculo(coordenadaXAlvo, coordenadaYAlvo, raioAlvo);

        raio = raioAlvo;        
        console.log("Raio menor: " + raio);

    }

    var atirar = function(evento){

        coordenadaXTiro = (evento.pageX - tela1.offsetLeft);
        coordenadaYTiro = (evento.pageY - tela1.offsetTop);

        console.log("Coordenada X do TIRO: " + coordenadaXTiro + " Coordenada Y do TIRO: " + coordenadaYTiro);

        if((coordenadaXTiro >= (coordenadaX - raio) && coordenadaXTiro <= (coordenadaX + raio)) && 
            coordenadaYTiro >= (coordenadaY - raio) && coordenadaYTiro <= (coordenadaY + raio)){

            alert("Parabéns. Você acertou o centro do alvo!");

        }
        else{

            console.log("Errou!");

        }

    }

    setInterval(limpaTela, 1000);
    setInterval(desenhaAlvo, 1000);
    tela1.onclick = atirar;

</script>

ja entendi po

solução!

Augusto, o alvoX e o alvoY são variáveis usadas para guardar a posição do alvo. Essa posição é sorteada na função desenha. Para alterar a velocidade em cada acerto você tem que alterar o tempo do setInterval que chama a função desenha. Então, você precisa guardar o interval em algum lugar e toda vez que acertar o alvo é só parar o interval antigo e criar um novo.

Para criar o score, primeiro você precisa colocar algum elemendo na sua tela que o represente e cujo valor inicial seja 0. E toda vez que acertar o alvo você incrementa o valor deste elemento em 1.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software