Olá, boa noite!
Eu queria que fosse exibido no console cada coordenada que a bolinha animada está adotando após cada incremento. Tentei de várias maneiras, mas não consgui. É possível, minha gente?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, boa noite!
Eu queria que fosse exibido no console cada coordenada que a bolinha animada está adotando após cada incremento. Tentei de várias maneiras, mas não consgui. É possível, minha gente?
Boa tarde,
Seria colocar o console.log(x) logo após a linha de incremento da variável x. Caso queira que aparece a coordenada do eixo Y, é só declarar a variável com o valor inicial, e pedir o console.log(y), mas como o valor dessa variável não é alterado, o console iria te retornar o valor inicial toda hora.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = 'blue';
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var y = 20;
var sentido = 1;
function atualizaTela() {
limpaTela();
if (x > 600) {sentido = -1;}
else if (x < 0) {sentido = 1; }
desenhaCirculo(x, y, 10);
x = x + sentido;
console.log(x)
//console.log(y)
}
setInterval(atualizaTela, 10);
</script>Hey Matheus!
Muitíssimo obrigado pela ajuda. Eu estava errando colocando como parâmetro do console.log a instrução 'evento.pageX - tela.offsetLeft'.
Valeu mesmo!