Pessoal, vou colar abaixo o código de resolução da Aula 04-08. Mas tenho duas dúvidas sobre isso: 1) A tabela menciona alguns números (37, 38, 39, 40) com as variáveis cima, baixo, esquerda. Esse números são algum tipo de padrão do JS? Não faria mais sentido atribuir as variáveis às instruções ArrowRight, ArrowLeft.... que aparecem no console quando pressionamos as seta? 2) Quando, dentro da função leDoTeclado, reatribuímos o valor de x com acréscimo ou decréscimento da variável taxa, o "novo" x não deveria estar restrito somente à função? Ou quando fazemos qualquer alteração no var x ela fica disponível para código inteiro? Inclusive o desenhaCirculo() que irá utilizá-la? Isso significa que quando reatribuo um valor a uma variável, ela estará disponível no código todo?
<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);
var x = 20;
var y = 20;
// códigos do teclado
var esquerda = 37
var cima = 38
var direita = 39
var baixo = 40
var taxa = 10;
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);
}
function atualizaTela() {
limpaTela();
desenhaCirculo(x, y, 10);
}
setInterval(atualizaTela, 20);
function leDoTeclado(evento) {
if(evento.keyCode == cima) {
y = y - taxa;
} else if (evento.keyCode == baixo) {
y = y + taxa;
} else if (evento.keyCode == esquerda) {
x = x - taxa;
} else if (evento.keyCode == direita) {
x = x + taxa;
}
}
document.onkeydown = leDoTeclado;
</script>