Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Não está funcionando a primeira parte do código.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Acertando o alvo

por Victor
| 24.5k xp | 9 posts

A primeira parte do código simplesmente não funciona, e por mais que tenha vasculhado o código, ou tentado reorganizá-lo, não identifico o erro. 

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

<script>

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

    brush.fillStyle = "grey";
    brush.fillRect(0, 0, 600, 400);

    var radius = 10;

    function drawCircle(x, y, radius, color) {
            brush.filStyle = color;
            brush.beginPath();
            brush.arc(x, y, radius, 0, 2*Math.PI);
            brush.fill();
        }

    drawCircle(300, 200, radius + 20, "red");
    drawCircle(300, 200, radius + 10, "white");
    drawCircle(300, 200, radius, "red");

    function shoot(event) {
        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;
    }

    canvas.onclick = shoot;


</script>
5 respostas
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Victor,

Aparentemente o código está correto. O clique do mouse, dentro do canvas, está disparando a função shoot.

Para testar coloca a função desta forma, abre o console no navegador e clica dentro do canvas.

function shoot(event) {
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;

    console.log(x, y)
}
por Victor
| 24.5k xp | 9 posts

O problema parece estar na função draw e no seu chamamento, pois não aparecem os alvos desenhados. Uso o Chrome, tentei abrir em outro, mas em vão. Isso aconteceu apenas com o código para esta aula de acerto ao alvo, o que torna ainda mais estranho.

    var radius = 10;    

    function drawCircle(x, y, radius, color) {
            brush.filStyle = color;
            brush.beginPath();
            brush.arc(x, y, radius, 0, 2 * Math.PI);
            brush.fill();
        }

        drawCircle(300, 200, radius + 20, "red");
        drawCircle(300, 200, radius + 10, "white");
        drawCircle(300, 200, radius, "red");
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Victor,

Tenta alterar essa parte do código:

De: brush.filStyle = color;

Para: brush.fillStyle = color;

O fill está com 1 l apenas.

solução!
por Christina Coutinho
| 117.9k xp | 23 posts

Olá Victor, Tudo bem?

Corrigindo o text do brush.fillStyle, o alvo irá aparecer. A função shoot precisa de coordenadas de x e y dentro do círculo menor para quando você chamar a função shoot com o canvas.onclick = shoot, o alert apareça.

Tente isto:

if (x > 300 - radius 
            && x < 300 + radius
                && y > 200 - radius 
                    && y < 200 + radius) {

            alert('Nice Shot');
por Victor
| 24.5k xp | 9 posts

O erro estava na estruturação equivocada desse trecho do código. Christina e Eraldo consegui vocês me apontaram as duas falhas no código e aprendi com vocês. Muito obrigado! 

        if (x > 300 - radius 
            && x < 300 + radius
                && y > 200 - radius
                    && y < 200 + radius) {
                        alert("Acertou, miserávi!");
                    }