Fiz um programa que move a bolinha com as setas ou o w,a,s,d, aumenta ou diminui com + e - e reseta o tamanho e a posição da bolinha com o espaço. Testem ai =)
<style>
main{
height: 95vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<main>
<canvas width="600" height="400"></canvas>
</main>
<script>
function lerTeclado(evento){
if(evento.key == cima || evento.key == "w"){
if(y >= 10){
y -= 10;
}
} else if(evento.key == baixo || evento.key == "s"){
if(y <= 390){
y += 10;
}
} else if(evento.key == esquerda || evento.key == "a"){
if(x >= 10){
x -= 10;
}
} else if(evento.key == direita || evento.key == "d"){
if(x <= 590){
x += 10;
}
} else if(evento.key == espaco){
x = 300;
y = 200;
raio = 30;
} else if(evento.key == adicionar && raio <= 50){
raio += 2;
} else if(evento.key == subtrair && raio >= 20){
raio -= 2;
}
limpaTela();
desenhaCirculo();
}
function limpaTela(){
pincel.clearRect(0, 0, 600, 400);
pincel.fillStyle = "gray";
pincel.fillRect(0, 0, 600, 400);
}
function desenhaCirculo(){
pincel.fillStyle = "darkblue";
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
var cima = "ArrowUp";
var baixo = "ArrowDown";
var esquerda = "ArrowLeft";
var direita = "ArrowRight";
var espaco = " ";
var adicionar = "+";
var subtrair = "-";
var x = 300;
var y = 200;
var raio = 30;
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "gray";
pincel.fillRect(0, 0, 600, 400);
desenhaCirculo();
document.onkeydown = lerTeclado;
</script>