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

Dúvida no Ex. 1 da Aula 3 - Nosso primeiro jogo

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo, no capítulo Nosso primeiro jogo e atividade Pegando ponto do mouse

por David William do Nascimento
| 19.2k xp | 46 posts

Alguém pode me ajudar? Gostaria de fazer triângulos no lugar de quadrados e círculos. Onde errei?

<canvas id="tela" width="600" height="400" style="border:2px solid #000000" />

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle = "red";
c.fillRect(0,0,600,400);

var atira = function(evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    c.fillStyle = "black";
    c.beginPath();
    c.moveTo(x,y);
    c.lineTo(20,20);
    c.lineTo(20,20);
    c.fill();

    console.log("As medidas são: " + x + "," + y );
}

tela.onclick = atira;

</script>
5 respostas
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Olá David! o problema com seu código está nas linha c.lineTo(20,20).

Veja bem, quando você usa o moveTo(x, y), você move o pincel para a coordenada indicada, o lineTo() traça uma linha do ponto onde pincel se encontra para o ponto passado como argumento. Pense da seguinte forma, lineTo() faz uma linha e da matemática sabemos que para formar uma linha precisamos de dois pontos distintos.

Então quando você pos:

c.moveTo(x,y);
c.lineTo(20,20);
c.lineTo(20,20);

Você moveu o pincel para a coordenada (x,y) mas para traçar a linha no lineTo() você pôs o mesmo ponto (20,20) duas vezes, logo ele não traça linha nenhuma.

Para se formar o triangulo você pode fazer da seguinte forma, pegando como base o ponto (x,y) sempre:

c.moveTo(x,y);
c.lineTo(x-10,y+20);
c.lineTo(x+13,y+20);

Assim vai ser formado um triângulo a partir da onde você clica.

Espero ter ajudado! Bons estudos!

por David William do Nascimento
| 19.2k xp | 46 posts

Não deu certo. Acho que o problema esta sendo o ponto inicial(x,y). Não acha?

por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

David, estou testando aqui seu código com essa alteração feita e está funcionando. segue imagem:

Imagem

por David William do Nascimento
| 19.2k xp | 46 posts

Obrigado

solução!
por David William do Nascimento
| 19.2k xp | 46 posts

Estava fazendo o calculo errado. Valeu mesmo pela dica.