Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Dúvida Desafio Final.

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo, no capítulo Desafio Final e atividade Tiro ao alvo

por Leonardo Gustavo Cândido da Silva
| 200.2k xp | 15 posts
GTS

Bom consegui fazer o Alvo(ñ colorido do jeito certo) e ate atirar só travei na hora de passar a msg quando o usuário acerta o alvo.meu código ficou assim. a minha dúvida é na parte da "cor" e do Aviso na hora de acertar o alvo.

<canvas id="tela" width="600" height="400"></canvas>

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var alvoX;
var alvoY;
c.fillStyle = "gray";
c.fillRect(0,0,600,400);

function cor(color){
    c.fillStyle = "color";
    };

function limpaTela(){
    c.clearRect(0,0,600,400);
    };

function sorteia(value){
    return Math.floor(Math.random()*value);
    };

function circulo (x,y,raio){
    c.fillStyle = "red";
    c.beginPath();
    c.arc(x,y,raio,0,2*Math.PI);
    c.fill();
    };

function desenhaAlvo(x,y){
    var raio = 40;
    cor("white");
    circulo(x,y,raio);
    cor("red");
    circulo(x,y,raio-10);
    cor("white");
    circulo(x,y,raio-20);
    cor("red");
    circulo(x,y,raio-30);
    };

function desenha(){
    limpaTela();
    c.fillStyle = "gray";
    c.fillRect(0,0,600,400);
    alvoX = sorteia(600);
    alvoY = sorteia(400);
    desenhaAlvo(alvoX,alvoY);
    };

var atiraAzul = function(evento){

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x, y, 5, 0, 2 * 3.14);
    c.fill();
    console.log("posicao do clique!"+ x +", " +y);    
    }

setInterval(desenha,1000);
tela.onclick = atiraAzul;

</script>
1 resposta
solução!
por lucas.takeshi
| 582.9k xp | 1018 posts

Olá Leonardo,

primeiro com relação a cor, na sua função desenhaAlvo está tudo ok:

function desenhaAlvo(x,y){
    var raio = 40;
    cor("white");
    circulo(x,y,raio);
    cor("red");
    circulo(x,y,raio-10);
    cor("white");
    circulo(x,y,raio-20);
    cor("red");
    circulo(x,y,raio-30);
};

Para cada círculo que será desenhado, você primeiro chama a função cor para definir se será branco ou vermelho e depois chama a função círculo. Vamos olhar agora a função cor: 

function cor(color){
    c.fillStyle = "color";
};

Note que você recebeu o parâmetro color, mas atribuiu ao fillStyle o texto "color". Então aqui você precisa atribuir o parâmetro ao invés do texto.

Agora vamos ver a sua função circulo chamada depois da função cor:

function circulo (x,y,raio){
    c.fillStyle = "red"; //cor vermelha todas as vezes
    c.beginPath();
    c.arc(x,y,raio,0,2*Math.PI);
    c.fill();
};

Note que sempre que essa função é chamada ele troca a cor do c.fillStyle para vermelho, independente dar cor escolhida anteriormente. Basta retirar essa linha que ele vai desenhar o círculo de acordo com a cor que você escolheu antes com a função cor.

Agora com relação a mensagem, a ideia é que na sua função atiraAzul mostre se o tiro da pessoa acertou o alvo. No seu código você já tem as variáveis alvoX e alvoY que marcam onde está o alvo e as variáveis x e y que dizem onde o usuário clicou. Com essas variáveis você pode verificar se o usuário acertou ou não. Caso tenha acertado, mostra um popup na tela com a mensagem de "Parabens, você acertou". No curso é mostrado uma estrutura que permite fazer essas verificações, de executar uma mensagem somente se uma condição foi satisfeita.

Abraços