Adicionei o aprendido nesse exercício no código que postei no exercício anterior. Agora a bolinha pulsante dá uma volta pelo canvas mas eu oriento o sentido pelas setas do teclado.
<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, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 50;
var y = 50;
var raio = 10;
//códigos do teclado
var esquerda = 37;
var cima = 38;
var direita = 39;
var baixo = 40;
//taxas de incremento
var sentidoX = 0;
var sentidoY = 0;
var zoom = 1;
function movimentaCirculo () {
limpaTela ();
desenhaCirculo (x, y, raio, "red");
y = y + sentidoY;
x = x + sentidoX;
if (x < 15 || y < 15 || x > 585 || y > 385) {
sentidoX = 0;
sentidoY = 0;
}
console.log (x, ",", y);
}
function pulsaCirculo () {
limpaTela ();
desenhaCirculo (x, y, raio, "red");
movimentaCirculo ();
raio = raio + zoom;
if (raio > 13) {
zoom = -1;
} else if (raio < 7) {
zoom = 1;
}
}
function controleTeclado (evento) {
if (evento.keyCode == esquerda) {
sentidoX = - 1;
sentidoY = 0;
} else if (evento.keyCode == direita) {
sentidoX = + 1;
sentidoY = 0;
} else if (evento.keyCode == cima) {
sentidoX = 0;
sentidoY = - 1;
} else if (evento.keyCode == baixo) {
sentidoX = 0;
sentidoY = + 1;
}
}
setInterval (pulsaCirculo, 18);
document.onkeydown = controleTeclado;
</script>
